JPEG for photographs
JPEG compresses photos well by discarding detail the eye barely notices. It does not support transparency, and it handles sharp lines and text poorly at low quality, producing fuzzy edges. It is universally supported, making it a safe default for photographs when you need broad compatibility.
PNG for sharp graphics and transparency
PNG keeps every pixel exactly, which suits screenshots, logos with flat color, and graphics that need transparent backgrounds. Photos saved as PNG become very large. If you find a photo that weighs a megabyte or more as a PNG, converting it will save a lot.
Reduce PNG size by limiting the color palette or using a compression tool.
WebP and AVIF, the modern pair
WebP handles both photos and graphics, supports transparency, and is typically smaller than JPEG or PNG at similar quality. Current major browsers support it. AVIF can compress even further, though encoding is slower and some tools lack support.
A reasonable approach is to serve WebP or AVIF with a JPEG fallback using the picture element, or let a plugin or CDN do the conversion. Check how your platform handles uploads.
SVG for logos and icons
SVG is a vector format described by shapes, so it stays crisp at any size and is often tiny. It is ideal for logos, icons and simple illustrations. Never use it for photos. Only upload SVG files from trusted sources, since the format can contain code; some platforms restrict it for security reasons.
Optimize SVGs by stripping unneeded metadata.
GIF, video and everything else
GIF is limited to 256 colors and produces large files for animation. A short muted looping video in MP4 or WebM is usually much lighter and looks better. Avoid BMP and TIFF on the web.
For icons used across a page, an SVG sprite or an icon font loads efficiently, though inline SVG gives better control.
A simple decision guide
Photo: WebP or JPEG. Logo or icon: SVG, or PNG if SVG is unavailable. Screenshot with text: PNG or lossless WebP. Animated demonstration: short video. Transparent product shot: WebP or PNG. Whatever you pick, resize first, compress second, and test the result on a phone.
Keep the original high-quality files stored, so you can export in new formats later as support grows.
Open your home page in the browser tools, filter the Network panel by images, and sort by size. The biggest file is usually the place to start. If it is a PNG photo, convert it. If it is a JPEG at 4,000 pixels wide, resize it. If it is a GIF, replace it with a video. Three small changes often cut page weight in half, and the format choice is the cheapest of them to make.
If you are unsure, export the same image in two formats and compare the file sizes and appearance side by side at the size it will display. The smaller file that still looks clean on a phone wins.
Common questions
Will WebP images work on all browsers?
Current major browsers support WebP. Offer a fallback if you must support very old browsers.
Is AVIF worth it?
It can save more space, but check tool support and encoding time. WebP is the practical middle ground.
Can I rename a PNG to JPG?
No. Renaming does not convert it. Re-export from an image editor.
This guide is general information. Search engines change how they work and their guidelines; check Google's current documentation for your situation. Nobody can guarantee a ranking.