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 in the image itself (using a photo editor like Photoshop) 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.

Efficient Image Encoding

Even after the pixel and file size of the image are reduced, the size can be reduced even further by converting the image to the newer "webp" format. This must be done manually and visually, as images resulting from automated webp converters can end up looking fuzzy or bitmappy because the size was reduced too much.

As you can see, the entire process for optimizing just one image for a website - the PROPER WAY - can take a long time, which is why most web designers choose not to do it at all.

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.
ALL BLOGS

Do you have questions about my services?

CONTACT ME

HOURS

  • 7 Days/Week
    8:00am-6:00pm
    PAYMENTS

    3.5% fee added to credit card payments
    CONNECT

    Facebook

    Serving all U.S. states, New Jersey (South Jersey, North Jersey, Central Jersey, Jersey Shore), Pennsylvania, Delaware, etc., including Atlantic County NJ, Bergen County NJ, Burlington County NJ, Camden County NJ, Cape May County NJ, Cumberland County NJ, Essex County NJ, Gloucester County NJ, Hudson County NJ, Hunterdon County NJ, Mercer County NJ, Middlesex County NJ, Monmouth County NJ, Morris County NJ, Ocean County NJ, Passaic County NJ, Salem County NJ, Somerset County NJ, Sussex County NJ, Union County NJ, Warren County NJ, Atco NJ 08004, Audubon NJ 08106, Bayonne NJ 07022, Bensalem PA 19020, Berlin NJ 08009, Bordentown NJ 08505, Brick NJ, Bristol PA 19007, Burlington NJ 08016, Cherry Hill NJ, Cinnaminson NJ 08077, Claymont DE 19703, Clifton NJ 07011, Collingswood NJ 08108, Columbus NJ 08022, Croydon PA 19021, Delanco NJ 08075, Delran NJ 08075, Deptford NJ 08096, Eastampton NJ 08060, East Windsor NJ 08520, Evesham NJ 08053, Ewing NJ 08618, Fairless Hills PA 19030, Florence NJ 08518, Franklinville NJ 08322, Glassboro NJ 08028, Haddonfield NJ 08033, Hainesport NJ 08036, Hamilton NJ 08610, Hoboken NJ 07030, Hockessin DE 19707, Jersey City NJ, Jobstown NJ 08041, Juliustown NJ 08042, Langhorne PA 19047, Laurel Springs NJ 08021, Levittown PA, Lumberton NJ 08048, Mansfield NJ 08022, Mantua NJ 08051, Maple Shade NJ 08052, Marlton NJ 08053, Medford NJ 08055, Mercerville NJ 08619, Merchantville NJ 08109, Moorestown NJ 08057, Mount Holly NJ 08060, Mount Laurel NJ 08054, Mullica Hill NJ 08062, New Castle DE 19720, Newfield NJ 08344, Oaklyn NJ 08107, Old Bridge NJ 08857, Parsippany-Troy Hills NJ 07054, Passaic NJ 07055, Paterson NJ, Pemberton NJ 08068, Pennsauken NJ 08110, Philadelphia PA, Pine Hill NJ 08021, Piscataway NJ 08854, Pitman NJ 08071, Princeton NJ, Riverside NJ 08075, Riverton NJ 08077, Robbinsville NJ 08691, Rockland DE 19732, Sewell NJ 08085, Shamong NJ 08088, Sicklerville NJ 08081, Somerdale NJ 08083, Southampton NJ 08088, Tabernacle NJ 08088, Toms River NJ, Trenton NJ, Turnersville NJ 08012, Vincentown NJ 08088, Vineland NJ, Voorhees NJ 08043, Washington Township NJ, Westampton NJ 08060, West Berlin NJ 08091, Williamstown NJ 08094, Wilmington DE, Woodbridge NJ 07095, Woodbury NJ 08096
    © T. Brooks Web Design, LLC