⚡ 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
⚡ Every Web Developer should know how to create next-gen image formats
Serving your images in next-gen formats is crucial to ensure your performance is fantastic and loads fast for any of your users.
👇 Learn how to create images in the next-gen format in seconds
1️⃣ What are next-gen formats?
Next-gen formats are image formats such as
- WebP
- AVIF
- JPEG 2000
- JPEG XR
We will focus on WebP as this has the best support across all browsers and is most used!
2️⃣ What is WebP?
WebP is a next-gen image format published by google in 2010. It creates lossless images that are 26% smaller than PNG's and lossy images 25-34% smaller.
In reality, I have seen over 40% smaller sizes already.
⚡ As a Web Developer, you should always minify your CSS/JS!
Minifying your code is crucial to ensure your website is fast and good performing for modern SEO!
👇 Learn how to minify your CSS/JS in seconds!
1️⃣ Why you should minify CSS/JS
Minifying your CSS/JS reduces its size, no unnecessary white spaces, and no comments are loaded.
Those changes can drastically decrease the payload size of your request.
For JS, it even can strip down function and variable names!
2️⃣ How much does minify save you?
In our example below, we have a simple portfolio page.
The default CSS was not minified and had a size of 2.1 kb.
The minified outcome is 1.1kb, which is nearly 50% savings.
⚡ Every Web Developer should know what Critical CSS is and how to use it
Using critical CSS and defer non-critical CSS can boost your website's performance which is becoming more important!
👇 Learn how to extract critical CSS and defer non-critical CSS
▶️ What exactly is critical CSS?
Critical CSS is any CSS that is relevant for elements being displayed above the fold. Above the fold are all elements that are rendered within a user's viewport when visiting your website. Anything else is non-critical!
▶️ How can you extract your critical CSS?
One of the easiest methods to get quickly started is by using an online tool.
There are plenty out there.
For our example, we will use sitelocity.com/critical-path-….
Just enter your domain, and generate your critical CSS in a second.