iLoveConvert

Image formats

Best Image Formats for Websites

iLoveConvert Team · · 4 min read

Images are usually the heaviest part of a web page, so the format you pick directly affects loading speed, Core Web Vitals and search rankings. Here is a practical guide.

The short answer

  • Photos: WEBP (or AVIF), with JPG as a fallback for very old systems.
  • Logos and icons: SVG; PNG or WEBP if you only have a bitmap.
  • Screenshots and UI: PNG with palette compression, or lossless WEBP.
  • Animations: a short muted MP4/WEBM video instead of a GIF.

WEBP and AVIF: the modern defaults

Both are supported by all current browsers. WEBP is about a third smaller than JPG; AVIF goes further but encodes more slowly. For most sites WEBP is the easy win, and Image Converter turns existing JPG and PNG files into WEBP in bulk.

Image Converter – Convert images between JPG, PNG, WEBP and more.

Convert images to WEBP

JPG is still fine

A well-compressed JPG is small and universally compatible. If your platform does not support WEBP, compress JPGs with MozJPEG at quality 70–80 using Compress JPG.

Use SVG for vector graphics

SVG stays sharp on every screen and is often only a few kilobytes. If a platform does not accept SVG, render it to PNG at twice the display size with SVG to PNG.

Size matters as much as format

Serving a 4000-pixel photo in an 800-pixel slot wastes bandwidth whatever the format. Resize images to about twice their displayed width for sharp results on high-density screens, then compress them.

Resize Image – Change image dimensions in pixels or percent.

Open Resize Image

Don’t forget the favicon

Browsers still look for favicon.ico. Create one with every common size from your logo using PNG to ICO.