How to optimize images for website?

How to optimize images for website?

ยท

2 min read

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 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 CDN URL

    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!

ย