How to optimize images for website?

How to optimize images for website?


2 min read

Play this article

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: Lighthouse Report

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: Image Compression Result You can use any online tool to compress the image. I'm using 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 CDN URL

    Image credit:
    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!