Images are the core and heaviest component of the website. In your carrier, in web development, you might have encountered the following report in the Lighthouse test:

As a result, in this article, I will show you an easy and simple way to optimize images for your website and increase its performance.

Optimizing Images

• Step 1: Compress the image
  Compression plays an important role in website optimization. It can significantly reduce file size. The following illustration shows the end result: You can use any online tool to compress the image. I'm using squoosh.app in this case.

• Step 2: Convert image to webp
  WebP is a modern image format that provides superior lossless and lossy compression for images on the web.

  According to Google Developers, WebP lossless images are 26% smaller in size compared to PNGs.

  Again, you can convert images to webp using any online tool. Convertio is what I'm using in this case.

• Step: 3 Image CDN (optional)
  Image content delivery networks (CDNs) excel at image optimization. Switching to an image CDN can result in a 40-80% reduction in image file size.

  Check the following image, Image CDNs URL to indicate Image optimization:

  Image credit: web.dev Some services like:
  • Cloudinary
  • Cloudflare Images

  • Netlify CDN

    They provide Image CDN to optimize images.

So that concludes this article; stay tuned for the next!

Thanks for reading

Follow me on Twitter

Thanks for reading!