Optimizing Photos for a Website

You shouldn't add a photo to your website right from your camera or phone. A lot of things have to be done to that photo before it can be used on your website.

Optimizing Website Photos

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 phone or camera and adding it to a website without optimizing the photo will often 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 from a phone or camera can be huge. Let's say the photo is 2000 pixels high by 6000 pixels wide. The space on the web page 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 website code to adjust the size of the image (because it's faster than taking the time to optimize the image). This can cause the photo to look blurry and also make the page load slowly since the size of the image file has not been reduced.

Adjusting Photo Dimensions and Cropping

Suppose, in the example above, the space where you want to place the image is 200 pixels high by 800 pixels wide instead of 600 pixels wide? 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 (which can make the image look too wide or too narrow). Adjusting photo dimensions is a trial and error process and one solution does not fit every image.

Reducing File Size

An image 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 website grow impatient, but page load time is a search ranking factor. The best way to reduce the size of a photo file is by using photo editing software. The smaller the image size, the grainier or blurrier it will become, so it really has to be done visually, saving the photo at the lowest file size in which the photo quality is still satisfactory.

Other Optimizations

Often a photo coming directly from a camera or phone may be too dark, or blurry, or the colors may be muddy, or you might even want some elements of the photo cropped out. Optimizing the photo for brightness, contrast, color saturation, sharpness, etc. assures that the photo will look its best on your website.

Protected by Copyscape
MORE BLOGS
CONTACT ME

HOURS

7 Days/Week
8:00AM – 6:00PM
and after hours
PAYMENTS

CONNECT

Facebook Twitter Better Business Bureau LinkedIn