How to Deliver High Performance Images
July 1, 2015 | Andre NewmanThe 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.
Image CompressionWe'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
|Format||Browser Support (as of June 2015)||Compression||Transparency||Animations|
|WebP||Android, Chrome, Opera||Both||Yes||Yes|
|JPEG XR||Internet Explorer||Both||Yes||Yes|
Image LoadingAfter 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.
Prioritize Critical ImagesHigh-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.
Image OperationsThe 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 WiselyUnlike 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 ProxyAn 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|