DEV Community 👩‍💻👨‍💻

Cover image for How to optimize images for website?
Dhairya Shah
Dhairya Shah

Posted on • Originally published at dhairyashah.dev

How to optimize images for website?

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!

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.