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 MBand 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 is1024x768pxwhen in landscape mode, an iPhone 6 has667x375px - 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…, chooseJPG high, it will choose60%quality and reduce my file size to444kb - 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 a362kb. 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
2016pxwidth when the image is being shown on an iPhone in portrait orientation (which only needs375*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-retinato 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 :)