How to choose image formats for a website
An image format affects file size, appearance and supported features, but no single choice is best for every image. Loading performance is also part of page experience; Google says Core Web Vitals are used by its ranking systems, but a score alone does not guarantee high positions. Compare formats using your own files and check the result in the browsers and devices your audience uses.
WebP: compare size and appearance
WebP supports lossy and lossless compression, transparency and animation. That makes it an option for web photos, graphics and animations, but results vary with the image, encoder and settings. Export a copy and compare fine details, transparency and file size with the original. Check that your publishing system and recipients support WebP.
JPEG: commonly used for photographs
JPEG is widely used for photographs and uses lossy compression. Reducing quality too far or repeatedly saving a JPEG can create visible artifacts. JPEG does not store transparency. For logos, fine text or flat edges, compare PNG, lossless WebP or SVG, depending on the artwork and required compatibility.
PNG: raster images without loss
PNG is a lossless raster format that supports transparency. It can suit screenshots and graphics when preserving pixel values matters, although file size depends on the image. For photographs, compare its size and appearance with other formats before choosing.
SVG: vector graphics
SVG describes vector graphics with shapes and instructions instead of a fixed pixel grid. It can suit many icons, diagrams and illustrations that need to scale. It is not a general substitute for photographs; consider complexity, file size and the security rules of the system that displays it.
A practical starting point
For a photograph, compare JPEG, WebP or AVIF if the destination accepts them. For a vector icon or illustration, consider SVG. PNG or WebP may work for transparency, and PNG or another lossless option can preserve fine lines in screenshots. These are starting points, not universal rules.
Prepare an image before publishing
Make a copy at dimensions suited to its display area, choose compression appropriate for the use and inspect the result on a real screen. If you provide alternatives, keep a compatible fallback for your visitors. See the guide to reducing image size and compare formats in the linked guides.
Sources and specifications
The cited specifications define format capabilities. Google explains how page experience fits into its ranking systems; a single score does not guarantee a ranking.
Image tools and guides
Specifications and search documentation
Format capabilities are defined by their specifications. Google explains how page experience fits into its ranking systems; no single score guarantees a ranking.
Frequently asked questions
Is WebP always smaller than JPEG?
No. The result depends on the source image, encoder and settings. Compare the exported files at an acceptable visual quality.
Which dimensions should I upload?
Use dimensions suited to the displayed area and provide responsive variants when useful. Keep the original for other placements.
Does a strong Core Web Vitals score guarantee a high ranking?
No. Google says its systems use many signals; good page-experience results do not guarantee top search positions.