Optimize images for the web (for starters)

439 reads

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 were 4032x3024px

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

(width/height) pixels in average, an iPad is when in landscape mode, an iPhone 6 has 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

, choose , it will choose quality and reduce my file size to 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!

)gives me a . 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 )

width when the image is being shown on an iPhone in portrait orientation (which only needs ) 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

. 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

, 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

. 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

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 :)

Tags