Why you should optimize your web site images

Why should we optimize the images we upload to our web sites?

  • Faster page load
  • Less bandwidth used
  • Better user experience

It is worth noting that one of the things Google ranks your site on is page load speed.

 

How do I optimize my website images?

Step 1 – Determine the size you want the image to be.

 

If you use FireFox or Chrome as your browser, download the Web Developer extension and use the Ruler (Miscellaneous > Display Ruler) to measure the area where you would like the image to appear. Use those dimensions as the target for your image size.

If you use a Microsoft browser, the Pixel Window app allows you to measure portions of a web page.

 

Step 2 – Choose a program or online service to alter your image.

 

In a random sampling of various programs and online services I found that Photoshop did the best job of reducing the image file size while maintaining the quality of the image.

Of the many online image optimizers I tried, webresizer.com came closest to matching Photoshop. Webresizer.com served up a 600 pixel x 400 pixel image size of 55.9 KB compared to Photoshop’s 49.2 KB image. All images were optimized to a resolution of 72 pixels per inch.

Note: when I uploaded the original 2MB image to a WordPress page and set the image to display at 600 pixels X 400 pixels, WordPress displayed the image at 600 X 400 but actually placed a 1024 pixel X 682 pixel sized image on the page, resulting an image size of 139 KB compared to 49 KB. Effectively increasing the page size by 30%. When the image was inserted into the WordPress page and set to display at full size, WordPress constrained the photo to the width of the content portion of the page, (displaying it at 600 pixels wide) but the page size jumped from 221 kb to 2333 kb, hugely increasing the page size and bandwidth usage.

While all of this may sound a bit nit-picky in the high-speed internet world of today it’s worth noting that many sites are now viewed on smart phones where pages load much more slowly.

Optimizing the test image took approximately 30 seconds in Photoshop and around a minute with most of the online optimization sites. Not a bad trade off when you consider how much time and bandwidth would be wasted by your web visitors waiting for that 2 MB image to load.

photoshop optimized