Best formats for web images

WebP is a modern image format designed specifically for the web. It typically produces smaller file sizes than JPEG and PNG at comparable visual quality, which means pages load faster for visitors. Most modern browsers (Chrome, Firefox, Safari, Edge) support WebP.

If your website builder or CMS accepts WebP, it is a practical choice for photographs and graphics. FormatOS converts JPG to WebP and PNG to WebP, and back again via WebP to JPG and WebP to PNG where something in your pipeline will not accept it.

WebP supports both lossy and lossless modes, and transparency in both. That makes it the one format that can replace JPEG and PNG for most web purposes.

JPEG remains a solid choice for photographs where transparency is not needed and the image will be displayed at a fixed size. Compressing a JPEG to 70–80% quality usually provides a good balance between visual fidelity and file size without introducing obvious artefacts.

JPEG's advantage is universal support: every browser, every CMS, every email client, every upload form. Where compatibility matters more than the last few kilobytes, JPEG is the safe answer.

PNG is the better option when you need a transparent background: for logos, icons, or interface elements that sit on top of other content.

PNG files tend to be larger than JPEG, so it is worth sizing them to the exact pixel dimensions they will be displayed at rather than relying on HTML or CSS to scale them down. A browser scaling a 2000-pixel image into a 400-pixel slot still downloads all 2000 pixels.

PNG is also the right choice for screenshots and any image containing text, for the reason set out in how compression affects quality: lossy compression blurs sharp edges, and text is nothing but sharp edges.

SVG is the right choice for logos, icons, and simple illustrations. Because SVG is a vector format rather than a pixel grid, it scales to any size without becoming blurry, and the file size is typically very small.

An SVG logo stays crisp on a phone, on a desktop monitor, and on a high-density display, from one file. FormatOS includes an SVG-to-PNG converter for cases where a rasterised version is needed; some email clients and older platforms will not render SVG.

SVG is not suitable for photographs. It describes shapes, not pixels.

• Photograph: WebP, or JPEG for compatibility. Best size at acceptable quality.
• Logo or icon: SVG, with PNG as a fallback. Scales cleanly, small file.
• Screenshot or text image: PNG, or lossless WebP. Sharp edges survive.
• Needs transparency: PNG or WebP. JPEG has no transparency.
• Favicon: the favicon generator produces the correct sizes for you.

WebP is the default recommendation, not a universal one. There are three situations where reaching for it costs you more than it saves.

Email. Email clients are not browsers, and support for WebP in them is far patchier than on the web. An image that renders perfectly on a website can show as a broken placeholder in a mail client. For anything that will be emailed, JPEG or PNG remains the safe choice, see best formats for email attachments.

Platforms you do not control. Marketplaces, job portals, print services and older content management systems frequently accept only JPEG and PNG. A WebP upload is rejected outright, usually without saying why.

Files someone else will edit. If a colleague needs to open the image in whatever they have to hand, a format everything opens is worth more than a smaller file.

The practical approach is to use WebP where you control the page and the audience is a browser, and to keep a JPEG or PNG copy for everywhere else. Converting back with WebP to JPG works, but it means re-encoding an already-compressed image, so it is better to export both from your original than to convert one into the other.

The single largest saving available on most sites is not the format, it is the dimensions.

Work out the largest size the image will actually be displayed at, resize to that, or to twice it, if you are serving high-density displays, and only then compress. Compressing a needlessly large image produces a large file that also looks worse than a correctly sized one.

1. Start from the highest-quality original you have.
2. Crop to the composition you want.
3. Resize to the display dimensions.
4. Convert to WebP, or JPEG where compatibility matters, or PNG where transparency or text is involved.
5. Compress and compare at full size.
6. Keep the original.