Imagyc›Articles

JPEG, PNG, WebP, AVIF and JXL image formats for websites

Published October 9, 2026 · 9 min read

A product photo needs to show detail and load quickly on a phone. A logo needs clean edges and often a transparent background. A banner may occupy much of the screen and delay the content visitors came to see. Each situation calls for a different approach to the file.

JPEG, JPG, PNG, WebP, AVIF and JXL all enter the conversation, but they are not six separate technologies: JPEG and JPG are two extensions for the same format.¹ For a website, start by comparing WebP and AVIF, keep JPEG or PNG as a compatible fallback and assess JXL when its features offer a practical advantage.

Consider the image, the browser and the visitor's device. Changing formats can reduce file size considerably, but oversized dimensions still mean unnecessary downloading and processing.²

What changes between image formats

All the formats covered here store images as pixels. What changes is how those pixels are stored and compressed. Lossy compression discards some information to reduce file size. Lossless compression lets the encoded pixels be recovered exactly.³

Lossy compression does not automatically make a photo look bad. With appropriate settings, it can preserve the appearance needed for a product image. Problems arise when it removes textures, creates blotches or damages small lettering.

Separate dimensions from file size, too. A 2,000 by 2,000-pixel image may use relatively few kilobytes yet require more memory to display than a smaller version. Transparency is another independent feature: it lets a cutout object sit on different backgrounds without carrying a white rectangle around it.

JPEG and JPG for photographs and compatibility

A file ending in .jpg is not inherently better or worse than one ending in .jpeg. Renaming the extension does not compress or convert the image.¹

The traditional web JPEG uses lossy compression and generally works well for photographs with many colors and smooth transitions. Its broad compatibility remains useful for sharing files, integrating older systems and providing a fallback for newer formats. It does not offer native transparency or animation in typical website use.^{1, 4}

Limitations become visible in images with lettering, thin lines or large areas of solid color. Heavy compression can blur the edges of these elements. For that content, compare PNG and lossless WebP.

Progressive JPEG is another option. It can display an initial version and refine it as the download continues. That can improve the perception of loading, but you still need to control dimensions and file size.¹

PNG for transparency and precise detail

PNG uses lossless compression and supports varying levels of transparency. It suits screenshots, diagrams, illustrations with text and files whose pixels need to be preserved accurately.⁵

For photographs, however, it can produce much larger files than lossy alternatives. A photo gallery saved entirely as PNG deserves a review, particularly when transparency is unnecessary.

Watch what optimization tools do before saving. Reducing a PNG's color palette can alter the image even though the format's compression is lossless.⁶ Check gradients, shadows and edges after export.

Animation is available through APNG, an extension now incorporated into the PNG specification. A conventional single-frame PNG remains static; supporting the format does not make every PNG an animation.⁵

WebP as a practical everyday option

WebP combines lossy and lossless compression, transparency and animation. It can cover photographs, product cutouts and graphic assets.⁷

Support is broad in current browsers. That makes WebP a useful starting point for many websites: generate a version, compare it with the original and check whether the size reduction preserves what matters.

Google publishes tests where WebP produces smaller files than JPEG and PNG, but those findings are not a promise for every image.⁷ A file that is already well compressed may leave little room for improvement. Match the format to the material rather than converting everything without inspection.

AVIF for smaller files with good visual quality

AVIF uses AV1 compression technology and can substantially reduce photograph file sizes compared with older formats. It supports transparency, animation, lossless compression and advanced color features.^{8, 9}

It also supports HDR and 8, 10 and 12 bits per color component. In practical terms, this can represent more gradations and a wider brightness range when the source and display support them. Converting an ordinary photo to AVIF does not create missing detail or HDR.⁹

Test it for banners and catalog photos. Inspect fabric, hair, skin and other fine textures: excessively low quality settings may make them look overly smooth.

Exporting can require more processing, depending on the software and settings. For a large collection, consider conversion time as well. On the website, provide a compatible fallback for visitors with older browsers.⁸

JXL for high fidelity and progressive loading

JXL is the extension for JPEG XL, a different format from traditional JPEG. It offers lossy and lossless compression, transparency, animation, HDR and progressive display capabilities.¹⁰

One useful feature is reversible JPEG recompression. Implementations that preserve the required data can store a JPEG as JXL and reconstruct the original JPEG exactly. This does not recover information the JPEG had already lost.¹⁰

Consider JXL for high-quality photographs and projects where fine detail matters. Its ability to show a preview and refine it during downloading can also help with large images.¹¹

Compatibility needs a version check. On October 6, 2026, Chrome announced support starting with version 155. Edge 155 also added decoding, while Firefox 158, still in beta on the research date, provides support enabled by default.^{11, 12, 13} Older advice that JXL does not work in Chrome now needs updating.

Comparing the features

The table summarizes format capabilities. Support for particular features, especially animation and HDR, can vary by browser version.^{1, 5, 7, 9, 10}

Desktop browser compatibility

JPEG and PNG have broad compatibility. WebP and AVIF work in the major current browsers, while JXL requires checking the version. This table covers still images and was verified on October 9, 2026.^{4, 11, 12, 13, 14}

Safari does not display JXL progressively while downloading; it renders the image once the complete file arrives.⁴ Mozilla's implementation documentation also identifies a lack of JXL animation in Safari. Test that feature separately.^{15, 16}

Compatibility on phones and mobile browsers

On a phone, the browser's name alone does not answer the question. App version, operating system and rendering engine affect compatibility.

The following table focuses on still images. “Current” means a recent browser release, not every older device still in use. JXL developments were checked against manufacturers' announcements because updates take time to reach users.^{11, 13, 14, 17, 18, 19, 16, 20, 21}

Do not apply Chrome's Android version number to Chrome on an iPhone. When an iOS browser uses WebKit, its available features also depend on Apple's operating system. WebKit documents JXL support in iOS 17 components used by apps.¹⁹ Test the actual app your audience uses.

Opera Mini deserves separate consideration. The compatibility data checked indicates WebP support, but no AVIF or JXL support. Opera Mobile support does not establish identical behavior in Mini.^{14, 17, 20}

Opening an image is also different from exporting one. In the Canvas API, used by many online tools, PNG export is required; other formats depend on the implementation. If the requested type is unsupported, export can return PNG.²² Check the actual format produced.

Using formats to support SEO and speed

Google does not publish a rule requiring every website to use one format. Its documentation lists JPEG, PNG, WebP and AVIF as supported in Search; JXL is absent from that list in the version consulted for this article.²³ Browser compatibility and documented search support are different questions.

A practical approach is to offer AVIF or WebP and keep JPEG or PNG in the img element as a fallback. The HTML picture element lets the browser select a version it supports. If you test JXL, add it as another option while preserving a compatible fallback.²⁴ The website configuration should declare each file's correct type.

Resize before converting. A 4,000-pixel photo does not need to be delivered in full for a small product card. High-density screens may benefit from more pixels, but the source should still match the display space. With srcset and sizes, the site supplies candidates and helps the browser choose.^{2, 25}

Then adjust quality while viewing the image at its intended size. A setting of “80” in two programs or formats does not necessarily represent the same quality.¹ Compare visual output and transferred bytes. Keep a good-quality original to generate new versions rather than repeatedly converting lossy files.

Prioritize the image that dominates the first screen. It may be the element measured by Largest Contentful Paint, or LCP. Do not lazy-load it. fetchpriority="high" may help when used for the critical image; consider loading="lazy" for images farther down the page.²⁶

Specify width and height to reserve space before downloading and reduce layout shifts.²⁷ Use caching and a CDN where appropriate: reusing files and delivering them closer to visitors can improve loading.²

Help Google understand the content with descriptive filenames, appropriate alternative text and relevant surrounding copy. blue-running-shoe.webp is clearer than IMG_8472.webp. The alt attribute should describe the image's purpose or content without a pile of keywords.²⁸

Making the decision for your website

For an online store, start with the images that matter most: the opening banner, the main product photo and catalog thumbnails. Compare WebP and AVIF at similar visual quality. For product cutouts, preserve transparency with WebP, AVIF or PNG. For screenshots with lettering, compare lossless options before accepting a blurry version.

JXL can join your tests when fidelity or progressive display offers a benefit, always with a compatible fallback. For logos and icons that need to scale cleanly, consider SVG too, a vector format outside this comparison of pixel-based images.⁴

Evaluate the page on phones, with limited connections and devices similar to those your visitors use. The device has to decode the image as well as download it. Fewer bytes do not always mean earlier display.²

Use PageSpeed Insights to compare the page before and after changes, distinguishing laboratory results from real-user data.²⁹ Track LCP and layout stability. Google uses Core Web Vitals in its ranking systems, but good scores do not guarantee first place.³⁰

Choose the format that keeps the product recognizable, arrives quickly and works for your audience. Let the measured result on the page guide the next conversion.