Comparison between a heavy website image and an optimized version with a smaller file size

ArticleWeb performance

Why is it important to optimize the images on my website?

An image can look perfect and still be much heavier than necessary. Choosing the right format, dimensions and compression helps your website load faster without giving up good visual quality.

Viewed 1 time

Images help present a product, showcase work or communicate a company's personality. But they can also become one of the heaviest parts of a web page. A photograph taken with a current phone or camera may have a much higher resolution than a website actually needs. If it is published directly, the visitor ends up downloading information they will never see.

Why does an image's file size matter?

Every image must be downloaded before it can be displayed. The heavier the files, the more data the page needs to transfer and the longer it may take to appear, especially on a mobile or slow connection. web.dev notes that images are often among the resources that consume the most bandwidth on a website. A large image near the top of a page can also directly affect how long users wait to see the main content. For a business, the problem is simple: a spectacular photograph loses some of its value if visitors have to wait too long to see it.

Do not upload a huge image to display it small

Compression matters, but it is not the only consideration. We should also use reasonable dimensions. If a photograph is 5,000 pixels wide and will never be displayed at more than 1,200 pixels on the website, sending the full version transfers unnecessary data. A well-prepared website can provide different sizes of the same image so the browser downloads the most appropriate one for the screen. This is particularly important on mobile devices: sending a phone the same enormous image prepared for a large monitor makes little sense.

Which formats should you use in 2026?

There is no single perfect format. The choice depends on the type of image.

  • WebP: a very good general option for photographs and other bitmap images. It supports lossy and lossless compression, transparency and is widely supported by modern browsers.
  • AVIF: offers very efficient compression and can produce small files while maintaining good quality. It is especially useful for photographs and large visual images. When older-browser compatibility is required, a WebP or JPEG alternative can be provided.
  • JPEG or JPG: remains compatible almost everywhere and is still valid for photographs, although WebP or AVIF usually produce more efficient files.
  • PNG: remains useful when lossless preservation or certain transparency features are needed. It usually creates unnecessarily large files for photographs.
  • SVG: is particularly suitable for logos, icons and vector illustrations. It can be enlarged or reduced without losing sharpness and is usually much more logical than saving a logo as a photograph.
  • GIF: is no longer usually the best choice for heavy animations. More efficient alternatives include WebP, AVIF, APNG or, depending on the content, video.

Compression is not simply ‘lowering the quality’

Good compression seeks to reduce information that contributes little or nothing to the final perception of the image. Two files can look practically identical on screen and still have very different sizes. That is why the same compression level should not always be applied. A background photograph may tolerate a greater reduction than a product image in which customers need to see small details. The final check should be visual: does the image still look good at the size at which it will actually appear?

The image we show and how we describe it also matter

Optimization is not only about reducing kilobytes. The image should contribute something to the content. Google recommends using images that are relevant to the page, placing them near related text and providing descriptive alternative text where appropriate. That text is also important for people who use screen readers or cannot see the image. A name such as product-linen-shirt.webp is also more understandable than IMG_4837.webp. This decision forms part of reviewing what information your business website should include.

A quick review before publishing

Before uploading an image to your website, ask yourself four questions:

  1. Do I really need this image?
  2. Does it have suitable dimensions for where it will appear?
  3. Am I using the most appropriate format?
  4. Can I reduce its size without a noticeable loss of quality?

This task does not need to become technical. The important thing is to avoid uploading huge files directly and trusting the website to solve the problem by itself. If you need to reduce an image's file size before publishing it, tools such as SWD Image Compressor let you compress it directly in the browser. It is simply a practical way to include this review in the process before uploading images to your site.

Sources (4)
  1. MDN Web Docs — Image file type and format guide
  2. web.dev — Responsive images
  3. web.dev — Browser-level image lazy loading
  4. Google Search Central — Image best practices

A clear next step

If none of the categories fits exactly, use the contact page and describe the context.

Invite me for a coffee ☕

Building applications and web solutions takes many hours of work… and a few stolen from sleep too. If a Sergio Web Developer tool, resource or solution has helped you, help me stay awake while I build new things.Help me stay awake while I build new things.

How many coffees do I need?

How many coffees do I need?

1 coffee3

Each coffee is €3.Per coffee = €3

Secure payment with Stripe. Sergio Web Developer does not store card details.