Image File Formats: When to Use JPEG, PNG, WebP and SVG

A file extension tells you what a file is intended to contain; it does not tell you whether the export is suitable for your website. A tiny PNG can be excellent, while an oversized WebP can still load slowly. Start with the image's purpose, display size and acceptable visual loss, then compare exports.

A practical format shortlist

The MDN image-format guide describes these formats and their browser support. SVG is a vector format, whereas the other entries here normally store pixels. Saving a photograph inside an SVG wrapper does not turn the photograph into a resolution-independent drawing.

Compare exports from the same source

Keep an untouched master image. Export candidate files at the same pixel dimensions and inspect them at the size readers will actually see. Look closely at small lettering, thin lines, gradients and high-contrast edges. Record file size next to each candidate rather than choosing a format by its reputation.

WebP supports both lossy and lossless modes, alpha transparency and animation, as described by Google's WebP documentation. That flexibility does not mean every WebP export is smaller than every JPEG or PNG. The source, quality setting and encoder matter. Likewise, an AVIF file is a candidate to measure, not an automatic winner.

Renaming photo.jpg to photo.webp is not conversion. Use an image editor or encoder that actually writes the target format. Converting a damaged JPEG into a lossless file preserves the already damaged pixels; it does not recover detail removed by earlier compression.

Offer a modern format with a fallback

The following markup assumes you have created all three files from the same image at 1200 by 800 pixels. Replace the example paths, dimensions and alternative text with values matching your actual image.

<picture>
  <source srcset="/images/server-room.avif" type="image/avif">
  <source srcset="/images/server-room.webp" type="image/webp">
  <img src="/images/server-room.jpg" width="1200" height="800"
       alt="Two server racks with labeled network cables"
       style="max-width:100%;height:auto">
</picture>

The browser can select a supported source; the img remains the fallback and carries the alternative text. This is format selection, not responsive size selection. If a mobile screen needs a smaller image, add an appropriate srcset and sizes strategy rather than sending the same large file to everyone. See MDN's picture element reference.

Check the exported file, not just its preview

Reopen the final export in the target browser or publishing application. Confirm orientation, transparency and color appearance. Review metadata before publication, especially when the original came from a camera or phone. Keep the master separately so later edits do not repeatedly recompress an already compressed delivery file.

For user uploads, do not trust the filename or an extension allowlist alone. SVG may contain active content, and other formats still require validation and resource limits. Follow an explicit upload policy, such as the controls outlined in the OWASP file-upload guide, rather than treating every file named “image” as harmless.