Optimizing Images for Performance
Posted by: Tea Ho
I recently had the opportunity to listen to a talk given by Lara Swanson, engineering manager of performance at Etsy and author of Designing for Performance: Weighing Aesthetics and Speed. Lara's talk was about the importance of designing web applications with performance in mind, and touched on many ways to reduce page bloat, including optimizing HTML and CSS, responsive web design, and different tools one can use to measure and assess a web application's performance.
There's clearly a lot one can do when designing and developing an app to make sure it's accessible to people everywhere but if there's one thing I took away from Lara Swanson's talk, it was that you could significantly reduce your page bloat by optimizing your images.
On average, images take up over 60% of sites' page weight. Today's websites are incredibly image heavy, and designers are using everything from large hero images to background images that take up the entire window. So, here are some ways to optimize your images for performance:
1.Choose your image format carefully
JPEGs are great for things like photographs, which require a large spectrum of colors. It does not support transparency.
PNGs are great if you need less than 256 colors (that is, PNG-8, not PNG-24). It supports transparent backgrounds, and can save at much smaller file sizes than JPEGs or GIFs.
GIFs are great if you want to turn a video of a cat into a series of animated images, but unless you're doing that, you might want to stay away. GIFs are incredibly heavy, and if you're doing simple color change animations or something, you can probably replace it with CSS3.
2. Reduce the amount of image requests
Using sprites can give you more page weight because you're combining images into one larger image, but can help your page speed by reducing the amount of server requests your page makes. Rather than making a new call for each image, you will just need to change your background image position to show off different parts of the sprite.
3. Replace images with CSS3 when you can
Where you once needed to create an image in photoshop or illustrator to handle transparency, gradients, shapes, and animations, now you can recreate those effects via CSS3. People have made everything from ticking clocks to the mona lisa using CSS3-check out some examples on CodePen. So if all you need is a simple button, you can definitely make that in CSS.
4. Compress and optimize your images
Save your files in the smallest size you'll need rather than doing inline styles to shrink them. Experiment with exporting images at different qualities and see how low the quality can be while still maintaining the look you want. 75 is generally a safe resolution for web.
This was like a cliff notes version of one part of Lara's talk, but if you're interested in learning more about designing web applications with performance in mind, you can view her slides and watch her talk here.