Images on your Website

After your website is up and running there may come a time when you need to edit your images to fit in a specific area or to edit your image to increase the contrast and generally make it look better. There are several free online tools that can make this task a little less daunting. But first there are some things to understand about your images for use on the web.

  Images are comprised of pixels, hundreds of thousands of tiny squares of color. The picture you take with most cameras nowadays have are way too large for use on the web. You can still upload them, but for the sake of saving space on your server and fast loading times, it is imperative that you decrease the file size. Most images you take with your camera will be between 300-600 DPI or PPI; That's Dots-per-inch or Pixels-per-inch (which for all intents and purposes are used interchangeably). But for the web these images only need to be 72-100 DPI. Most of these free imaging programs will only have one option, and that is too save your image at 100 DPI. So that takes care of the size issue for you.

 When sizing an image for the web, there are two elements to be concerned with...the width and the height of the image. On your website this will be listed in px or pixel dimensions. Some images like for that of an Image Slider like the one on my front page requires a specific sized image (ie.  840 × 270). The first dimension is always the width and the second is the height. When using these online image editing tools, there is usually an image resize option. When resizing the image, make sure that you do not crop the image to less than both the width and height.

  Cropping is a matter of resizing your image by cutting out everything but the part of the image you need. Many online image editors have a selection or cropping tool that will allow you to outline the area you want to keep and then click the crop link. This will automatically resize the image to that cropped space selected. The only problem with this, is that the area may be too narrow or too wide and the results will show the image as skewed.

When uploading and inserting the image into your website, if for instance the image is too narrow, it will still expand to be the width of the required area, and this results in your image being blurry or pixelated and in some instances being stretched so that it fits the height and width requirement, and overall looking very shoddy. So make sure when cropping your image that it refects the width and height values required.