Optimize images for the web (for starters)

This is a short and high-level introduction to optimization of images for the web. It is intended for beginners or refreshers and introduces you to strategical as well as practical techniques to use images on your website.

I will use one picture as an example for the whole article
This is the original picture that I took in my office this morning with an iPhone 6s
The original size was 2,1 MB and its dimensions were4032x3024px

General rules

So what are some general ideas for using images on the web and keep filesizes small from the beginning?

Use JPG for photos, i.e. things that you or someone else took with a camera
Use PNG for graphics
If your graphic is vector based and rather simple, use SVG. It is a lot smaller than JPG or PNG and you can scale it without quality loss
Use fewer images, seriously!

Strategies to make JPEGs smaller

Decrease pixel size

A monitor is 1600x900px(width/height) pixels in average, an iPad is 1024x768px when in landscape mode, an iPhone 6 has 667x375px
Retina type screens such as the iPhone and iPad have a higher pixel density, so for best image display, one would need to double the pixels
So even for an optimal display, we can cut the pixel size by half to 2016x1512px
To not influence the quality and make these images comparable, I use ImageMagick on the command line to transform the image: convert office.jpg -resize 50% office-half.jpg
Image size drops to 840kB

Info: From now on, you should test settings on test images and display them on real devices in real size. You will see how much you can tweak the size without loosing too much quality.

When I open the file in Photoshop (in my case CS6) and go to Save for web…, choose JPG high, it will choose 60% quality and reduce my file size to 444kb
Probably Photoshop CC has some more options and allows you to fine tune
It always pays off to use a specialized image compressor. The recommended application is JPEGMini
There is a big comparison of image minimizers that you can reference and see how they affect the image size: Comparison of jpeg optimization tools | ImageOptim-CLI
Dropping in my 60% Photoshop export image (office-half-ps-jpegmini.jpg)gives me a 362kb. Wow!
If I skip Photoshop and just crush the half-sized image (office-half-jpegmini.jpg), I still get a massive reduction: 504kb

Lazy Loading

Up until now we just decreased the file size of one single image and just loaded it the way we used to with <img src="office.jpg">.
Another way to minimize loading times is to use the right image at the right time for the right device — we don’t need a 2016px width when the image is being shown on an iPhone in portrait orientation (which only needs 375*2 = 750px)
This technique of loading an image just when it is needed and just for the required size is called lazy loading
We use a library called Unveil for this

Let me show you this in an easy example:

You need to load a few Javascript libraries at the very end of your <body>. For the beginning, just copy and don’t think too much about it
You need to give your images a few more attributes
First, for the src, you define a very simple and small placeholder image, for example just gray. This should have the size of the final image but be a lot smaller. This gets loaded by default and helps you to keep your layout
Next, you need to define a data-src. This is the source of your optimized image in the normal size
Last, you need to define a a data-src-retina to serve images for retina devices
Of course, you could also define more image sizes (as described above), and there are other libraries, such as Lazyload, which help with that. But for optimizing easily, Unveil is perfect
Please note that you need to prepare all images yourself, so this means that you need at least three times the number of images (normal and retina plus the rightly size placeholders). Start thinking about workflows early on…

Animated Gifs

You may want to use animated gifs. How to minimize their size? It is pretty simple if you follow some basic ideas:

Use fewer frames
Use fewer colors
Often you can save a lot of kilo- or even megabytes by converting the GIF to a movie format (such as mp4)

Your advice?

Which extra advice do you give for beginners (or advanced) when it comes to optimizing images for the web?

Want to learn more?

I will write more introductions to modern web design. If you want to get informed about new articles, you can sign up to my newsletter.

(Quite honestly: This image has probably been optimized a bit too much :)