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.
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 JPEG 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)
- Loss-less file format, limited to 256 colors, supports transparency and animation.
- Only use this for very small things like flags or icons.
- Otherwise very 1998 ...
- 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 JPEG format to use, baseline or progressive?" and under "3. Size considerations and compression"
- Loss-less 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 loss-less 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.
- Loss-less 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).
2. Which JPEG format to use, baseline or progressive?
Baseline JPEG renders the image directly in the quality used.
Progressive JPEG renders a lowers 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 JPEG format because it is recommended by Google's Page Speed 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 JPEG 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 JPEG.
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):
Progressive JPEG renders a lowers 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 JPEG format because it is recommended by Google's Page Speed 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 JPEG 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 JPEG.
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 KBFor the 800x429px JPEG 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%.
4. What about high resolution and retina screens?
Create
separate images for highers (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
JPEG 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:
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; }
No comments:
Post a Comment