Short answer: Use JPG for photos and SVG for logos, icons and diagrams that must stay sharp at any size. Use PNG for screenshots, images with text and anything that needs a transparent background. On a website, photos weigh less as WebP, which MDN says compresses much better than PNG or JPEG.
What each format is
web.dev splits images into two kinds. Raster images, such as PNG and JPG, store the value of each pixel in a grid. Vector images, such as SVG, describe the picture with lines, points and shapes.
JPEG is the most widely used lossy format for still images, and MDN calls it particularly useful for photographs. PNG is lossless, so it keeps every pixel, and it supports transparency. SVG files are text files that describe a drawing, and MDN says they’re ideal for images drawn accurately at any size.
Which format to use for each image
| Image | Format | Why |
|---|---|---|
| Photo | JPG, or WebP on your website | Lost detail is hard to see in a photo |
| Logo | SVG, with a PNG copy | Stays sharp at any size |
| Icon | SVG | Drawn accurately at every size |
| Screenshot or image with text | PNG | Lossless, so text and edges stay crisp |
| Transparent background | PNG, or SVG for a drawing | JPG has no alpha channel |
| Chart or diagram | SVG | Shapes and lines scale cleanly |
From MDN’s image format guide and web.dev, “Choose the right image format”, read November 3, 2026.
How to choose the right format
- Decide whether the image is a photo or a drawing made of shapes, lines and flat colors.
- Save drawings such as logos, icons and diagrams as SVG.
- Save photos as JPG, or as WebP or AVIF for your website, the formats MDN prefers for raster images.
- Use PNG for screenshots, images with text and anything that needs a transparent background.
- Keep important text out of images: web.dev notes that text in images can’t be selected, searched or zoomed.
- Save a raster image in each size you need, since scaling one up makes it look jagged and blurry.
- Make sure each file name ends in the extension of its type, as Google suggests.
Our guides to WebP, alt text and image SEO and lazy loading cover the next steps for the images on your website.
The formats on our own site
We read our own site and brand kit on November 3, 2026. Our logo as an SVG weighs 1,762 bytes, and the PNG of the same logo weighs 101,601 bytes at 5,229 by 1,577 pixels.
The logo in our site’s header is a PNG of 396 by 119 pixels shown at 99 by 30, about four times its width and height on screen. The six icons in our menu are SVG drawings written into the page.
Our media library holds 665 WebP files, 15 PNG, 10 JPEG and 6 SVG. The photos of our guides are WebP: the share image of our keyword stuffing guide is 1,200 by 630 pixels and 20,590 bytes.
Before you upload an image
- Photos are JPG or WebP, not PNG.
- Logos and icons are SVG, with a PNG copy for places that don’t take SVG.
- Screenshots and images with text are PNG.
- Transparent backgrounds come from PNG or SVG, never JPG.
- Important text is real text on the page, not part of an image.
- Each file name ends in the extension of its type.
RememberPhotos go in JPG or WebP, drawings in SVG, and anything with text or a transparent background in PNG.
If you want your site’s images set up for speed and search, see our web design service.
Quick answers about image formats
What is the difference between PNG and JPG?
JPG uses lossy compression: it drops detail to make a smaller file, which suits photos. PNG is lossless and keeps every pixel, which suits screenshots, logos and text. PNG also supports transparency, while MDN notes that JPEG has no alpha channel.
What is an SVG file?
A vector image saved as a text file. Instead of pixels, it holds drawing instructions for shapes, lines and colors, so it can be drawn at any size without losing sharpness. MDN calls it ideal for icons, diagrams and other images drawn at different sizes.
Is SVG better than PNG for a logo?
On a website, usually yes. An SVG logo stays sharp at any size, and ours weighs 1,762 bytes against 101,601 for the PNG of the same logo. Keep a PNG copy as well for any place that won’t take an SVG.
Which image formats support a transparent background?
PNG, WebP and AVIF do, according to web.dev’s comparison of raster formats. JPG doesn’t: MDN notes that JPEG has no alpha channel, so use PNG when a raster image needs a transparent background.
Can I turn a JPG or PNG into an SVG?
Only drawings convert well. web.dev suggests converting images made of geometric shapes to SVG, but says vector formats fall short with a complex scene such as a photo: the drawing code gets too heavy and still doesn’t look photorealistic.
Sources
Read on November 3, 2026. MDN Web Docs: Image file type and format guide and SVG: Scalable Vector Graphics. web.dev: Choose the right image format. Google Search Central: Image SEO best practices. Our own case: our site and brand kit, read as a visitor and on our server on November 3, 2026.