![Search icon](https://hackernoon.imgix.net/search-new.png?w=19&h=19)
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.
2,1 MB
and its dimensions were4032x3024px
So what are some general ideas for using images on the web and keep filesizes small from the beginning?
1600x900px
(width/height) pixels in average, an iPad is 1024x768px
when in landscape mode, an iPhone 6 has 667x375px
2016x1512px
convert office.jpg -resize 50% office-half.jpg
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.
Save for web…
, choose JPG high
, it will choose 60%
quality and reduce my file size to 444kb
office-half-ps-jpegmini.jpg
)gives me a 362kb
. Wow!office-half-jpegmini.jpg
), I still get a massive reduction: 504kb
<img src="office.jpg">
.2016px
width when the image is being shown on an iPhone in portrait orientation (which only needs 375*2 = 750px
)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…
You may want to use animated gifs. How to minimize their size? It is pretty simple if you follow some basic ideas:
Which extra advice do you give for beginners (or advanced) when it comes to optimizing images for the web?
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 :)