WebP, AVIF, JPG and PNG: Which image format to use?

JPG, PNG, WebP or AVIF? Anyone preparing images for a website is quickly faced with the question of which file format is the best choice.

There is no one-size-fits-all answer. A photo has different requirements than a logo, a screenshot, or a graphic with a transparent background. The formats differ in terms of compression, transparency, file size, and their typical areas of application, among other things.

In this article, we compare WebP, AVIF, JPG, and PNG and show you which format is suitable for which type of website image.

Briefly explained: For photos, WebP and AVIF are often very efficient options. JPG remains a widely used photo format. PNG is particularly useful where lossless rendering or transparency is needed. However, the specific image content and intended use are always decisive.

Why does the aspect ratio matter at all? #

An image format does not just determine the file extension. It also defines how image information is stored and compressed and which features are available.

Therefore, the same source image can have very different file sizes depending on the format.

Simplified:

same motif
     ↓
JPG  → file size A
PNG  → file size B
WebP → file size C
AVIF → file size D

However, the smallest file is not automatically the best one. Image quality, transparency, browser support, and the specific use case must also be taken into consideration.

An overview of the four image formats #

Format	Typical application	Lossy possible?	Lossless possible?	Transparency
JPG/JPEG	Photos	Yes	No	No
PNG	Graphics, screenshots, transparency	No	Yes	Yes
WebP	Photos and graphics	Yes	Yes	Yes
AVIF	Photos and modern web images	Yes	Yes	Yes

This table serves as a first orientation. Which format actually delivers the best combination of quality and file size depends on the respective image.

What is JPG or JPEG? #

JPEG is one of the best-known formats for digital photos. Files often use the extension .jpg or .jpeg.

JPG and JPEG basically refer to the same image format.

JPEG uses lossy compression. Image information is reduced in the process to decrease the file size.

With a thoughtfully chosen quality level, photos can be significantly compressed without the loss in quality being immediately noticeable during normal viewing.

When is JPG suitable? #

JPG is particularly suitable for photographic subjects with many colors, details, and smooth color gradients.

Typical examples are:

Landscape photos
Product photos
Portraits
Travel photos
Background photos

For such subjects, JPEG was the classic standard format on the web for many years and continues to be widely supported.

What are the disadvantages of JPG? #

JPEG does not support transparency. Therefore, an image area cannot have a transparent background like with PNG or WebP.

Furthermore, heavy compression can cause visible artifacts.

Such compression artifacts can be particularly distracting, especially with text, fine lines, logos, and hard edges.

That is why JPG is not the best choice for every graphic.

What is PNG? #

PNG stands for Portable Network Graphics and uses lossless compression.

This means that the image information is not discarded during compression in the same way as with lossy compressed JPEG.

PNG also supports transparency, including varying levels of transparency via an alpha channel.

When is PNG suitable? #

PNG can be useful for images with sharp edges, certain screenshots, graphics, and content where lossless representation or transparency is required.

A typical example would be a cutout graphic with a transparent background.

Logo / Graphic
████████
██    ██
██    ██
████████

Background:
transparent

This allows the image to be used on different background colors without having a built-in white or otherwise colored background.

Why are PNG files sometimes very large? #

Lossless compression comes at a price. Photographic subjects in particular can require significantly more storage space as a PNG than in a suitable lossy format.

Therefore, a large photo should not automatically be saved as a PNG just because PNG allows for high image quality.

Practical Tip: When a PNG file that is several megabytes in size is actually a normal photo, it is almost always worth checking whether another format is more suitable for this purpose.

Is PNG always the best choice for screenshots? #

Not necessarily.

PNG is very well suited for many screenshots because text and sharp user interfaces can be displayed losslessly.

However, depending on the screenshot, a more modern format like WebP can produce a significantly smaller file while still maintaining very good visible quality.

Therefore, especially when dealing with many screenshots, you should not always use PNG simply based on a general rule.

What is WebP? #

WebP is an image format specially developed for web applications.

It supports both lossy and lossless compression as well as transparency.

This allows WebP to cover various application areas that previously often required different formats.

Photo
  ↓
WebP possible

Graphic
  ↓
WebP possible

Transparency
  ↓
WebP possible

WebP is supported by current popular browsers and is therefore a practical option for modern websites.

What advantages does WebP offer? #

For many images, WebP can achieve a smaller file size compared to older formats with comparable visual quality.

This is particularly interesting for websites because less image data to transfer can improve loading performance.

WebP is also flexible, as it supports both lossy and lossless compression and transparency.

Is WebP always smaller than JPG or PNG? #

No.

WebP can be very efficient, but the result depends on the image content and the selected encoding settings.

A poorly configured WebP can be larger than an already very well optimized JPG file.

This is why you shouldn't judge file formats solely by their name.

Important: „WebP“ does not automatically mean „optimized.“ Even a WebP image can have unnecessarily large dimensions, too high of a quality setting, or an unnecessarily large file size.

What is AVIF? #

AVIF is a modern image format based on AV1 image compression.

The format supports, among other things, lossy and lossless compression as well as transparency.

AVIF can achieve high compression efficiency, especially for photographic content.

With suitable images and settings, this often makes it possible to generate very small files with good visible quality.

What advantages does AVIF offer? #

The most important advantage is the potential high compression efficiency.

With an appropriate photo, an AVIF file can be smaller than a corresponding file in an older format while maintaining comparable visual quality.

This can be particularly interesting for large, image-heavy websites.

What disadvantages can AVIF have? #

A modern format is not automatically the best solution in every workflow.

Encoding and decoding complex image formats can impose different requirements than older formats. The software used, the CMS, plugins, image editing programs, and the desired fallback workflow also play a role.

For certain images, WebP or even a well-optimized JPG can also deliver a very good result.

You should therefore consider AVIF as a powerful option and not as a mandatory format for every image.

WebP or AVIF? #

This question cannot be answered generally with a single winner.

AVIF can achieve very high compression efficiency, especially for photos. WebP is also efficient and very easy to use in many existing website workflows.

For an important image, you can generate both variants and then compare them:

WebP
File size: ?
Image quality: ?

AVIF
File size: ?
Image quality: ?

        ↓

choose the better variant for this use case

A real-world comparison is more meaningful than the blanket statement that a specific format is fundamentally always better.

JPG or WebP? #

For a classic photo, a well-optimized JPG can already be a viable solution.

However, WebP enables more efficient storage for many subjects with comparable visible quality and additionally supports transparency.

If your website system reliably processes and delivers WebP, WebP is therefore an obvious choice for many photographic website images.

An existing well-optimized JPG does not necessarily have to be problematic just because of its file extension.

PNG or WebP? #

This decision is particularly interesting for graphics and screenshots.

When lossless representation and transparency are required, both PNG and WebP can generally be considered.

Compare the resulting file size and carefully check the rendering.

For screenshots with small text or fine UI elements, readability should always be maintained.

What does lossy compression mean? #

With lossy compression, image information is removed or simplified in order to reduce the file size.

That is not fundamentally bad.

If compression is chosen wisely, large amounts of data can be saved without the difference being relevant to a visitor during normal viewing.

If compressed too much, however, visible quality loss can occur.

What does lossless compression mean? #

In lossless compression, the image information is stored in such a way that the original data can fundamentally be reconstructed without the typical losses of lossy compression.

This is helpful, for example, with certain graphics, technical illustrations, or screenshots.

However, lossless does not automatically mean that the file is small.

What does transparency mean? #

An image with transparency has areas through which the underlying background remains visible.

This is helpful, for example, with a cropped logo.

Website Background
████████████████████

Transparent Logo
      CURIAWEB

Result:
Logo without a built-in
rectangular background

PNG, WebP, and AVIF can support transparency. Classic JPEG does not support it.

What format for photos? #

For normal photographs, I would primarily consider WebP and AVIF today.

JPG remains a viable and widely compatible alternative.

What matters is the actual result:

Photo
 ↓
Test WebP
 ↓
Test AVIF
 ↓
Compare JPG optionally
 ↓
Assess file size + quality

For many everyday websites, a cleanly optimized WebP workflow is already a very good solution.

What format for product images? #

Product images often need to show fine details while loading quickly.

Therefore, WebP and AVIF are particularly suitable for photographic product images. A well-optimized JPG can also be used.

You should avoid excessive compression if it causes important product details to be lost.

For an online shop, the goal is not the smallest possible file, but a sensible balance between loading time and sufficiently good product presentation.

What format for logos? #

When a logo is available as a true vector graphic, SVG can often be more suitable than all of the raster formats compared here.

SVG can be scaled without the typical loss of quality of a pixel image.

If, on the other hand, the logo is only available as a raster graphic and requires transparency, formats such as PNG or WebP are options.

Note: SVG is its own vector format and is therefore not directly comparable to JPG, PNG, WebP, and AVIF as raster image formats.

What format for icons? #

SVG can often be a good solution for icons as well, provided the graphic is actually available as a vector and the technical environment allows its use.

For raster icons with transparency, WebP or PNG can be used, for example.

Very small icons should also not be unnecessarily provided in huge pixel dimensions.

What format for screenshots? #

Legibility is especially important for screenshots.

Because of its lossless display, PNG is often very well suited for user interfaces and small texts.

However, WebP can also deliver very good results with a significantly smaller file size.

For a knowledge base screenshot, I would therefore do a practical comparison:

PNG
 ↓
Text sharp?
File size?

WebP
 ↓
Text sharp?
File size?

        ↓

choose the smaller option,
if readability remains equally good

Precisely for this reason, we don't enforce a rigid format for knowledge base screenshots either.

Which format for images with a transparent background? #

When transparency is required, classic JPEG is out of the question.

Suitable candidates include:

PNG
WebP
AVIF
SVG for suitable vector graphics

Which of these makes sense depends in turn on the image type and the technical workflow.

Which format for hero images? #

Large hero images can have a significant impact on the transferred data volume and the perceived loading speed.

That is why WebP and AVIF are particularly interesting for photographic hero images.

Additionally, appropriate pixel dimensions and a reasonable quality level are important.

A hero image is not optimized simply by taking a file from .jpg in .webp transform.

Just changing the file format is not enough #

Assuming a photo has:

6000 × 4000 Pixels

and is merely converted from JPG to WebP.

This can make the file smaller. However, if the image is only needed in much smaller dimensions on the website, an unnecessarily large amount of image information is still provided.

Therefore, a complete image optimization takes several factors into account:

Image dimensions
+
File format
+
Compression
+
Image quality
+
Technical delivery

We explain the entire workflow at Optimizing images for the web: file size, format and SEO.

Simply renaming the file extension does not work #

An image format is not changed simply by renaming the file extension.

From:

foto.jpg

Can't you just by renaming:

foto.webp

do.

The image data must actually be encoded or converted into the new format.

Important: Do not change a file extension manually to fake a different image format. Use an image editing or conversion tool that actually generates the desired format.

What happens during conversion? #

During conversion, the source image is read in and then saved in the new file format using an encoder.

original image
    ↓
decode
    ↓
image data
    ↓
encode with new format
    ↓
new image file

In lossy output, the selected quality or compression level also plays an important role.

Do not needlessly recompress an already heavily compressed JPG #

If a JPEG has already been heavily compressed with loss, a subsequent conversion to WebP or AVIF does not restore the previously lost image information.

Therefore, if possible, you should generate new web versions from a high-quality source file.

high-quality original
       ↓
generate WebP / AVIF / JPG

better than:

heavily compressed JPG
       ↓
convert again with loss
       ↓
further potential quality losses

Consider browser support #

For a web format, the visitor's browser must be able to render the file.

WebP and AVIF are supported by current common browsers. The situation may look different with very old browsers.

Whether you need fallback files for this depends on your target audience, the website system you are using, and the browsers you actually want to support.

Modern websites can offer different image sources and let the browser choose a supported variant.

Provide multiple formats with the picture element #

HTML makes it possible to provide different image sources.

To put it simply, this could look like the following:

<picture>
  <source srcset="bild.avif" type="image/avif">
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Description of the image">
</picture>

A compatible browser can thereby select a supported format.

However, you do not necessarily have to create such a structure manually. Modern CMS, optimization tools, or content delivery systems can partially automate such tasks.

Image format and responsive images are different things #

The image format answers the question, how the image data is stored.

Responsive images, on the other hand, answer the question, among other things, which image size or variant to be loaded for a specific representation.

Both techniques can be combined.

Format:
AVIF / WebP / JPG

+

Dimensions:
small / medium / large

=

matching image variant
for the respective device

Which format is best for SEO? #

There is no image format that automatically generates better rankings based solely on its file extension.

For SEO, it is much more relevant that images are integrated in a technically sensible way and that the website works well overall.

This includes, among other things, appropriate file sizes, suitable dimensions, good loading performance, meaningful alternative texts, and a contextual connection to the page.

Important for SEO: A file does not become „SEO-optimized“ just because it is in WebP or AVIF format.

Image formats and loading time #

A more efficient image format can reduce the amount of data to be transferred.

However, how much this affects the actual loading time depends on the entire page.

For example, a website might already have small images, but be slow due to JavaScript, external services, or other resources.

We explain how to meaningfully measure a website's loading time at Measure website loading time and evaluate it correctly.

Image formats and Core Web Vitals #

Efficient images can be particularly relevant when a large image represents an important visible page content.

However, the file format is just one factor. Loading priority, dimensions, server response, caching, and the rest of the page structure can also play a role.

We explain the corresponding measured values under Core Web Vitals Explained: LCP, INP and CLS.

What does Google PageSpeed Insights say about image formats? #

Performance tools may indicate that images could be encoded more efficiently or delivered in more suitable formats.

Such hints are useful, but should not be viewed in isolation.

If the savings are very small while a conversion causes visible quality issues or unnecessarily complicates the workflow, the measure does not automatically have to be given top priority.

We cover how to classify such notes under How to use Google PageSpeed Insights correctly.

Can I automatically convert all PNG files to WebP? #

Technically, many systems can convert images automatically. Nevertheless, you should not assume that every automatic conversion always delivers a better result.

Check in particular:

Transparency
Image quality
Fine text
Sharp edges
File size
Browser display

For a large image library, a test with different image types is therefore recommended first.

Should I replace all existing JPG images? #

Not necessarily.

If an existing JPG file is already well-dimensioned and efficiently compressed, the practical benefit of subsequent conversion can be minimal.

First, prioritize images that are actually noticeably large or account for a relevant share of the transferred data on important pages.

What format should I use for new images? #

For many modern websites, the following guidance can be useful:

Use case	First choice for testing	Alternative
Photo	WebP or AVIF	JPG
Hero image	WebP or AVIF	JPG
Product photography	WebP or AVIF	JPG
Screenshot	WebP or PNG	depending on the quality comparison
Graphic with transparency	WebP	PNG or AVIF
Logo as vector	SVG	WebP or PNG for raster graphics

This table is not a rigid rule either. The specific result should always be checked.

Our recommendation for knowledge base screenshots #

For UI screenshots, high readability is more important than the smallest possible file size.

A sensible workflow is therefore:

crop relevant area
        ↓
choose reasonable pixel width
        ↓
generate WebP
        ↓
check readability
        ↓
compare with PNG if necessary
        ↓
use smaller suitable variant

If WebP causes visible drawbacks with small fonts or fine UI elements, PNG can be the better choice.

Decision support: Which image format should I choose? #

Is the image a vector graphic?
        │
        ├── YES → Check for SVG
        │
        └── NO
             ↓
        Is it a photo?
             │
             ├── YES → Test WebP / AVIF
             │          ↓
             │        JPG as an alternative
             │
             └── NO
                  ↓
            Is transparency required?
                  │
                  ├── YES → WebP / PNG / AVIF
                  │
                  └── NO
                       ↓
                  Screenshot or graphic?
                       │
                       └── Compare WebP / PNG

Always assess quality and file size together #

Assuming you generate multiple variants from the same photo:

JPG
380 KB

WebP
260 KB

AVIF
190 KB

You should not automatically select AVIF based on these numbers alone.

Open the files and compare the visible quality.

If the AVIF version looks equally good, the smaller file is attractive. On the other hand, if it shows distracting artifacts, the slightly larger WebP version may be the better result.

Basic rule: Don't just compare kilobytes. Always compare kilobytes and visible quality.

Common mistakes when choosing the image format #

automatically save every image as PNG

replace every JPG with WebP without checking

use AVIF solely because of the potential file size

just rename the file extension instead of converting

ignore transparency

compress screenshots so heavily that text becomes blurry

keep huge pixel dimensions despite modern format

confuse format with full image optimization

Practical workflow #

Determine image type
        ↓
Determine intended use
        ↓
Define appropriate dimensions
        ↓
Select suitable formats
        ↓
Generate variants
        ↓
Compare file size
        ↓
Compare image quality
        ↓
Check transparency
        ↓
Use best suited variant
        ↓
Test display on the website

Summary #

WebP, AVIF, JPG, and PNG have different strengths. Therefore, there is no single format that is automatically the best choice for every website image.

JPG continues to be suitable for photographic content and has very broad support. PNG is particularly relevant for lossless graphics, screenshots, and transparency. WebP combines efficient compression with support for transparency, making it suitable for many modern website images. AVIF can achieve very high compression efficiency, especially for photos.

For logos and icons, SVG can also be useful if the source material is available as a vector graphic.

When making the decision, you shouldn't just look at the format. Pixel dimensions, compression, visible quality, and technical integration are at least as important.

The best image format is not automatically the most modern one or the one with the smallest file size – but rather the format that delivers the best combination of quality, file size, and technical suitability for the specific use case.