How to Optimize Images for a Faster Website

If your website feels slow, don't start by removing every animation. 😄
Images are often a much bigger performance problem than people expect. A single unoptimized image can add several megabytes to a page, especially when the original file is uploaded directly from a camera or design tool.
For example, if your image is 4.8 MB, the browser may need to download almost 4.8 MB just to display that one image.
That can be a serious problem for mobile users and slower connections. 📱
The good news is that image optimization is usually straightforward.

---

Use Modern Image Formats​

Instead of relying only on JPEG or PNG, consider modern formats such as:

• WebP - widely supported and usually much smaller than JPEG or PNG.
• AVIF - can provide even smaller files while maintaining good visual quality.

For example:

<img
src="/images/project.webp"
alt="Project"
loading="lazy"
width="800"
height="500"

Using a modern format can significantly reduce the amount of data the browser needs to download.

---

Compress Images Before Uploading​

Changing the image format is only part of the solution.
You should also compress your images before uploading them to your website.
For example, if an original image is 4.8 MB, you may be able to reduce it to a few hundred kilobytes without a noticeable loss of quality.
The exact size depends on the image, dimensions, format, and compression settings.
💡 A good rule is to avoid uploading a large original image when the website only needs a much smaller version.

---

Use Lazy Loading for Images Below the Fold​

The loading="lazy" attribute tells the browser that an image can be loaded when it gets closer to the user's viewport.
For example:

<img
src="/images/project.webp"
alt="Project screenshot"
loading="lazy"
width="800"
height="500"

This can reduce the amount of content the browser needs to load immediately.
However, there is an important detail:
Lazy loading does not make the image file smaller.
It only changes when the browser loads the image.
So if your image is 4.8 MB, adding loading="lazy" does not turn it into a 500 KB image.
You still need to compress and optimize the image itself.
⚠️ Also, don't blindly lazy-load every image. Images that are immediately visible when the page loads, especially important hero or LCP images, may need to load normally so they can appear as quickly as possible.

---

Set Image Dimensions​

Adding width and height gives the browser the image's dimensions before the image finishes loading.
For example:

<img
src="/images/project.webp"
alt="Project"
width="800"
height="500"

This helps the browser reserve the required space for the image and can reduce unexpected layout movement while the page is loading.
It is especially useful for improving the overall visual stability of a page.

---

Use Responsive Images When Needed​

You don't always need to send the same large image to every device.
For example, a desktop screen may need a larger image while a mobile screen may only need a smaller version.
HTML provides srcset and sizes for this purpose:

<img
src="/images/project-800.webp"
srcset="
/images/project-400.webp 400w,
/images/project-800.webp 800w,
/images/project-1200.webp 1200w
"
sizes="(max-width: 600px) 400px, 800px"
alt="Project screenshot"
width="800"
height="500"

The browser can then choose an appropriate image resource based on the available display size and device conditions.
📱 This is particularly useful for websites with large screenshots, product images, blog images, or other visual content.

---

Image Optimization Checklist​

Before uploading an image to your website, check the following:

• 🗜️ Compress the image.
• 🖼️ Use WebP or AVIF when appropriate.
• 📐 Resize the image to a reasonable display size.
• 📱 Use responsive images for different screen sizes when needed.
• 💤 Use loading="lazy" for suitable below-the-fold images.
• 📏 Define width and height.
• 🚀 Avoid sending unnecessarily large images to mobile users.
• 🔍 Keep image quality high enough for the actual purpose.

---

What Actually Makes the Biggest Difference?​

There isn't one attribute that magically makes images fast.
Think of image optimization as several separate improvements:

Optimization	What it does
Compression	Reduces the file size
WebP / AVIF	Uses more efficient image formats
Resizing	Prevents unnecessarily large images
Lazy loading	Delays loading images that aren't immediately needed
width / height	Helps reserve the correct layout space
srcset / sizes	Helps deliver an appropriate image resource

The biggest mistake is confusing these techniques.
For example, loading="lazy" improves when an image loads, but it does not reduce the image's file size.
Likewise, converting an image to WebP can reduce its size, but sending a 3000×2000 image to a small mobile screen may still waste bandwidth.

---

The Simple Approach​

If you want a practical starting point, use this workflow:

1. 🖼️ Resize the image to the largest size you actually need.
2. 🗜️ Compress it.
3. ⚡ Convert it to WebP or AVIF when appropriate.
4. 📱 Use responsive images when different screen sizes need different image sizes.
5. 💤 Lazy-load images that are below the fold.
6. 📏 Add width and height.
7. 🔍 Test the page again with your performance tools.

You don't always need to spend hours changing JavaScript, CSS, or animations to improve page speed.
Sometimes, the biggest performance win is much simpler:
Make the images smaller before the browser has to download them. 🚀

---

Frequently Asked Questions​

------------------

Does WebP make a website faster?​

WebP can reduce image file sizes compared with many JPEG and PNG images, which can reduce the amount of data the browser needs to download. The actual savings depend on the image and compression settings.

Does lazy loading reduce image size?​

No. loading="lazy" controls when the browser loads the image. It does not compress or reduce the image's file size.

Should every image use lazy loading?​

No. Images that are immediately visible when the page loads may need to load normally. Lazy loading is mainly useful for images that are outside the initial viewport.

Is AVIF better than WebP?​

Neither format is automatically better for every image. AVIF can provide excellent compression, while WebP has broad support and is often a practical choice. Test your actual images and balance file size, quality, and browser support.

Why should images have width and height?​

Defining image dimensions lets the browser reserve space for the image before it finishes loading. This can help reduce layout shifts and improve visual stability.