Practical Ecommerce

Optimizing Images to Reduce Load Times

Not is only a site’s load time factored into its search-engine rankings, the longer it takes to load the more likely it will lose visitors. A large percentage of bandwidth usage — especially for ecommerce sites — comes from images. As such, image size is an important component of a site’s speed. This article will explain ways to optimize images for improved load times.

File Types

The first and simplest thing to consider when optimizing images is file type. Certain image file types are better suited for specific images. For example, JPGs are best suited for photographic images. PNGs, on the other hand, are best suited for simple images with few colors or for images using transparency. 24-bit PNGs are best suited for images containing both photographic elements and simple graphics. 8-bit PNGs can further reduce file size in images with fewer than 256 colors.

Use JPGs for photographs.

Use JPGs for photographs.

Use PNG-8 for simple images.

Use PNG-8 for simple images.

Use PNG-24 when simple images and photographic elements are combined.

Use PNG-24 when simple images and photographic elements are combined.

There are other images formats like TIF, GIF, and SVG that can be used. But the majority of web graphics is JPG and PNG. A basic rule of thumb is to use JPGs for anything photographic and PNGs for everything else. If you’re in doubt about which file type to use, try saving the same images as both a JPG and PNG and then compare quality and file size.

Saving Methods

Another important consideration for image optimization is the method of saving it. Many applications provide optimization options like compression, metadata (i.e., size, resolution, and date created), and color profiles when you save images. If you use Adobe software for image editing, use the “Save for Web & Devices” dialogue box when optimizing your images.

When using that “Save for Web & Devices” dialogue box, you can preview what images will look like once they are compressed, edit metadata, adjust image size, and preview the file size of the image. This allows you to easily compare how large of a file will be created if you save as a PNG-8, PNG-24, or JPG file type.

Zoom Enlarge This Image

"Web & Devices" preview in Adobe software products.

"Web & Devices" preview in Adobe software products.

“Save for Web & Devices” also allows you to convert your image to a web-ready sRGB color mode. Occasionally you might be working with an image using a CMYK color mode, or a color mode optimized for print. Because CMYK color modes use four colors (cyan, magenta, yellow, and black) compared to RGB’s three colors (red, green, and blue), saving in the CMYK color mode adds slightly to image file size.

If you don’t use Adobe software for image editing, consider using RIOT — Radical Image Optimization Tool. RIOT is a freeware application for Windows that allows image optimization for JPG, GIF, and PNG images. RIOT can compress images, remove metadata, and adjust image color to reduce image file size.

Zoom Enlarge This Image

RIOT is a freeware, Windows application that helps optimize images.

RIOT is a freeware, Windows application that helps optimize images.

Image Resizing

Saving an image in the correct dimensions is always better than having the browser resize it. If a browser resizes a 1024×1024 pixel image to 250×250, the user is still downloading the larger 1024×1024 size. Be sure to upload images as the correct size rather than relying on a browser to resize them.

Using One Image Multiple Times

Another way to reduce image bandwidth is to use the same images multiple times throughout a site. For example, the same logo, menu image, and header can be used on every page of the site. This means users only have to download the image once and their browsers can then display the image from the browser cache when they view other pages.

You can also optimize some background images in a similar way. For example, if you are using a textured background, you might be able to create a smaller, repeating image instead of a single large image. The same can apply to gradient background images.

Sprites and Preloaders

A helpful practice for reducing load time is the use of CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often employed for mouse-over states on buttons. For example, with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over it.

Though sprites are frequently used for interactive menus and buttons, they can also be used to display multiple site images from a single image file. This would require the browser to only download one image instead of, say, three or four.

In addition to sprites, images can be preloaded using JavaScript, jQuery, Ajax, or CSS. When an image is preloaded, the browser downloads or “preloads” the image and then instantly displays it when the user goes to access it. Preloading can greatly decrease load times with image heavy websites, especially sites with photo galleries.

Using CSS Instead of Images

Sometimes the best way to decrease image load time is not to use an image at all. Improvements to CSS have made it possible for the browser to render certain “images” using pure CSS. It is now possible to generate rounded rectangles, gradients, drop shadows, and transparent images using CSS. Be warned, every browser won’t always support these techniques and browser compatibility should be carefully considered before replacing an image with CSS.

Tags:    

Drew Coffin
Drew Coffin
Bio  |  RSS Feed


Get the Practical Ecommerce RSS feed

Comments ( 7 )

  1. David Tait February 10, 2012 Reply

    Should the title be "Optimising Images to Reduce Load TImes" rather than Increase? The aim is to have the load times being as short as possible.

    David
    http://homelivingstudio.com

    _Editor’s Note: Thank you, David. Our mistake. We have now changed._

  2. David Tait February 10, 2012 Reply

    A nice tool if you are using a Mac is "ImageOptim" which allows you to drop in a folder and it will automatically compress the files for you.

    Always best to verify them before you upload to check you don’t have any artefacts from over compression or file incompatibilities.

  3. Sun W Kim February 12, 2012 Reply

    I like using progressive jpeg as it gives a preview while the image loads. Same as interlaced gif.

    I also optimize to Jpeg quality 70 or better and not to exceed 32kb. Many computers read hard drives in 4kb chunks so 32kb is more efficient than 33kb.

    Also offloading your images across different servers an help with load times. Instead of asking one server for ten images, splitting the request across 10 different can be faster. Or use a CDn content delivery network like amazon s3

  4. Daniel Flöijer February 12, 2012 Reply

    You should have mentioned minimizing images as well, since you can get even smaller image sizes with lossless minimizing with tools like jpegtran or jpegoptim and OptiPNG or PNGOUT. Google writes about them in their page speed project and there’s a lot of other useful things there.

    [http://code.google.com/intl/sv-SE/speed/page-speed/docs/payload.html#CompressImages](http://code.google.com/intl/sv-SE/speed/page-speed/docs/payload.html#CompressImages)

  5. Neil Charlton February 14, 2012 Reply

    We use a number of techniques to do this including

    1. Resize for all image sizes and optimise

    2. Serve the static images from a subdomain

    3. Name the image files correctly (more for SEO)

    4. Use Amazon CloudFront (or another cdn)

    5. Leverage browser caching for images

    These all help to reduce page load times. See our article here http://blog.bleepsystems.com/2012/how-we-optimise-images-for-seo-and-fast-page-loading-times/
    for more information on each one.

  6. Margaret Collins February 14, 2012 Reply

    While all of these are good fixes, they assume you’re limited to working with traditional static images and all their attendant asset and file size hassle. On-demand dynamic imaging should be discussed here as an enterprise solution. Basically, it’s editing image data server-side to produce new images at the moment they’re needed (whether that’s on page load, or during a shopping session–changing dress colors, adding alloy wheels, switching to the exterior view, whatever). The work is off the browser’s shoulders, so the user experience is lightning fast when well implemented.

    The dynamically produced images can then be stored or saved–or sent directly to production in SVG format (not all providers support this function, though we do)–but they don’t have to be. Think one high-res image for hundreds of product images in different sizes (or preset zoom levels) throughout your site. You preserve the highest possible image quality while getting *faster* page load times and way reducing asset maintenance.

    It’s a fairly new technology but there are still good options even for smaller businesses, since solutions are available in the cloud. I know I sound like an evangelist (or, well, a marketer), but it’s a truly revolutionary change in the way we can start handling images online. If you haven’t come across it yet, you can play with a few examples of implementation on our demos page: http://liquidpixels.com/demos/

    Margaret
    LiquidPixels.com

  7. Carl-Michael Hughes January 23, 2014 Reply

    what is the simplest or fastest way to preload a background image with Js? I found many dead-end articles, but no simple solution.

    my site: http://carlmichaelhughes.net just has one bg image that takes fo’ever to load.

Email Newsletter Signup

Sign up to receive EcommerceNotes,
our acclaimed email newsletter.

And receive a free copy of our ebook
50 Great Ecommerce Ideas