3 Ways To Optimize Image Performance With CSS and JS

So, you have this mockup with a huge image. It looks great! But, it's a 500k+ monster when cropped out of the Photoshop comp at a width of 1280px.

How then, are you expected to incoporate this huge image into your code without having the image get painted in line by line like some 90s 56k dialup modem when it's loading on an iPhone with crummy wifi connection?

Here are three techniques you can use to keep the design and performance budget on point with large images.

Technique 1 - Compress It!

Upload your image to a free online compression tool like tinyjpg.com. This site even has an API to tap into, along with a paid Photoshop plugin to help improve your workflow.

Using a tool like this may be all you need to save your performance budget.

For example - I took a 1280px-wide beach image (which I will be using later in this article) I downloaded at freeimages.com from 886k down to 238k, which is an enormous savings.

However, there is still more bandwidth to be saved, especially since many users are using devices with much smaller screens and don't need to be served up a 1280px wide original image just for it to be scrunched down into a smaller space.

Enter picturefill.

Technique 2 - Use picturefill

Picturefill is a javascript polyfill for the picture element and the emerging srcset and size attributes.

This polyfill will assist the browser in making optimal decisions for performance based on factors such as screen size, resolution, and connection speed.

Depending on your needs, there are a number of different markup patterns to use along with the polyfill. Let's take a look at one example.

As you can see in the demo - the smallest version of the image is only 320px wide and just 22k in size. Along with the picturefill script, I am able to use that image up to screen sizes of 400px wide, when it then swaps out for a 745px wide version of the same image which weighs 95k.

And since I am using that version up to 900px wide screens, a majority of mobile and tablet users will have a MUCH faster viewing experience, compared to even the compressed version of the original image (95k compared to 238k).

Technique 3 - Use CSS Filters plus black and white images

Using black and white images can save even more bandwidth. In the beach image example, I simply opened the photo in OSXs Preview, completely turned down the saturation to make it black and white, and the file size dropped from 22k to just 15k for 320px version of the image.

Depending on the color profile of the original image, you may save a little or a lot of bytes when switching to a black and white photo.

Not only will these black and white images be smaller, but thanks to some really cool browser advancements, you can use Instagram-like filters to add some color effects back into the photos for a colorful, yet fast experience.

In this demo, I am using an amazing, tiny CSS library made by Una Kravats called CSSgram.

For less than 1k, there are a whole multitude of filters to choose from.

And if you want to make some tweaks to one of the filters, just adjust the CSS accordingly.

If you are curious as to how CSSgram works, here is a video by Kravets from CSSConf EU 2015.

Imagine being able to try out a bunch of CSS Filters on a black and white photo from right in the browser, right as the imge sits in context of the rest of the site. (Your design team will love you.)

So, next time you face having to work with some gigantic images, use compression, picturefill, and possibly some CSS image filters to maximize both style and performance.

Related article: Image tags vs CSS background images.