Thread by @michaelketzer

⚡ Every Web Developer should know how to serve scaled images

Serving your images scaled is crucial to ensure your performance is fantastic and your website loads fast for any of your users.

👇 Learn how to create and serve scaled images in seconds

1️⃣ What are scaled images?

A scaled image is an image that is created in different size variants to match the displayed size for your user.

It does allow you to serve drastically smaller images when there is no need for huge images.

👇

For example, having a full-screen image on a desktop device may serve with 1920px, a tablet with 1024px, and a mobile with only 460px.

There is no need to load a 1920px image on a mobile device.

Using scaled images will automatically load the appropriate size for your users.

2️⃣ Which browsers support scaled images?

All modern browsers support scaled images.

IE11 and Opera Mini do not support it, but using it will not affect them at all.
It will simply fall back to the default image.

Users with modern browsers can only benefit from it!

3️⃣ How can you serve scaled images?

Scaled images are served with additional attributes in your image element.
The required new attribute is 'srcset', optional you can use 'media' and 'sizes'.

If a browser does not support 'srcset' it will fall back to your 'src' attribute.

👉 The 'srcset' attribute

The 'srcset' takes multiply images mapped to specific sizes or pixel density.

The browser will take the appropriate size of your 'srcset' and replaces the actual 'src'-Attribute.

The format of the 'srcset' has the following ruleset.

👇

For each image included, you require at least one specification for an image.
You can choose the image width, the pixel density, or both.

The pixel density is the number of pixels per inch.

For example, you want to have a higher pixel density for apple's retina displays.

You may note that the 'srcset'-Attribute uses "w" as a unit. This is the same as the pixel value of your image. It is just the unit used within the 'srcset'.

To define a pixel density, you want to use "[density]x", for example, "2x".

👉 The 'sizes' || 'media' attribute

If you only specify the 'srcset' attribute, the browser will automatically use the appropriate image.

To avoid this, you can specify which sizes should be taken, in which case with these two attributes.

The difference between sizes and media is that you want to use the 'sizes'-Attribute for an image element.
And for a source element of a picture element, you want to use the 'media'-attribute.

You can define CSS media queries in both attributes:

The 'source'-Tag may also allow you to define any scaled image variant in a much cleaner way.

It can skip the growing 'srcset'-Attribute, which can be a pain to read.

4️⃣ What about next-gen image formats?

As you already saw in the prior tweet, you can use the scaled images within a picture element.

This allows you also to define next-gen image variants along with scaled images.

Yes, this can now get huge and messy! 😅

5️⃣ How to create scaled images?

The easiest solution is to check existing modules for your framework, plugins for your CMS or CDN services.

You can also self-host a CDN, as an example, an open-source solution is:
Thumbor: github.com/thumbor/thumbor

6️⃣ Online generators

You can create quickly scaled images online with the following tools:
- Lunapic: www12.lunapic.com/editor/?action…
- Picresize: picresize.com
- ResizeImage: resizeimage.net

These are just examples. There are a lot more you can find on google!

7️⃣ CI Tools

You can also create variants directly in your build chain with small scripts.
Known libraries for these types of cases are:

- sharp: sharp.pixelplumbing.com
- ImageMagick: imagemagick.org/index.php

This is my seventh thread on breaking down some methods to boost the performance of your website.

The next thread will focus on lazy-loading/defer non-critical resources. ⚡

✅ Done

If you found this thread useful, consider following me @michaelketzer and retweet the first tweet! 🙏

Did I miss something? Please let me know 🙏