CALL or TEXT 609-914-1318
Home / Blog / Websites and Web Design / Optimizing Website Images

Optimizing Website Images

Optimizing Website Images

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

All websites should include images. They hold the attention of your website's visitors, improve user experience, and even help with search ranking. But adding images to your website is not as simple as uploading photos from your phone or camera and plopping them on your website.

A web designer should include image optimization as part of their web designer services.

Some of the optimizations that may need to be done to images before they're added to your website 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, and the file size is 1MB. The space on the web page where you want to place the image may be, say, 200 pixels high by 600 pixels wide. 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. The right thing to do is reduce the number of pixels to 200 x 600, which may reduce the file size to, say, 200K.

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 major 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 this must be done visually and manually, saving the photo at the lowest file size in which the photo quality is still satisfactory. So in addition to reducing the pixel size of the image, the web designer should also change the file size of the image, which reduces the file size even more than just reducing pixel size.

Example of Reducing Image Size and File Size for a Website

The two images below are both sized to 355 pixels wide and tall using website coding.

Optimizing Images for Web Design Optimizing Images for Web Design

Adjusting Photo Dimensions and Cropping

Suppose you want to add a photo to a space on the website that's 200 pixels high by 800 pixels, but the photo is 200px by 600px? You have to either crop out the portion of the photo that is not needed, otherwise stretching or squeezing the photo to fit will distort the image and make it look too wide or narrow. Adjusting photo dimensions is a trial and error process and one solution does not fit every image.

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.

© T. Brooks Web Design, LLC. All rights reserved. Protected by Copyscape
Do not copy content from this page without attribution to T. Brooks Web Design and link back to this page.

Do you have questions about my services?

© T. Brooks Web Design, LLC