Improving IMAGES following these 4 steps

These actions help me a lot on my daily basis.

They are basically requirements if you want to load the page faster to the end user and get a better SEO score. You can also achieve some of the results by using libs like next image.

Convert images to webp format

WebP provides a better compression for web, you can have the same image quality with a better file size when compared to PNG or JPEG.

To convert you can use:

• cwebp command line

• convertio.co/webp-converter

Compress images

Before importing an image to your website, check if the file size make sense. Compressing your images at least once it will save some KB of every image without losing quality.

To compress you can use:

• tinypng.com

• photoshop

Lazy load

Apply lazy load strategy wherever possible. With that, the browser will give priority of load to images that are being displayed at the moment, and not the ones in the footer for example.

Just set the 'loading="lazy"' attribute to see the difference.

Resize images

Check the dimensions where the image will be used and resize the file accordingly.

This practice will also help reduce the file size.

If possible, use the srcset attribute.