🖼️ Why do your images weigh a ton and how to fix it?

Have you ever visited a website that took forever to load? Most likely, unoptimized images were to blame. I’ve often seen projects where images of two or even three megabytes were uploaded, even though they were used as small icons or thumbnails. This is one of the most common and critical mistakes in web development.

“Page weight isn’t just numbers. It’s your users’ time, money, and patience.”

🤔 What’s the problem with heavy images?

It might seem like a couple of megabytes for an image isn’t a big deal. After all, modern internet is fast. But this is a dangerous misconception. Here’s what heavy images lead to:

Slow website loading. This is the first thing a user notices. If a site takes longer than 3-5 seconds to load, most visitors will simply close the tab and go to a competitor.
Increased traffic consumption. Not everyone has unlimited and fast internet. Mobile users will thank you for saving their megabytes.
Worsening SEO performance. Search engines like Google and Yandex directly consider site speed in their ranking algorithms. A slow site = low positions in search results.
Poor user experience (UX). Nobody likes to wait. A slow interface is irritating and creates a negative impression of your product or company.

🛠️ How to properly optimize images: a step-by-step guide

Optimization isn’t difficult if you approach it systematically. Here are the main steps every developer should follow.

1. Choose the right format

Not all formats are created equal. Each has its own purpose:

JPEG (JPG): Ideal for photos and realistic images with a large number of colors. Provides good compression with minimal quality loss.
PNG: Use when you need transparency. Great for logos, icons, and graphics with sharp edges. But be careful: for photos, it often weighs more than JPEG.
SVG: Vector format. Ideal for logos, icons, and simple graphics. It scales without quality loss and often has a minimal size. If an icon can be made in SVG, do it in SVG.
WebP: A modern format from Google that provides excellent lossy and lossless compression. It supports transparency and animation, and on average weighs 25-35% less than JPEG and PNG. It is currently supported by all modern browsers.
AVIF: The most modern format, offering even better compression than WebP. Browser support is growing, and it’s definitely worth considering for new projects.

2. Compress images (without going overboard)

Before uploading to the site, every image needs to be compressed. This can be done with:

Online services: TinyPNG, Squoosh, iLoveIMG. They allow you to quickly reduce the image weight with almost no loss in quality.
Graphics editors: Photoshop, Figma, GIMP have built-in tools for saving images for the web (Save for Web).
Command-line tools: ImageOptim, MozJPEG. For automating the process in a project.

Real-life example: I recently consulted for an online store whose homepage weighed 12 MB. It turned out that the background banner was uploaded in 4K resolution and weighed 8 MB. After compressing and resizing it to a more reasonable 1920px width, it weighed 350 KB. The page load speed increased 4-fold.

3. How much should an image weigh: numerical benchmarks

Of course, it all depends on the context, but here are a few practical benchmarks to aim for:

Full-screen main banner: 200–400 KB. This is the maximum for the largest and most important image on the page.
Image in article content: 50–150 KB. If the picture is not a central element, try to keep its weight as low as possible.
Product or article preview: ideally up to 30–50 KB. There are usually many of these images on a page, and their total weight is critical.
Icons (especially in PNG/JPEG format): up to 10 KB. For vector icons in SVG, this figure can be even lower.

These numbers are not a strict rule, but a goal to strive for.

4. Use responsive images

It makes no sense to load a 2000px wide image on a mobile device if the screen is only 360px wide. Use the <picture> tag and the srcset attribute for the <img> tag so that the browser can choose the appropriate image size depending on the screen resolution.

<img srcset="/images/image-small.jpg 480w,
             /images/image-medium.jpg 800w,
             /images/image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
     src="/images/image-large.jpg"
     alt="Image description">

5. Implement “lazy” loading

Why load all the images at once if the user can’t see them yet? Lazy Loading is a technique where images are loaded only when they enter the user’s viewport (for example, when scrolling the page).

This has become a web standard. Just add the loading="lazy" attribute to the <img> tag.

<img src="image.jpg" alt="..." loading="lazy">

🏁 Conclusion

Image optimization is not a one-time action, but a continuous process and part of the development culture. It’s low-hanging fruit that provides a huge boost in performance, SEO, and user loyalty.

Always choose the right format.
Always compress images before uploading.
Always use responsive approaches and srcset.
Always enable loading="lazy" for images below the fold.

✅ Start monitoring the weight of your images today, and your site will become faster, higher, and stronger in the eyes of users and search engines.