This is a short and high-level introduction to 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. optimization 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 and its dimensions were 2,1 MB 4032x3024px General rules So what are some general ideas for using images on the web and keep filesizes small from the beginning? Use for photos, i.e. things that you or someone else took with a camera JPG Use for graphics PNG If your graphic is vector based and rather simple, use . It is a lot smaller than or and you can scale it without quality loss SVG JPG PNG Use fewer images, seriously! Strategies to make JPEGs smaller Decrease pixel size A monitor is (width/height) pixels in average, an iPad is when in landscape mode, an iPhone 6 has 1600x900px 1024x768px 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 on the command line to transform the image: ImageMagick convert office.jpg -resize 50% office-half.jpg Image size drops to 840kB 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. Info: When I open the file in (in my case ) and go to , choose , it will choose quality and reduce my file size to Photoshop CS6 Save for web… JPG high 60% 444kb Probably has some more options and allows you to fine tune Photoshop CC 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 ( )gives me a . Wow! office-half-ps-jpegmini.jpg 362kb If I skip Photoshop and just crush the half-sized image ( ), I still get a massive reduction: office-half-jpegmini.jpg 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 at the for the — we don’t need a width when the image is being shown on an in portrait orientation (which only needs ) right image right time right device 2016px iPhone 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 for this Unveil Let me show you this in an easy example: You need to load a few Javascript libraries at the very end of your . For the beginning, just copy and don’t think too much about it <body> You need to give your images a few more attributes First, for the , 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 src Next, you need to define a . This is the source of your optimized image in the normal size data-src Last, you need to define a a to serve images for retina devices data-src-retina Of course, you could also define more image sizes (as described above), and there are other libraries, such as , which help with that. But for optimizing easily, is perfect Lazyload Unveil 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 . If you want to get informed about new articles, you can sign up to design my newsletter . (Quite honestly: This image has probably been optimized a bit too much :)
