T
We're Happier Together! NYC Devshop has joined the HappyFunCorp family! Learn more!

Devshop

Optimizing Images for Performance

Optimizing Images for Performance

Education

Optimizing Images for Performance

Posted by: Tea Ho

Thursday, Jul 24th, 2014

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

JPEG
JPEGs are great for things like photographs, which require a large spectrum of colors. It does not support transparency.

PNG
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.

GIF
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.

You can learn more about sprites here.

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.

There are other optimization tools you can run your images through that will compress your images without damaging their quality. Check out SmushIt and ImageOptim.

Read More
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.

Devshop

About Us

Devshop is a highly motivated group of entrepreneurs, developers, and designers that aim to work with companies that are looking for an edge. Each member of our team brings something unique to the table allowing us to cater our services specifically to meet your needs and exceed your expectations.