Optimizing website images for speed

| Web Design

Fast image speedOptimizing your website images can save a lot of bandwidth and improve page speed considerably. All you need is a little time and a few tools.

Recommendations reflect what I stick to on websites, after considering the pros and cons. Where appropriate a link to a discussion is provided so you can form your own opinion.

This tutorial focuses on directly optimizing the images used. It does not discuss server side image processing, which is a different topic altogether.

Covered in this tutorial

  1. Which image format for which usage?
  2. Which JPG format to use, baseline or progressive?
  3. Size considerations and compression
  4. What about high resolution and retina screens?
  5. Making images responsive in your design
  6. Free tools for (batch) optimizing images on Windows
  7. Optimizing existing website images in bulk
  8. General recommendations and recap

1. Choosing image file formats

.GIF (Graphic Interchange Format)

  • Lossless file format, limited to 256 colors, supports transparency and animation.
  • Only use this for very small things like flags or icons.
  • Otherwise very 1998 ...

.JPG or .JPEG (Joint Photographic Experts Group)

  • Lossy compression file format, no transparency.
  • Use for photographs and complex big images.
  • Two of the main types in this format are baseline and progressive.
  • See below under "2. Which JPG format to use, baseline or progressive?" and under "3. Size considerations and compression"

.PNG (Portable Network Graphics)

  • Lossless data compression, supports transparency.
  • Excellent for smaller images like category images, menu images, flags, etc.
  • Usually not recommended for big photographs (because of bigger file size).

.WEBP (Weppy)

  • Both lossy and lossless compression file format, developed by Google.
  • Native browser support on Chrome and Opera, plugins needed for most other browsers.
  • Native support in most CMS's (including Joomla).
  • The average WebP file size is 25% – 34% smaller compared to jpeg file size.
  • Image quality and support considerations make me not choose it, despite file size improvements.

.SVG (Scaleable Vector Graphics)

  • Lossless data compression. Defined in XML text files. Can be searched, indexed, scripted, and compressed.
  • Supported by all major modern browsers. Scale without loss of quality, support animation.
  • Use for simpler images, complex images and photographs encoded in svg result in enormous file sizes.
  • For IE9 they can be used to solve an issue with a gradients & rounded corners combination (CSS3 gradients poke through element borders with IE9).

Click here for details on bowser support for various file formats.

2. Which JPG format to use, baseline or progressive?

Baseline JPG renders the image directly in the quality used.

Progressive JPG renders a lowres image first and then progressively enhances the quality on further download. On Google images you can see this effect these days, fuzzy first, clear later. I do not care for it much myself...

Lately there has been renewed interest in the old progressive JPG format because it is recommended by Google's PageSpeed and because many people argue it's better to present mobile users (with limited bandwidth) with a lower resolution image first.

Another argument for progressive JPG states that it prevents jumbling of website elements before the image is completely loaded. Which can and should be avoided anyway by properly setting at least the image width on the elements in your CSS.

My personal take on this is that I prefer to use baseline, as the bandwidth factor is offset by the 3x increased memory and processing requirement for mobile users when using progressive JPG.

Here is a good and very lengthy discussion on the pros and cons of each if you want to form an opinion of your own (read all the comments too):

3. Size considerations and compression choices

Image size influences page rendering speed and bandwidth usage, so the smaller the better as long as image quality is preserved. In practice, 60-70% jpeg quality is a good balance between quality and size.

Image   Dimensions   Quality   Format   Size      After tools
peony   800x429      100%      PNG      466 KB    445 KB
peony   800x429      100%      JPG      256 KB    224 KB
peony   800x429       60%      JPG       65 KB     64 KB
peony   800x429       30%      JPG       30 KB     30 KB
peony   400x215      100%      PNG      133 KB    127 KB
peony   400x215      100%      JPG       69 KB     69 KB
peony   400x215       60%      JPG       22 KB     21 KB

For the 800x429px JPG the difference between 100% and 60% quality is a whopping 256 - 64 = 192 KB saved. In a folder with 15 images that means 2880 KB page load / bandwidth saved. The quality is reasonable however at 60%, as you can see below.

JPEG image at 100% quality - 69KB

media_1373085873800.png
 

3b. JPEG image at 60% quality - 21KB

media_1373085732086.png

4. What about high resolution and retina screens?

Create separate images for highres (retina) screens if needed. Make them 150-200 percent in size with a 30-40 percent quality (and specify width and auto-height in the css to scale them down again). The result is a JPG with good quality and reasonable size (in our example image 30KB for 800x419 at 30%, 21KB for 400x215 at 60%). Try it out yourself to check the quality of the end result.

5. Making images responsive in your design

At present there is no foolproof way of providing responsive images server side without some hacks or compromises. When standards catch up with responsive images things will probably change big time. Click this link for a discussion on this subject.

Some solutions provide the responsiveness by applying classes to the img tag in CSS, which is not very neat. Until there is a standards compliant technique available, I recommend letting the browser engine do this trick for you, at least for now. Even if there are some drawbacks (letting the client do the resizing work) I feel it is preferable to use non-validating hacks.

Simply set max-width and auto height for the img tag in the element involved, like this:

img { max-width: 100%; /* or px or ems or rems instead of percentage */ height: auto; }

6. Free tools for (batch) optimizing images on Windows

media_1373086508754.png

Radical Image Optimization Tool (RIOT for short) lets you visually adjust compression parameters while keeping minimum file size. It uses a side by side (dual view) or single view interface to compare the original with the optimized image in real time with resulting file size. It is lightweight, fast and simple to use, yet powerful for advanced users. You can control compression, number of colors, metadata settings and more, and select image format (JPEG, GIF or PNG) for your output file.

media_1373086702424.png

JPEG Reducer can reduce the size of many JPEG files without loss in quality. It can also detect binary duplicates of jpeg files (files with different file name or metadata which hold the same image) and reveal matching images between two sets of files. It is a front end for the command line utility jpegtran. The JPEG Reducer provides a graphical user interface, batch processing, preview of the optimization process and long-term statistics.

media_1373086863314.png

PNG Gauntlet combines PNGOUT, OptiPNG, and DeflOpt to create the smallest PNGs, reduces file size without loss of image quality. Converts JPG, GIF, TIFF, and BMP files to PNG.

7. Optimizing existing website images in bulk

  • Using an FTP client (FileZilla or other) transfer your website image files to a local copy of your images folders.
  • Use one of the tools discussed above to batch process the images.
  • Once you're happy with the result, re-upload the images to your website.

This can be a great improvement in website loading time and bandwidth usage because of the significantly reduced file sizes.

8. General recommendations and recap

  • Keep the original images somewhere. Subsequent processing of JPG's results in a cumulative loss of quality. Better to go back to the original image and do it again.
  • Create your images according to the maximum width in your template for an element. So if an image cannot exceed 500px width in your template, save it with that width and not higher.
  • Avoid sizing down a big image for intro paragraphs. Create separate images for intro and full text according to your template, and name them ..-intro and ..-full respectively for example. Add a ..-full-hr for highres screens if needed.
  • Feel free to use browser resizing to make you images responsive, provided you use images whose width does not exceed the element in which it is placed anyway. Modern browser engines are quite efficient at this, and the server side pre-processing solutions are far from ideal and possibly beyond most people's possibilities (think shared hosting). Just set a fixed width in percentage and auto-height and you're done.
  • For jpeg, choose baseline or progressive and stick to it across all images.
  • A compression of 60-70 percent for jpeg results in a good balance between quality and size. Use "Save for web" when using Photoshop.
  • Create separate images for highres (retina) screens. Make them 150-200 percent in size with a 30-40 percent compression (and specify width and auto-height in the css to scale them down again). The end result is a JPG with good quality and reasonable size (try it out yourself).
  • Specify images for highres (retina) screens in your css using media queries where possible.
  • Use the tools for batch processing discussed above to losslessly reduce size and to strip out metadata from the image to further reduce size.

Google also has some good information on ways to optimize images.

It also goes without saying that you need to set far future expires headers for your images on your server (in .htaccess if you use Apache).


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.