Best image formats for websites: JPEG, PNG, WebP, SVG, and AVIF compared

Choosing the wrong image format is one of the most expensive mistakes on the web — and one of the least visible. A bloated hero image does not throw an error. It silently adds seconds to your page load, pushes your Core Web Vitals into the red, and costs you conversions you never knew you lost. 

According to Google, page speed is critical; for every additional second a page takes to load, the likelihood of users bouncing increases. Extrapolate that impact across every page on your site, and the image format decision stops being a design detail, it becomes a performance lever.

The problem is that no single format wins everywhere. Joint Photographic Experts Group (JPEG) files excel at photographs but cannot handle transparency. Portable Network Graphics (PNG) preserves every pixel but produces files too large for photo-heavy pages. Scalable Vector Graphics (SVG) scales infinitely but only works for illustrations and icons. WebP (developed by Google) and AV1 Image File Format (AVIF) offer better compression than both, but each comes with trade-offs in encoding speed, browser support, and tooling maturity.

If that sounds like a lot to take in, don’t worry: In this post, we’re going to take you through image file formats to help you understand which will suit your website, and your content, best.

Lossy vs. lossless compression: what changes and what doesn't

Every image format on the web uses some form of compression to reduce file size. The type of compression determines what you trade away and what you keep.

• Lossy compression permanently discards image data to achieve smaller files. At moderate quality settings (around 75-85%), the visual difference is imperceptible for most photographs. At aggressive settings, artefacts become visible: colour banding, blurring around edges, and blocky patterns in gradients. The data removed is gone; re-saving a lossy file compounds the quality loss.

• Lossless compression reduces file size without discarding any data. The decompressed image is bit-for-bit identical to the original. File sizes are larger than lossy equivalents, but there is no generation loss from repeated edits.

The practical trade-off is straightforward: a photograph saved as a lossy JPEG at 80% quality might be 200 KB. The same image saved as a lossless PNG could be 1.5 MB — roughly 7x larger — with no perceptible visual improvement on screen. For graphics with flat colours and sharp edges, the gap narrows considerably, and lossless formats often produce smaller files than lossy ones would for the same content.

Raster vs. vector graphics

Raster graphics (JPEG, PNG, GIF, WebP, AVIF) store images as a grid of pixels. Each pixel has a defined colour value. The image has fixed dimensions — a 1000x800 raster image contains exactly 800,000 pixels. Scaling up means interpolating new pixels, which introduces blurring. Scaling down discards pixels, which can lose fine detail. Raster formats are ideal for photographs and complex images where colour variation is continuous and unpredictable.

Vector graphics (SVG) store images as mathematical descriptions of shapes, paths, and text. There are no pixels until the image is rendered. A vector logo at 100x100 pixels and the same logo at 10,000x10,000 pixels are calculated from the same source data and look equally sharp. Vector formats are ideal for graphics with defined shapes, flat colours, and geometric precision — icons, logos, illustrations, charts, and diagrams.

The choice between raster and vector is usually obvious. If the image came from a camera, it is raster. If it was created in a design tool with shapes and paths, it should be vector. The ambiguous cases — complex illustrations, detailed infographics — depend on how many unique visual elements the image contains. If an SVG file exceeds 100 KB, the illustration may be complex enough to benefit from rasterisation to PNG or WebP instead.

Image file formats: how each one works

JPEG (Joint Photographic Experts Group)

Use JPEG for photographs, artwork, and any image with smooth colour gradients and continuous tones.

JPEG uses lossy compression with an adjustable quality slider. At quality 80-85%, file sizes drop dramatically with minimal visible degradation — making it the standard format for web photography since the mid-1990s. It enjoys universal browser support and near-universal tooling support across every content management system (CMS), image editor, and content delivery network (CDN).

The limitations are clear-cut. JPEG has no transparency channel, so it cannot composite over backgrounds. It handles sharp edges and text poorly — fine lines develop visible compression artefacts, and typography becomes fuzzy. And because the compression is lossy, each re-save degrades quality further. Work from a lossless master and export to JPEG as a final step.

JPEG remains the right choice for photographs on the web when your pipeline does not support WebP or AVIF conversion. For new projects, JPEG is often best treated as a fallback rather than the default.

PNG (Portable Network Graphics)

Use PNG for raster graphics, screenshots, transparency, and cases where SVG is unavailable or inappropriate. For logos and icons, use SVG first when a clean vector source exists.

PNG uses lossless compression, which means the decompressed image is identical to the original. It supports an alpha channel for partial transparency — a capability JPEG lacks entirely. For small images with flat colours and geometric shapes, PNG is remarkably efficient. A 200x200 logo with a few solid colours might weigh only 5-10 KB as a PNG.

Where PNG struggles is photographs. A photographic image saved as PNG will typically be 5-10x larger than its JPEG equivalent with no meaningful quality advantage for on-screen viewing. Use JPEG or WebP for photos; reserve PNG for content that actually benefits from lossless reproduction.

One practical technique worth knowing: if you have a PNG with a transparent background but plan to display it on a known background colour, you can composite the alpha channel over that colour and re-export as JPEG. This drops the file size significantly while maintaining the visual result. Contentful's Images Application Programming Interface (API) supports this with a single parameter — append ?bg=rgb:e5e9eb&fm=jpg to composite a transparent PNG over a light grey background and deliver it as a JPEG. A 300 KB transparent PNG becomes a 40 KB JPEG with no visible difference in context.

JPEG vs PNG: when to use which

This is the most common format decision on the web, and the answer depends on what the image contains — not what it looks like at a glance.

The short version: if the image came from a camera or contains smooth gradients, use JPEG. If it was designed in a graphics tool, contains text, or needs a transparent background, use PNG. If file size is critical for either type, use WebP instead.

GIF

Graphics Interchange Format (GIF) is a venerable format, last updated in 1989, that has endured because of one feature: animation. GIF supports frame-based animation with universal browser and email client compatibility, which is why it remains the default for memes, reaction images, and simple user interface (UI) animations.

The trade-offs are steep. GIF is limited to 256 colours per frame, which produces visible banding in photographic content. File sizes for animation are large compared to video: a 5-second GIF can easily exceed 2 MB, while the equivalent MPEG-4 (MP4) might be 200 KB. GIF uses lossless compression per frame but the colour palette limitation functions as a form of lossy reduction.

For animation on the web, video (typically MP4 with the Advanced Video Coding (H.264) codec) is almost always more efficient. Modern browsers can autoplay muted video inline, replicating the GIF experience with a fraction of the file size. Use GIF when you need guaranteed animation playback in environments that do not support video — email clients being the most common example.

WebP

WebP, developed by Google, supports both lossy and lossless compression, transparency (alpha channel), and animation — effectively combining the strengths of JPEG, PNG, and GIF into a single format. The compression improvements are well-documented: Google's comparative studies show WebP lossless images are 26% smaller than PNG equivalents, and WebP lossy images are 25-34% smaller than comparable JPEGs at equivalent visual quality.

WebP has been available in Chrome, Firefox, Safari (since version 14 in 2020), and Edge for several years. Global browser support exceeds 97% according to caniuse.com. WebP is a strong modern default when your CMS, CDN, and audience support automatic conversion and fallback handling.

The main reason not to use WebP today is tooling constraints. Some older content management systems, email clients, and design tools do not yet handle WebP natively. If your workflow involves round-tripping images through tools that lack WebP support, maintaining JPEG/PNG originals and converting to WebP for delivery is the pragmatic approach.

SVG (Scalable Vector Graphics)

Use SVG for icons, logos, illustrations, diagrams, and artwork that needs to scale cleanly across screen sizes. SVG can also be accessible and styleable when implemented correctly.

Where JPEG, PNG, GIF, WebP, and AVIF store images as grids of pixels (raster graphics), SVG describes images as mathematical paths, shapes, and text. An SVG logo looks equally sharp at 16x16 pixels on a favicon and 4000x4000 pixels on a billboard — because it is recalculated at every size rather than scaled from a fixed grid.

Beyond scalability, SVG files are based on Extensible Markup Language (XML) text, which makes them searchable, accessible to screen readers, and targetable with Cascading Style Sheets (CSS) and JavaScript. You can animate individual elements, change colours dynamically, and embed SVG directly in HyperText Markup Language (HTML) for full Document Object Model (DOM) access.

For practical implementation:

• Inline SVG (embedded directly in HTML) gives you full CSS and JavaScript control — ideal for icons and UI elements that need to respond to theme changes or user interactions.

• SVG as an image source (via <img> tag or CSS background-image) is simpler to implement and cache but loses interactivity and CSS targeting. This approach works well for logos and static illustrations.

• SVG files should be optimised before deployment. Tools like SVGO remove unnecessary metadata, merge paths, and reduce file size — often by 30-50%.

SVG is not suitable for photographs or complex continuous-tone images. The mathematical representation of photographic content would produce files orders of magnitude larger than a raster equivalent.

AVIF: a compression-forward option

AVIF is the newest format covered in this guide and often the strongest compression-focused option when a delivery pipeline supports it, with WebP or JPEG/PNG fallbacks. Based on the AV1 video codec, it supports lossy and lossless compression, full transparency, animation, and High Dynamic Range (HDR) content.

AVIF often delivers smaller file sizes than JPEG and WebP at comparable visual quality, depending on the image, encoder, and quality settings. In typical tests, a photograph that weighs 200 KB as a JPEG might compress to around 100 KB as AVIF with no visible difference — a meaningful saving when multiplied across image-heavy pages. Results vary by image content and encoding configuration, but the compression advantage over JPEG and WebP is consistent across most photographic and graphic content.

Browser support has reached practical viability. Chrome and Firefox have supported AVIF since 2020 and 2021 respectively. Safari added support in version 16.4 (March 2023). Edge supports AVIF through its Chromium base. As of 2025, all major browsers render AVIF natively, and global support exceeds 93% according to caniuse.com. Teams should provide fallbacks for older browsers, embedded webviews, social crawlers, and non-browser channels.

• Encoding speed is slower than WebP or JPEG. AVIF compression is computationally expensive, which makes on-the-fly conversion harder for some CDNs and image processing pipelines. This is improving as hardware and software encoders mature.

• Tooling support is still catching up. Not all image editors, CMS platforms, and build tools handle AVIF natively. Check your pipeline before committing to AVIF as a primary format.

• Progressive decoding is limited compared to JPEG. AVIF images appear all at once rather than loading gradually, which can feel slower on poor connections even when the total transfer is smaller.

The pragmatic approach: serve AVIF where your pipeline supports it, fall back to WebP, and use JPEG as the final fallback. The <picture> element in HTML makes this straightforward:

Copy to clipboard

Format comparison table

Which format to use: a decision guide by use case

Quick decision guide: which image format should I use?

• Photo or product image? Start with WebP or AVIF, with JPEG fallback.

• Logo or icon? Use SVG when possible.

• Screenshot or UI graphic? Use PNG or WebP.

• Simple animation? Use animated WebP or video instead of GIF when possible.

• Social preview image? Use JPEG or PNG.

• Need maximum compatibility? Use JPEG, PNG, or SVG depending on the image type.

Photographs and product images

Use JPEG as a baseline, WebP for better compression, or AVIF for maximum savings. Quality 75-85% on lossy formats is the sweet spot for most photography — below 75%, artefacts become visible in gradients and skin tones; above 85%, file size gains diminish sharply.

For responsive delivery, serve different sizes for different viewports using the srcset attribute or an image CDN that handles resizing automatically. Contentful's Images API, for example, can resize, crop, and convert formats on the fly via Uniform Resource Locator (URL) parameters — ?w=800&fm=webp&q=80 delivers an 800px-wide WebP at 80% quality from any uploaded original.

Art-directed images and reusable artwork

When repurposing the same artwork across pages and channels — hero banners, campaign graphics, editorial illustrations — store the original at maximum quality and let your delivery pipeline handle format conversion and sizing. Use JPEG or WebP for photographic artwork. For graphics with transparency, use PNG or WebP depending on your browser support requirements.

Avatars and user photos

User photographs are best served as JPEG or WebP, cropped tightly. Face detection makes this easier at scale — instead of manually cropping hundreds of profile photos, an API parameter can detect the face and crop around it automatically. Contentful's Images API supports this with ?w=128&h=128&fit=thumb&f=face, which generates a 128x128 avatar centred on the detected face from any uploaded portrait.

Icons, logos, and UI elements

SVG is the correct choice for almost all icons and logos. A single SVG icon set can serve every resolution on every device without additional assets. If you need the icons to respond to CSS themes (dark mode, brand colour changes), inline the SVG in your HTML.

For the rare cases where SVG is not viable — complex logos with embedded raster textures, or environments that require raster formats — use PNG at 2x the display resolution for sharp rendering on high-density screens.

Screenshots and UI captures

PNG preserves the fine details of typography and interface elements better than JPEG, which tends to introduce artefacts around sharp text edges. WebP is the best option here — it handles the flat colours and sharp edges of screenshots efficiently while producing smaller files than PNG.

Animations

For short, simple animations (loading spinners, micro-interactions), GIF remains viable due to universal compatibility — particularly in email, where video support is inconsistent.

For everything else, video (MP4 with H.264) is more efficient by an order of magnitude. A 3-second animation that weighs 2 MB as a GIF might be 150 KB as an MP4. Modern browsers autoplay muted inline video, replicating the GIF experience at a fraction of the bandwidth cost.

Social media previews

For Open Graph (used by Facebook and LinkedIn) and Twitter Card images, JPEG or PNG are still the safest defaults. Serve the image at the platform's recommended dimensions — typically 1200x630 for Open Graph — to avoid cropping surprises. Avoid relying on AVIF for social previews, and test WebP support before using it for link previews, as platform support for newer formats varies.

Image format is only the first decision

Choosing the right file format helps, but image performance also depends on how images are delivered. A well-chosen format in an oversized file still hurts page speed.

• Resize images to the dimensions you actually display instead of serving oversized originals.

• Use responsive images with srcset and sizes to let the browser select the right file for each viewport.

• Use lazy loading for below-the-fold images, but avoid lazy-loading the main hero or Largest Contentful Paint (LCP) image — that should load eagerly.

• Set width and height attributes on <img> elements to reduce layout shift (Cumulative Layout Shift, or CLS).

• Use a CMS or CDN image pipeline to automate format conversion, quality adjustment, cropping, and fallback handling. Automating these steps removes the manual overhead and ensures consistency across every page.

Wrapping up

If you take one thing from this guide, it should be to audit your highest-traffic pages first. You can run them through a tool like PageSpeed Insights, check which images are still served as uncompressed PNG or full-size JPEG, and convert those to WebP or AVIF. 

With an image pipeline such as Contentful's Images API, teams can request different formats, sizes, crops, and quality levels from the same source asset instead of manually exporting multiple versions. Most CDNs and content platforms can handle format negotiation and responsive resizing automatically, so the conversion is a configuration change rather than a redesign.

Make sure your images are delivering for your content experiences: Browse the Contentful platform, or take the next step by contacting our sales team for a demo. 

Take a tour

Chat with our team

Your experiences should wow, not wait. Let's talk.