Image Optimization Tips for Improved Performance
Media assets, making up over 75% of the average web site’s download size, are vitally important to optimize. If you have video on your site, with the average video coming in at 317kb per asset, videos are the most important file type to optimize. However, most websites don’t have many videos, if any. So, even though video files are usually much larger than image assets, images account for 66% of a web page’s download size on average.
Optimizing images is often the lowest-hanging fruit in terms of web performance. Optimizing for image size, image resolution and image format can lead to huge improvements in performance. The fewer the assets and the smaller their file size, the faster your assets will download and the sooner they’ll get painted to the screen. Your users will enjoy a better user experience both on their device, and, for those with limited bandwidth, in their wallets.
GZip works best for text-based content, while providing little to no byte shrinkage on previously-compressed assets. SVG is a text-based image format. Minifying and GZipping SVG image and font files can greatly reduce their SVG file size. Minify first. Then Gzip.
Remove Image Metadata
Cameras and software often add metadata to images that is not seen by the web user. This metadata can actually be a security risk by exposing geographical data. There’s free software that will strip EXIF metadata from multiple images at a time.
Make sure you serve images scaled for the browser. Requiring the browser to resize images not only leads to downloading unneeded pixels, especially in the case of large images, but resized images take longer to decode and paint.
Serving the smallest image size for the screen size and resolution, as mentioned above, is a good start. This can be done manually or automated via PhotoShop, image-resizer, or a plethora of plugins likely available to you server-side or in your development environment. The images themselves, no matter the size, should be compressed as much as possible without noticeably degrading the quality. You can reduce your image file weights with desktop image compression programs like ImageOptim or ImageAlpha for pngs. This process can also be automated in the cloud with services like Instart Logic’s own SmartVision, which employs machine learning to maximize the optimization based on the content of the image.
Use the Right Image Format
Image types include SVG, GIF, JPEG, PNG, and WebP. If you have a palette of less than 256 colors, like a comic, or if you need animation, GIF may be the right choice. If you need animation, and you need the image to be scalable, SVG might be a better choice (even if you don’t need animation). If you need transparency, a PNG-8 is usually smaller than a GIF, but if you need more than 256 colors, a PNG-24 might be the best option. Unfortunately, PNG-24 can lead to huge file sizes, so consider a JPEG. You can play with the quality settings when saving JPEGs to reduce the file size. If you need a high resolution transparent PNG which can lead to huge file sizes, consider serving a JPEG with a CSS mask: this may add an HTTP request, but can greatly reduce the number of total bytes, and is supported in most mobile browsers. WebP has all the benefits of animation, transparency, and resolution, but is only supported in Blink browsers including Opera and Chrome. For Edge there is JPEG-XR. You can test for WebP or JPEG-XR support, or use an image serving tool, like SmartVision.
Reduce the Number of Images
You can reduce the number of HTTP requests by spriting the plethora of smaller images your site might need. You can also reduce the number of bytes by reducing the actual number of images your page requires: is your image worth 1,000 words or does your site work better without it?
Leveraging CSS to reduce image size and number of images could be a blog post in and of itself. Maybe I’ll write one soon. In the meantime, the list of tips includes:
- Image Masking: use image masking when you need a “transparent JPEG” and don’t want the huge file size that comes with alpha transparent PNGs
- CSS Effects: use CSS properties like gradients, borders, outlines, rounded corners, shadows, etc. to create resolution-independent effects that only require a few lines of minifiable and gZippable text
- Sprites: until HTTP/2 is fully supported the use of image sprites and background-position can be used, to reduce the number of requests
- Animation: when animating GIFs, consider CSS animation using the steps() timing function and sprites as an alternative
- Filters: use CSS filter effects instead of multiple versions of the same image if you want filters applied. This saves bytes, HTTP requests, and time
- Media Queries: Use media queries to serve hi-res images to hi-res devices
By reducing the download size, your site will be available to more people: it will be more accessible to those with metered bandwidth, less memory, and limited networks. Ensure your site is accessible to everyone – including screen reader users and bots – by including the alt attribute on all your foreground images, with an empty alt attribute being appropriate for purely decorative images.