06 Dec 2017

If you care about your website’s performance – and, in turn, its SEO – you need to control the size of your images. Page loading speed is a critical factor when measuring overall website health, SEO and user experience (UX). Long delays in page load times may cause your visitors to leave – especially if they’re using a mobile device.

On mobile e-commerce websites, page loading time is the primary performance factor, with product images being the primary culprit for slowing things down. With over half of average website visitors using a smartphone, managing the file size of your images is crucial for running a successful modern website or progressive web app (PWA).

How can I determine if my site speed is affected by image sizes?

Try testing your website using Google PageSpeed Insights to learn if there is room for improvement.

Page Weight by imgIX is another fantastic performance tool.

Tips for Good Web Image Optimization

The main aspects of website image optimization for performance are:

Reduce Image dimensions (in pixels)

Avoid uploading original high-resolution images to your website just for display purposes, regardless of file formats (JPG, PNG, GIF, TIF etc.).

Full-width slideshows

For full-width slideshows (that automatically stretch to the full size of the browser), B2 Web Studios recommends using a maximum of 2560 pixels in width, which is the common resolution width for 27″ and 30″ monitors.

Images can have any height you need, for creating an aspect ratio you’re comfortable with. For example, for full-page slideshows keep the original aspect ratio of images. But for smaller slideshows at the top of a homepage, try to keep the images shorter (to an aspect ratio of around 3:1 or more).

Large images in “lightbox” displays

Whenever a web image needs to be “zoomed in” on the screen (like in a lightbox display after clicking on a thumbnail, possibly part of a gallery slideshow), a maximum of 1,500 pixels in width (and a max height of around 800-900 pixels) is acceptable.

Besides keeping the file size reasonably small, restricting image dimensions like this also means faster transitions between images, such as in slideshows which allow navigating between images.

Modifying Image quality/compression level

Exporting JPG images

If using a tool like Adobe Photoshop or Lightroom, you rarely need to export images at 100% in the quality slider – Choose between 60% or 70% for “good-enough” quality at greatly a reduced file size. Only when going lower than 50-60% will you begin seeing discernible image noise. But between 100% and 70%-80%, image quality difference is imperceptible, while the difference in file size is impressive.

If using the latest version of Photoshop CC, use their new export dialog box under “File > Export > Export As…”, then try experimenting to find a compression level you’re comfortable with. Once again, we typically find 60% – 70% an acceptable compromise between image quality and file size.

Using PNG/SVG/GIF for graphics with solid colors

Most websites or Progressive Web Apps (PWAs) contains other graphics other than regular photos, like logos, icons, or banners. Any graphics that contain areas of solid color (designed in Photoshop or other tools) can be saved in a “lossless” file format like PNG, SVG or GIF.

Extra image compression using ShortPixel

When uploading images to your website, especially WordPress, you’re in luck. There are a bunch of great plugins that automatically handle a lot of image compression work for you. They take every image you upload, and compress it (in either a lossy or lossless version) to optimize file size.

Many plugins, like Imagify, Smush.it and Kraken are popular tools, but our favorite image compression plugin at B2 Web Studios is ShortPixel. We recommend it for all our client’s website, and use it ourselves. ShortPixel can optimize new images you add to your website at various compression levels, and can also go back and optimize your site’s existing images within the WordPress media library as a bulk optimization. Try testing your site’s performance before and after a bulk optimization.

Google’s Image Optimization article, part of their Web Fundamentals guides, is a very informative tool for advanced users to learn more about “squeezing” more from image file sizes.