How to Deliver High Performance Images
July 1, 2015 | Andre Newman
The web is dominated by images.
As of June 2015, images account for 63% of the average web page’s size. Despite this, many websites tend to poorly optimize their images. Image optimization not only reduces the size and complexity of a web page, but it can vastly improve the way users experience a website.
Guy Podjarny, founder of Snyk, discusses several approaches to image optimization in his talk High Performance Images – Beautiful Shouldn’t Mean Slow. He presents three key areas of focus: image compression, image loading, and image operations.
In this post, we’ll explore these three areas and present some additional ways to speed up your images.
We’ve talked about data compression in previous posts and how it can shrink your scripts by 60% to 85%. With images, compression can make a difference on the order of megabytes.
Choose the Right Format
Image formats use different methods for encoding and compressing images. The most popular format, JPEG, accounts for 46% of the images on the web.
Much of JPEG’s popularity stems from its ability to create high quality files that are small in size. JPEG uses lossy compression, which discards data to achieve smaller sizes at the cost of quality. Formats like PNG and GIF, on the other hand, perform lossless compression, which reduces file size without reducing image quality. In general …
- JPEG is best suited for complex images such as photos
- PNG is best suited for simple or transparent images such as logos
- GIF is best suited for animations and simple, low-resolution images
There are other features to consider, such as support for animations and transparency. New formats such as WebP, JPEG XR, and JPEG 2000, promise even further reductions in file sizes without limiting features.
|Format||Browser Support (as of June 2015)||Compression||Transparency||Animations|
|WebP||Android, Chrome, Opera||Both||Yes||Yes|
|JPEG XR||Internet Explorer||Both||Yes||Yes|
Most image editing tools allow you to adjust the quality level when exporting an image. This is mostly done for convenience, since there’s no single factor that controls the overall quality of an image. Tools such as WebPageTest and PageSpeed Insights can provide more insight into managing the quality of your images.
After optimizing images for delivery, your next focus should be on the browser. Images require memory and processing power, and too many unoptimized images could strain your users’ devices.
Following the trend of responsive web design, your images should be able to adapt to your users. Many websites go the route of using a single large image that’s resized or scaled using CSS. This results in users downloading and rendering content that they can’t even see, placing extra load on their devices.
One solution is to store copies of the image in different sizes, then deliver the most suitable copy based on the browser. The tag contains a srcset attribute that specifies multiple images that the browser can select from. The benefit is that all of the decision making is performed client-side.
Prioritize Critical Images
High-priority images should go in the area of the web page that your users see before scrolling (known as “above the fold”). This leaves the rest of your images below the fold, or outside of the immediately visible area. The problem is that these images will download and render even if the user never sees them.
Load it Later
Lazy loading is a technique for loading images when they’re needed, rather than all at once. Image tags are set with a small placeholder image, which the browser replaces as the image appears on-screen. Lazy loading is an effective solution, but it can negatively impact your website’s ranking in search engines.
The techniques mentioned above are good in theory, but applying them requires a bit more work. Fortunately, there are plenty of tools that help with encoding, managing, and delivering images to users.
Choose Your Tools Wisely
Unlike image decoding, image encoding isn’t a standard. The quality and size of your images depends on the tool you use, giving you flexibility in how you prepare your images. You can use utilities such as:
|for JPEGs||jpegtran or MozJPEG|
|for PNGs||pngcrush or optipng or pngquant|
Use an Image Proxy
An alternative to encoding images in advance is to use an image proxy. Image proxies provide real-time transcoding based on the user’s device, available bandwidth, and other parameters.
|Hosted Solutions||CloudFlare Mirage or Embedly Display or RSZ.IO or Cloudinary|
|Self-Hosted Solutions||OpenRoss or Photon for WordPress|
When there are so many other ways of speeding up your website, it’s easy to overlook images as a source of slowdown. However, implementing just a few of these suggestions can noticeably improve the performance of your website.