How to optimise images for your website

Learn how to optimise images for the web using modern techniques like WebP format and lazy loading. Improve your site’s loading speed, boost SEO, and enhance user experience with these simple yet effective strategies.

08 May 2020 4 minutes read 4.4k views

Adding a WordPress Post View Count without a plugin

A short tutorial on how to add a simple post view count to any WordPress blog by yourself. It requires minimum time, and has a great effect on your blog!

19 May 2020 4 minutes read 2.4k views

Optimize web page speed to improve Google Page Insight score

Web page speed is one of the most important things when you are developing a website, it can be quite easy to oversee some things! Never miss them again!

19 Apr 2020 7 minutes read 2.6k views

How to become a web developer – a beginners guide

Lately, many people are deciding to change their professions and become developers. And I understand them. But getting started can be quite daunting! That is why I have decided to write a small guide on how to become a developer.

In the past 5 years, I have noticed that many websites fail at Core Web Vitals. Among other reasons, one of the biggest culprit is the images. Yes, images. But you can’t have a website without images. At least not websites that people will look at. We are not talking about APIs - just plain regular websites. It doesn’t matter if it's e-commerce or a presentation website. If a website fails Core Web Vitals - that will affect its Google score negatively. Which is the thing that we would like to avoid. So how do we fix it?

How do I optimize images for my website?

There are a couple of things that we need to consider. But the most important things are:

Image loading
Image size
Image format
Image compression
Image meta tags
CDN and caching

Image loading

Depending on the device, we need to figure out if the image is above the fold or not (and if it should be visible immediately on screen load - like second slide in slider etc.). If it is not above the fold, we can simply add loading=”lazy” to it. That will tell the browser not to load that image until users scroll to it. Which will improve user experience and improve your website's Core Web Vitals score.

Image size

Most of the websites are made to fit a variety of screens. From mobile devices to large screens. So, do we need to optimize the image for all those screens? Yes and no. We need to create multiple images for different screen sizes. But before we do that, we need to determine all the breakpoints on our website. For each break point we need to create the smallest image possible. Examples would be:

Max screen width 400px image width of 400px
Max screen width 756px image width of 756px
Max screen width 1200px image of width 1200px
Min screen width 1200px image width od 1400px

And now we need to create at least two versions of that image x1 and x2, if you want to go the extra mile x3 and x4 would be awesome. Here is an example of the code:

<picture>
   <source media="(max-width: 480px)" 
         srcset="/images/best-image-xs@4x-webp.webp, /images/best-image-xs@2x-webp.webp 2x">
   <source media="(max-width: 768px)" 
         srcset="/images/best-image-m@1x-webp.webp, /images/best-image-m@2x-webp.webp 2x">
   <source media="(max-width: 992px)" 
         srcset="/images/best-image-l@1x-webp.webp, /images/best-image-l@2x-webp.webp 2x">
   <source media="(max-width: 1200px)" 
         srcset="/images/best-image-xl@1x-webp.webp, /images/best-image-xl@2x-webp.webp 2x">
   <source media="(min-width: 1201px)" 
         srcset="/images/best-image-xxl@1x-webp.webp, /images/best-image-xxl@2x-webp.webp 2x">
   <img src="/images/best-image-xs@1x-webp.webp" 
        alt="Best image alt that describes the image" 
        width="559" height="660">
</picture>

Please keep in mind that this is just an example. As you can see, I’ve used a picture tag with an img tag in it. It is important to add width and height to the image tag - because that helps browsers calculate the proportions of it and, by doing that, you are avoiding Cumulative Layout Shifts - further improving your Core Web Vitals. But a bit more about CLS in another post.

Image format

Modern browsers can load newer forms of images that are more optimized for browsers than older formats like JPG or PNG. We are talking about WEBP format now. You can convert your images to WEBP and that will help immensely when it comes to image load speed on your website!

Image compression

Compressing your images is recommended. But after you convert them to their final format - like WEBP. Small amounts of compression can decrease image size and thus improve user experience and loading speed.

Image meta tags

It is recommended to strip the image of its meta tags when you are using it for the web. That will additionally make the image smaller when it comes to size.

CDN and caching

It is important to server images with proper cache or use CDN for static content delivery. This will improve users experience and help you pass your Core Web Vitals!

And at end, do not forget to add alt to your image tag. That helps your website pass Core Web Vitals when it comes to accessibility!