Have you ever seen pictures on a website that appear to be blurry, distorted, pixellated or jagged? This happens when the photos are not properly sized, dimensioned, or optimized.
Taking a photo from a camera and adding it to a website without optimizing the photo will generally result in a substandard looking image on the website. A good web designer knows how to properly optimize an image for use on a website. Some of these optimizations include:
- Adjusting Image Size – In order to get the photo to fit in a certain spot on the web page, the image size (number of pixels) and dimensions (height and width) will need to be changed. A photo file from a camera can be huge. Let's say a photo from your camera is 2000 pixels high by 6000 pixels wide. A typical web page is 900 pixels wide. The space where you want to place the image may be, say, 200 pixels high by 600 pixels wide. In order to get the photo to fit in that space, you have to reduce the number of pixels. Many web designers make the mistake of keeping the image the original size but using web code to dictate the size of the photo. This is incorrect, as it can cause the photo to look blurry and put too much of a load on the web page when it has to resize the photo.
- Adjusting Photo Dimensions and Cropping – Suppose, in the example above, the space where you want to place the image is 200px H x 800px W instead of 600px W? Now the photo is going to have different dimensions, so you'll have to be creative and either crop out the portion of the photo that is not needed, or stretch or squeeze the photo to fit within those dimensions. Depending on the content of the photo, either solution may work, but it's a trial and error process and one solution does not fit every image.
- Reducing File Size – A photo file from a camera can be several megabytes in size (this is different from the image size, which is measured in pixels). The web page will have trouble loading a photo of such a large size, which can stall the page or cause it to take too long to load. Not only will visitors to your site grow impatient, but slow loading pages don't do as well in search engine rankings as those that load quickly. The best way to reduce the size of a photo file is by using photo editing software. The smaller the photo size, the grainier or blurrier it will become, so it's best to reduce the file size visually, saving the photo at the lowest file size in which the photo quality is still satisfactory.
- Other Optimizations – Often a photo coming from a camera may be too dark, or blurry, or the colors may be muddy. Optimizing the photo for brightness, contrast, color saturation, sharpness, etc. assures that the photo will look its best on the website.