Optimizing website images for speed
Optimizing 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
- Which image format for which usage?
- Which JPG format to use, baseline or progressive?
- Size considerations and compression
- What about high resolution and retina screens?
- Making images responsive in your design
- Free tools for (batch) optimizing images on Windows
- Optimizing existing website images in bulk
- 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).
- 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
3b. JPEG image at 60% quality – 21KB
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 800×419 at 30%, 21KB for 400×215 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
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.
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.
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).
Thanks for the recommendations on image optimization software. Are you aware of a good freeware or reasonably priced Windows app that can resize AND optimize images? I need to find this for my clients, otherwise they are uploading 5MB photos out of their cameras and setting them to display at small dimensions on their site – then wondering why their pages load so slow!
Hi, you can try with picturetray ([url=http://www.picturetray.com]http://www.picturetray.com[/url]), it has options to rotate, scale to half size, quarter size or custom height & width and automatically compresses even when keeping the original height & width, sometimes some images might get “corrupted” though, random lines appearing in the image but most of the time it works great.
Thanks for the tip. Looking at PictureTray it appears it’s no longer supported. The site hasn’t been updated since the end of 2008, and it says it only runs on Windows XP or earlier. I was looking for something that could be counted on into the future. After a long Google search I settled on GIMP. It’s overkilll for my needs, but at least it’s been around forever and is still supported.
Irfanview
The above mentioned RIOT can do this (they call it resample). Look up resize in the help.
Thanks for your post has help . Eout
Thanks for your time today and tomorrow for tour information about caches on a website