Choosing the Right Image Format for the Web

Three Questions to Ask First

On a real website, the choice for each image comes down to three questions:

1. What does it show? Photos suit lossy formats such as JPG, lossy WebP and AVIF, because small errors hide in natural detail. Screenshots, text, charts and flat-colour graphics have hard edges where lossy compression can leave visible halos, so they suit lossless formats (PNG, lossless WebP) or, if they were drawn as shapes, SVG.
2. Does it need transparency or animation? JPG has neither. PNG, WebP and AVIF can store a full alpha channel with soft edges. GIF pixels are either fully transparent or fully opaque, so curved edges can look jagged or fringed on coloured backgrounds. GIF, WebP, AVIF and APNG (animated PNG) can hold animation, but a short video is often far smaller than a GIF.
3. Where will it be published? On your own HTML pages you can offer several formats. A content management system (CMS), shop or upload form decides what it accepts and may convert files itself, so check its current documentation. Email programs differ more than browsers, so JPG and PNG are safer for newsletters.

For how each format works, see JPG vs PNG vs WebP vs AVIF.

Format by Content: A Decision Table

When you serve AVIF or WebP on your own pages, keep a JPG or PNG version for browsers and apps that cannot display them. When a platform takes only one file, the fallback column is usually the safe pick. Favicons follow their own rules; see Favicon Sizes, Formats and HTML Tags.

For a GIF-style loop on a web page, a muted <video> with the autoplay, loop, muted and playsinline attributes is a common replacement, because browsers generally let muted videos play automatically. In email, some desktop versions of Outlook show only the first frame of an animated GIF, so put the key message in that frame.

Offering WebP or AVIF With a Fallback

On pages where you write the HTML, the <picture> element lets each browser take the first format it supports:

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="Bowl of tomato pasta" width="1600" height="1200">
</picture>

The browser reads the <source> elements in order and skips any whose type it does not support. The required <img> carries the alt text and the width and height that let the browser reserve space, and its file is shown when no source matches. With CSS such as img { max-width: 100%; height: auto; } the image still shrinks to fit narrow screens and keeps that shape. To offer several sizes as well, list each file with its width in srcset and add a sizes attribute, as described in Resizing Images: Pixels, Aspect Ratio and DPI.

Many CMSs and image CDNs can create WebP or AVIF copies and pick one for each visitor. If yours does, upload a high-quality JPG or PNG and let it convert, rather than a file you have already compressed heavily, so that the image is not compressed twice.

Worked Example: The Images for One Article

Suppose a recipe article has three images, and its text column is at most 760 CSS pixels wide.

• Hero photo. The phone original is 4032 × 3024 pixels, about 12.2 megapixels. A 760-pixel column on a screen with two device pixels per CSS pixel needs about 1,520 pixels across, so 1600 × 1200 keeps the 4:3 shape with 1.92 megapixels, about 16 % of the original. Resize first, then save AVIF or WebP plus a JPG fallback; the full-size original has more than six times as many pixels as the 1600 × 1200 version, and the browser would scale most of them away.
• Logo with a transparent background. The designer's PNG is 1000 × 500 pixels and is shown 200 CSS pixels wide, so 400 × 200 covers screens with two device pixels per CSS pixel. Keep it as PNG or WebP; a JPG would fill the transparent areas with a solid colour, which shows as a box on a coloured header. If the designer can export an SVG, that is better still.
• Screenshot of a timer app. Text and flat colours: save it as PNG. A JPG can add speckles around letters, which readers notice more than small errors in a photo.

Converting Files With the LeedyBox Image Converter

The Image Converter changes the format of one or more images in your browser, without uploading the image data to LeedyBox.

1. Click "Choose Files or Drag & Drop Here" or drop PNG, JPG, WebP, BMP, GIF or AVIF files on it. Other types, such as HEIC or SVG, and files your browser cannot decode are rejected with a message.
2. Each file gets its own format menu (labelled "To:" on wider screens), set to JPG at first. Pick JPG, PNG, WEBP, BMP, AVIF or ICO per file, or for all files with "Set All Formats To..." under Batch Options.
3. Click "Convert & Download". One file is saved as, for example, logo_converted.webp; several arrive in leedybox_converted_images.zip.

• The pixel dimensions stay the same, except for ICO. Resize first with the Image Resizer, or use "Also limit the width and height" in the Image Compressor.
• For JPG, WebP and AVIF the converter asks the browser for quality 0.92 on its 0-to-1 scale, and there is no quality slider. That setting favours detail over file size. It also means WebP is saved lossy: there is no lossless WebP option, so convert screenshots and text graphics to PNG. For smaller files, the compressor offers a quality slider (75 by default) and a target file size; see Image Compression Settings Explained.
• JPG files and the converter's BMP files have no transparency, so transparent areas become white. The BMP files are also uncompressed, at 3 bytes per pixel (each row padded to a multiple of 4 bytes) plus a 54-byte header: a 1200 × 800 image becomes 2,880,054 bytes (about 2.9 MB), whatever it shows, so BMP does not belong on web pages.
• An ICO file holds one PNG image and keeps transparency. An image with a side longer than 256 pixels is scaled down to fit within 256 × 256, so a 1000 × 500 logo becomes 256 × 128; smaller images keep their size. For a favicon.ico with 16, 32 and 48 pixel sizes plus PNG and Apple touch icons, use the Favicon Generator.
• AVIF can be selected only if your browser can create AVIF files, which many browsers currently cannot; otherwise it is listed as "AVIF (not supported in this browser)". If the browser cannot create the chosen format (WebP output also depends on the browser), a message appears and nothing is saved, rather than PNG data under the wrong extension. With several files, one such failure stops the whole batch, so no ZIP file is created.
• Each image is redrawn and encoded anew, so the original's EXIF data, GPS location and colour profile are not carried over, and an animated GIF, WebP or AVIF becomes a still image of a single frame. The converter does not create SVG, GIF or animated files.

Common Problems and How to Fix Them

• A transparent logo has a white or black box around it. It was probably saved as JPG or as a BMP without transparency. Use PNG or WebP instead; see why transparency is lost in JPG.
• The PNG is much larger than the JPG it came from. PNG stores every pixel exactly, including the JPG's noise and compression artefacts, and the conversion does not bring back detail the JPG already lost. Use WebP or JPG for photos.
• An upload form rejects WebP or AVIF. Some forms accept only JPG and PNG. Convert photos to JPG and transparent graphics to PNG. Renaming the extension does not change the format.
• The WebP file is hardly smaller than the JPG, or even larger. The original JPG may already have been strongly compressed, and the converter's quality 0.92 keeps a lot of detail, including the JPG's own artefacts, which cost bytes to store. If the file is too large either way, it may still be at full camera size. Resize to the display size, then use the compressor and compare the results.
• Colours look duller than in the original. The converter draws each image on a browser canvas, which works in sRGB by default, and does not keep the original colour profile. Photos in a wider colour space such as Display P3 or Adobe RGB can lose some of their most saturated colours, which shows most on wide-gamut screens. Export an sRGB copy from your photo editor, check it there, and convert that.
• A HEIC photo from a phone is not accepted. HEIC is not on the converter's list. Many phones can export or share photos as JPG; convert that copy.

What to Check Before You Publish

• Open the page in two browsers and on a phone. With <picture>, test the fallback too by temporarily removing the AVIF and WebP sources.
• Compare the new file with the original at actual size, looking at faces, text and gradients.
• On the Network panel of the browser's developer tools, check which file was downloaded and its size.
• If your site has a dark mode, look at transparent images on both light and dark backgrounds.
• Keep the originals and convert from them; re-saving a lossy file adds new errors to old ones.

Frequently Asked Questions