The question “Which image format is best for a website?” sounds simple, but there is no universal answer. A product photograph, a transparent logo, an interface screenshot, and a full-width banner contain different pixel patterns and have different quality requirements. A format that compresses a landscape beautifully may produce halos around small text. A lossless file can preserve every pixel while being several times larger than necessary for an ordinary photograph.
For most modern websites, the practical solution is not to choose one format forever but to establish rules: AVIF or WebP for optimized delivery, JPEG or PNG as a compatible source or fallback, SVG for vector artwork, and several dimensions for every important image. This guide compares WebP, JPEG, PNG, and AVIF, including their strengths, limitations, and effect on performance.
Begin with the type of image
A file extension is only one variable. Before conversion, identify what the image contains and how it will be displayed. Photographs contain thousands of colors, smooth gradients, and natural noise. Interface screenshots have flat areas, sharp boundaries, and text. Logos frequently require transparency and perfectly clean edges.
Raster or vector
WebP, JPEG, PNG, and AVIF are raster formats: they store a grid of pixels. Enlarging a small file reduces sharpness. SVG is usually better for logos, icons, and simple diagrams because vector artwork scales without losing quality. Raster is appropriate for photography, complex textures, paintings, and scenes that cannot be represented efficiently with geometric shapes.
Lossy and lossless compression
Lossy algorithms discard information that a viewer is unlikely to notice. JPEG, lossy WebP, and lossy AVIF work this way. Stronger compression produces a smaller file but increases the risk of blocking, blur, banding, and color changes. Lossless compression reconstructs the original pixel values and is supported by PNG, lossless WebP, and lossless AVIF.
Lossless does not automatically mean better
For a photograph, the difference between a high-quality lossy version and a lossless version is often invisible at normal viewing size, while the size difference is substantial. Lossless delivery is justified when every pixel matters: technical graphics, screenshots with text, intermediate masters, or files intended for further editing.
JPEG as a predictable photographic baseline
JPEG has been the standard web photography format for decades. It is supported almost everywhere, encodes and decodes quickly, and is available in every editor and CMS. For photographs without transparency, a properly optimized JPEG can still be sensible, particularly as a fallback.
Where JPEG works well
- photographs of people, interiors, landscapes, and products;
- large images containing natural gradients;
- email and external systems with unknown modern-format support;
- a fallback inside a
<picture>element.
A progressive JPEG can show a coarse preview before the full download completes. It does not automatically reduce transferred bytes, but it may improve perceived loading.
JPEG limitations
JPEG has no alpha channel and cannot provide a transparent background. Lossy compression creates visible artifacts around logos, text, thin lines, and hard contrasting edges. Repeatedly saving an already compressed JPEG damages it again, so retain a lossless working master.
Avoid repeated lossy conversion
If only a finished JPEG is available, do not compress it aggressively before converting it to WebP or AVIF. Each lossy stage accumulates defects. Generate web variants from RAW, TIFF, PNG, or the highest-quality available source.
PNG for transparency and precise detail
PNG uses lossless compression and supports an alpha channel. It preserves flat colors, small text, lines, and transparent edges well. This is why PNG is common for screenshots, diagrams, raster logos, and interface assets.
When PNG is justified
PNG is appropriate when an image has few colors, transparency, or pixel details that must not change. It can be a dependable master for a tutorial screenshot. For browser delivery, however, lossless WebP can often produce a smaller file with the same visible pixels.
Why photographs rarely belong in PNG
Lossless encoding of a complex photograph containing millions of shades creates a large file. Without a transparency requirement, JPEG, WebP, or AVIF will offer a much better balance. An archival source can remain PNG, but visitors should not receive it directly.
PNG-8 and PNG-24
Palette-based PNG-8 can be efficient for simple graphics with a limited number of colors. PNG-24 preserves full-color images but weighs more. A modern optimization pipeline can select a palette, remove unnecessary metadata, and optimize file structure without changing the visible pixels.
WebP as a versatile website format
WebP supports lossy and lossless compression, transparency, and animation. According to Google's official WebP documentation, its tests found lossy files 25–34% smaller than comparable JPEG files at an equivalent quality metric, while lossless WebP was 26% smaller than PNG. Actual results depend on the asset and encoder settings, so these percentages are not guarantees for every file.
WebP strengths
WebP works for photography and transparent raster graphics. It has broad modern-browser support, decodes efficiently, and is integrated into popular CMS platforms, CDNs, and image libraries. This makes it a safe baseline for a new corporate website.
Where WebP may not win
AVIF can compress some photographs more effectively. PNG may be simpler for exchanging master artwork or using specialist software. Old browsers, email clients, and embedded platforms may still require JPEG or PNG. Automated conversion is not always beneficial either: a small palette PNG may already be optimal.
WebP still requires quality control
Quality values are not universal between encoders. A value of 80 in JPEG and 80 in WebP does not represent identical visual quality. Inspect faces, hair, small lettering, red edges, shadows, and smooth gradients on typical screens.
AVIF for maximum compression efficiency
AVIF is based on the AV1 video codec and supports lossy and lossless compression, transparency, HDR, wide color gamut, and multiple images in one container. In many photographic use cases, it produces a smaller file than JPEG or WebP at similar perceptual quality. Its capabilities are described in the web.dev guide to AVIF.
Where AVIF provides the greatest value
Test AVIF for large hero images, product catalogs, editorial photography, and media-heavy pages. Saving a few kilobytes on one thumbnail may not matter; reducing dozens of full-sized photographs can make a meaningful difference to mobile visitors.
AVIF trade-offs
AVIF encoding is more complex and usually slower than JPEG or WebP. This matters when a website creates many variants immediately after upload. Aggressive settings may erase fine texture or produce unnatural smoothness. Modern browser support is broad, yet fallbacks remain appropriate where older clients matter.
Do not apply AVIF blindly
Container overhead and encoding characteristics may offer little advantage for tiny icons, line art, and text-heavy images. Compare AVIF, WebP, and PNG across real content categories rather than one attractive test photograph.
A compact format comparison
| Format | Compression | Transparency | Best use | Main limitation |
|---|---|---|---|---|
| JPEG | Lossy | No | Photos, fallbacks, external channels | Artifacts around text and edges |
| PNG | Lossless | Yes | Screenshots, graphics, transparent assets | Large photographic files |
| WebP | Lossy and lossless | Yes | General web delivery | Not always the smallest option |
| AVIF | Lossy and lossless | Yes | Large photos, catalogs, heroes | Slower encoding |
Deliver modern formats with picture
The <picture> element lets a browser choose between formats. It selects the first supported source, while the nested <img> provides the fallback and retains alt text, dimensions, and loading behaviour.
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" width="1280" height="720"
alt="Image description">
</picture>Order matters: put the preferred efficient format first and the fallback last. A server must not serve JPEG bytes under an AVIF name; correct MIME types and actual content are essential.
When one WebP is enough
If the audience uses modern browsers and the site is not embedded in legacy WebViews or email templates, a single WebP may be pragmatic. Fewer variants simplify caching, storage, and content operations. Base the decision on analytics from actual devices.
Art direction and format solve different problems
<picture> can also serve different crops for mobile and desktop. This is art direction. Format controls encoding; a media condition controls composition. Do not simply squeeze a wide desktop banner into a narrow mobile column when the subject becomes unreadable.
Dimensions matter as much as format
A 4000-pixel image remains excessive in AVIF when displayed in a 600-pixel container. Correct geometry often creates the largest saving, followed by format and quality settings.
Use srcset and sizes
srcset lists available widths, and sizes tells the browser the approximate layout width. The browser considers viewport size and pixel density before downloading an appropriate candidate.
<img
src="photo-960.webp"
srcset="photo-480.webp 480w,
photo-960.webp 960w,
photo-1600.webp 1600w"
sizes="(max-width: 700px) 100vw, 50vw"
width="960" height="640" alt="...">Always provide width and height
Dimensions allow the browser to reserve the correct aspect ratio before the file arrives, reducing layout shifts. CSS can still make the image responsive through max-width:100% and height:auto.
High-density displays do not require unlimited pixels
A larger version helps detailed photography on Retina screens, but the difference between 2x and 3x may be invisible at a normal viewing distance. Test visually and avoid enormous variants without a clear need.
Impact on Core Web Vitals
A large image above the fold often becomes the Largest Contentful Paint element. A smaller file can reduce download time, but LCP also depends on resource discovery, priority, server response, and rendering.
Do not lazy-load the hero
The primary above-the-fold image should be discovered early. It normally should not use loading="lazy"; fetchpriority="high" may be appropriate. Galleries and article images below the viewport can use lazy loading.
Avoid hiding an important hero only in CSS
A CSS background is discovered later than an ordinary <img> in HTML. When the hero carries meaning and may become LCP, a semantic img or picture is easier to optimize. A purely decorative background can remain in CSS.
Use preload selectively
Preloading can help a critical asset, but too many preloads compete with CSS, fonts, and other essential files. Do not prioritize an entire gallery.
Evaluate quality visually and with metrics
The smallest file is not necessarily the best. If a product looks artificial, a gradient bands, or screenshot text becomes blurry, compression damages the business goal. Compare candidates at identical display sizes on mobile and desktop screens.
Where artifacts hide
- hair, grass, fabric, and repeating fine textures;
- red elements against a contrasting background;
- shadows and smooth sky gradients;
- thin lines, icons, and text;
- semi-transparent edges and object shadows.
Do not compare matching quality numbers
Find similar perceived quality in each format and then compare size. SSIM, PSNR, and modern perceptual metrics assist large pipelines, but important marketing images still deserve visual review.
Image SEO and accessibility
A format does not create rankings by itself, but a faster, more stable page improves the experience. Search systems also need accessible URLs, context, and useful alt text.
Write meaningful alt text
Alternative text describes the image's content or function for someone who cannot see it. Do not add keyword lists. Decorative images can use an empty alt="", while information shown in a diagram should also be available in HTML.
Keep image URLs stable
A CDN or CMS can generate variants dynamically, but URLs should remain cacheable and predictable. Do not change them on every request. After replacing an important image, update the sitemap and ensure old references do not return errors.
If heavy assets are already harming speed and discovery, a website SEO audit can identify LCP elements, oversized files, missing lazy loading, and other technical causes.
Automate optimization in the CMS
Manual optimization works for ten files, not a catalog containing thousands of products. A dependable system retains one high-quality source and creates the required formats, widths, and crops on upload or first request.
What the pipeline should do
- validate file type, dimensions, and upload safety;
- correct orientation using EXIF;
- store the master separately from public derivatives;
- generate AVIF, WebP, and fallback versions according to rules;
- create multiple widths without enlarging a small source;
- remove unnecessary metadata while retaining required color profiles;
- store width, height, and alt data in the content model;
- cache results through a CDN and invalidate by file version.
Eager or on-demand generation
Pre-generating derivatives provides predictable delivery but consumes storage and processing time for variants that may never be used. On-demand processing saves space but makes the first request slower and must prevent arbitrary-size abuse. A hybrid is common: core widths are generated immediately and rare variants come from an image CDN.
Automation is especially important in online store development: one product photo may appear as a thumbnail, card, gallery image, recommendation, and Open Graph preview.
Common implementation mistakes
- changing a filename extension without re-encoding the content;
- serving a 5000-pixel source inside a 300-pixel preview;
- turning a logo into a lossy JPEG;
- converting an already damaged JPEG at even lower quality;
- serving AVIF without a fallback when relevant legacy clients exist;
- lazy-loading the main LCP image;
- omitting width and height;
- using one quality setting for photos, screenshots, and transparent graphics;
- optimizing the cover while ignoring galleries and third-party widgets.
A practical selection framework
For photographs and heroes
Start with AVIF, add WebP, and retain JPEG when a fallback is needed. Compare size and fine detail. Create intentional mobile and desktop crops for a critical hero, set dimensions, and avoid lazy loading.
For screenshots and interfaces
Compare PNG, lossless WebP, and lossless AVIF. If text remains sharp in high-quality lossy WebP, it may be suitable, but inspect at 100% scale. Duplicate essential text in HTML.
For transparent objects
Use WebP or AVIF with alpha and keep PNG as the master or fallback. Check soft shadows against light and dark backgrounds. Choose SVG for a simple logo.
For large catalogs
Define presets by image role instead of applying one quality number globally. Measure average page weight, cache hit rate, generation time, and LCP. If the platform cannot support the workflow, include it in website development or technical modernization.
A balanced recommendation
WebP is the simplest general delivery standard for most modern websites: it works for photography and transparent graphics, has broad support, and is easy to automate. Add AVIF where it creates meaningful savings for large photographs. Keep JPEG as a dependable fallback and interchange format, and use PNG for lossless artwork, transparency, and source files.
Performance does not come from the extension alone. It requires correct physical dimensions, responsive variants, sensible quality settings, early LCP discovery, lazy loading below the fold, stable layout, caching, and an automated pipeline. The best format is the one that meets the requirements of a specific asset with the lowest real transfer size and no visible damage.