How to Optimize Images for the Web: Formats, Sizes, and Loading

Images are an important part of modern websites, but they can also become a major source of slow page loading.

A large image may look great on a desktop screen but create unnecessary download time on a mobile connection. Using the wrong image format, uploading oversized files, or skipping responsive image techniques can affect website performance.

The good news is that image optimization does not require complicated techniques. A few practical improvements to image formats, dimensions, compression, and HTML loading behavior can make a noticeable difference.

In this guide, we'll explore how to optimize images for websites using modern formats and standard HTML techniques.

1. Choose the Right Image Format

The first step in image optimization is selecting an appropriate file format.

Different image formats serve different purposes.

WebP

WebP is a modern image format that supports both lossy and lossless compression. It also supports transparency and animation.

It is a practical choice for many website images because it can reduce file sizes while maintaining good visual quality.

AVIF

AVIF is another modern format that can provide highly efficient compression.

It supports features such as transparency, high color depth, and animation. However, providing a fallback format can still be useful when supporting different browsers and environments.

JPEG and PNG

JPEG remains useful for photographs and images where lossy compression is acceptable.

PNG is better suited to screenshots, diagrams, logos, and graphics where sharp edges, transparency, or exact reproduction matter.

The correct format depends on the image itself, not simply on which format is newest.

Reference: MDN Image File Type and Format Guide.

2. Resize Images Before Uploading

One common mistake is uploading images that are much larger than their actual display dimensions.

For example, imagine a website displays a product image at 400 pixels wide, but the uploaded image is 3000 pixels wide.

The browser may download significantly more image data than the displayed area requires.

A better approach is to prepare images close to their intended display size and provide multiple versions when necessary.

Consider these examples:

• Small thumbnail: 300 × 200 pixels
• Blog image: 800 × 600 pixels
• Large desktop image: 1600 × 1000 pixels

These are illustrative dimensions, not universal requirements. Choose dimensions based on the actual layout and screen sizes.

3. Use Responsive Images in HTML

Responsive images allow browsers to select an appropriate image based on the available layout space and device requirements.

The srcset and sizes attributes help browsers choose between different image versions.

Example:

<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, 800px"
  alt="A workspace with a laptop and notebook"
  width="800"
  height="500"
>

Here is what the attributes do:

• src: Provides a fallback image.
• srcset: Lists available image versions.
• sizes: Describes the expected display width.
• alt: Provides a text alternative.
• width and height: Help the browser reserve the correct layout space.

The browser can select a suitable image instead of always downloading the largest available version.

Reference: web.dev Responsive Images.

4. Use Modern Formats With Fallbacks

You can use the HTML picture element to offer multiple image formats.

<picture>
  <source
    srcset="product.avif"
    type="image/avif"
  >

  <source
    srcset="product.webp"
    type="image/webp"
  >

  <img
    src="product.jpg"
    alt="Product displayed on a desk"
    width="800"
    height="600"
  >
</picture>

The browser selects a supported source and falls back to the standard image element when needed.

This approach lets developers use modern image formats while maintaining a fallback.

5. Compress Images Without Losing Too Much Quality

Image compression reduces file size, which can help reduce the amount of data a browser downloads.

There are two common compression approaches.

Lossy compression

Lossy compression removes some image information to produce smaller files.

It is often suitable for photographs and other continuous-tone images.

Lossless compression

Lossless compression preserves the original image information.

It is useful for diagrams, screenshots, and graphics where visual accuracy matters.

A useful optimization workflow is:

1. Remove unnecessary image dimensions.
2. Select an appropriate output format.
3. Apply suitable compression.
4. Compare the original and compressed images.
5. Check whether text, edges, and important details remain clear.

Do not select the highest compression setting automatically. The goal is a reasonable balance between image quality and file size.

6. Implement Lazy Loading Correctly

Lazy loading delays the loading of images until they are closer to entering the visible area.

This can reduce unnecessary downloads, especially on pages containing many images.

For example:

<img
  src="related-article.jpg"
  alt="Related article illustration"
  width="600"
  height="400"
  loading="lazy"
>

The loading="lazy" attribute is useful for images lower down the page.

However, avoid applying lazy loading indiscriminately to important images that appear immediately when a page opens.

For example, the main hero image may be an important part of the initial page rendering and should generally be loaded eagerly.

Reference: MDN Image Element.

7. Always Provide Meaningful Alt Text

Alt text describes the information conveyed by an image.

It helps screen-reader users understand image content and provides a fallback when an image cannot load.

Good example:

<img
  src="web-development-team.jpg"
  alt="Developers working together on a web application"
>

Poor example:

<img
  src="web-development-team.jpg"
  alt="image123"
>

Keep descriptions relevant and natural. Do not fill alt attributes with unrelated search keywords.

Decorative images that do not communicate useful information can use an empty alt attribute:

<img src="decorative-shape.svg" alt="">

8. Define Image Width and Height

Images without defined dimensions can cause unexpected layout shifts while the browser loads them.

For example:

<img
  src="website-banner.webp"
  alt="Website banner"
  width="1200"
  height="600"
>

Providing the image's intrinsic dimensions helps the browser reserve space before the image is downloaded.

This contributes to a more stable page layout and can help improve Cumulative Layout Shift (CLS).

9. Create an Image Optimization Checklist

Before publishing a website page, check the following:

• Choose the appropriate image format.
• Resize images according to their display dimensions.
• Compress large image files.
• Use WebP or AVIF where appropriate.
• Provide fallbacks when necessary.
• Implement responsive images for different screen sizes.
• Add meaningful alt text.
• Define image width and height.
• Lazy-load suitable below-the-fold images.
• Avoid lazy-loading important above-the-fold images.
• Test the page on desktop and mobile devices.

Frequently Asked Questions

Which image format is best for websites?

WebP and AVIF are efficient options for many modern websites. JPEG and PNG remain useful for specific image types and compatibility requirements.

Does image compression improve website performance?

It can. Smaller image files generally require less data to download, which can help improve loading performance.

Is WebP better than JPEG?

WebP can provide smaller files at similar visual quality in many cases. However, the best choice depends on the image content and required compatibility.

Should every image use lazy loading?

No. Lazy loading is generally useful for below-the-fold images. Important images near the top of the page should usually load eagerly.

Why are width and height important for images?

They help browsers reserve the correct amount of space, reducing unexpected layout shifts during loading.

Conclusion

Image optimization is not just about reducing file sizes. It involves choosing appropriate formats, preparing correctly sized images, using responsive HTML, and loading images at the right time.

For developers, these techniques provide a practical foundation for building faster, more accessible, and more reliable websites.

Start with the largest images on your pages, measure the results, and improve the rest of the image library gradually.

AI disclosure: This article was prepared with AI assistance. The author should review the technical examples and verify the information before publication.