A Field Guide to Image Formats in 2026 (PNG, JPG, WebP, AVIF, HEIC)

An image format is a contract between you and every browser, app, and device that will ever look at your file. The contract says: here is how the pixels are stored, here is how they are compressed, here is how a program reads them back. The right contract saves you 3-10x in file size, in quality, or in compatibility. The wrong one does the opposite.

There are six formats that matter for the web, for product work, and for everyday photos in 2026. There are dozens of others (TIFF, BMP, GIF, JXL, etc.) but they are either obsolete, niche, or use-case-specific. This guide covers the six.

1. PNG — the lossless one

PNG is the format to use when you cannot afford to lose a single pixel. Screenshots, logos, icons with sharp edges, diagrams, line art, anything with text. PNG uses lossless compression, so the file is bigger but the pixels are exact. A screenshot of a UI is almost always a PNG because the text and edges need to stay sharp.

PNG supports transparency (an alpha channel), which makes it the right format for logos that need to sit on any background. JPG does not support transparency, so a logo on a transparent background is always a PNG.

PNG comes in three flavors: PNG-8 (256 colors, smallest), PNG-24 (16 million colors, no transparency), and PNG-32 (16 million colors, with transparency). For the web, PNG-32 is the default. For a tiny icon, PNG-8 is sometimes smaller. The Image Color Picker on this site can tell you how many unique colors an image has, which helps decide between PNG-8 and PNG-32.

2. JPG — the photo one

JPG is the format to use for photos on the web. It uses lossy compression, which means the file is small but the pixels are not exact. For a photo, this is fine — the human eye cannot tell the difference between a JPG at 80% quality and the original. For a screenshot or a logo, the lossy compression creates visible artifacts around sharp edges and text, so JPG is the wrong tool.

JPG does not support transparency. If you need a transparent background, use PNG. If you need a photo with a specific color background, use JPG and composite the background in HTML/CSS.

JPG is supported everywhere — every browser, every app, every device. It is the lowest common denominator. The downside is that for the same quality, JPG files are 2-3x larger than WebP or AVIF. For modern web work, JPG is the fallback when WebP and AVIF are not available.

3. WebP — the web default

WebP is the format Google introduced in 2010 to be the universal web image format. It supports both lossy and lossless compression, transparency, and animation. For the same visual quality, WebP is 25-35% smaller than JPG (for photos) and 25-50% smaller than PNG (for graphics). It is supported in every modern browser (95%+ in 2026).

For almost every image on a website in 2026, WebP is the right format. It handles photos (lossy), graphics (lossless), transparency, and animation. It is smaller than the alternatives and renders correctly in every browser the user is likely to have.

The Image Compressor on this site defaults to WebP output for this reason. It is the format that gives the best quality-to-size ratio for the broadest audience.

4. AVIF — the new best

AVIF is the format that came out of the AV1 video codec. It is the new best — for the same quality, AVIF is 20% smaller than WebP, which is itself 30% smaller than JPG. Net result: AVIF photos are about 50% smaller than JPG photos at the same visual quality. For a site with many photos, this is a real performance win.

Browser support for AVIF was patchy in 2022-2023 but is solid in 2026: Chrome, Edge, Firefox, Safari (since 16), and most mobile browsers. Coverage is around 90-95% of users. The remaining 5-10% are old browsers, embedded browsers, or specialized devices.

The strategy in 2026 is: serve AVIF if the browser supports it, fall back to WebP, fall back to JPG. This is what most modern image CDNs and frameworks do. If you are hand-rolling the HTML, use the <picture> element with multiple <source> tags. If you want a single image, WebP is the safer bet.

5. HEIC — the iPhone one

HEIC is the format Apple introduced in iOS 11 (2017) for iPhone photos. It uses HEVC (H.265) compression, which is roughly 2x more efficient than JPG — an iPhone photo in HEIC is half the file size of the same photo in JPG at the same quality. This is why a 128 GB iPhone stores roughly 2x as many photos as a 128 GB Android phone did in 2017.

HEIC is well-supported on Apple devices (Mac, iPhone, iPad) and increasingly on Windows and Android. But it is not universally supported — many older apps, websites, and email clients will not read it. The common problem: you take a photo on your iPhone, you email it or text it, the recipient sees a blank or a broken image. The fix is to convert HEIC to JPG or WebP before sharing.

The HEIC to JPG tool on this site runs entirely in your browser — your photos never leave your device. Drag in a HEIC file, get a JPG back. Same for converting to WebP or PNG.

6. SVG — the vector one

SVG is the only vector format in the common list. Instead of storing pixels, SVG stores shapes: lines, curves, rectangles, text. When the browser renders an SVG, it draws the shapes at whatever size the CSS asks for. The result is sharp at any size — no pixelation, no blur. For logos, icons, illustrations, and diagrams, SVG is the right format.

SVG files are also small. A logo that would be 50 KB as a PNG might be 2-5 KB as an SVG. The difference grows at larger sizes (the PNG has to scale up; the SVG does not).

SVG has two limitations. First, it is not suitable for photos (a photo as an SVG would be 10-100x larger than a JPG). Second, it does not work well for very complex illustrations with thousands of paths (the file gets big and the rendering gets slow). For icons and logos, SVG is almost always the right call.

The decision tree

When you are about to save or export an image, walk this tree:

1. Is the image a photo? Use WebP (modern) or JPG (fallback). If you can assume modern browser support, use AVIF.
2. Is the image a logo, icon, or illustration with sharp edges? Use SVG (if vector) or PNG (if raster). Use WebP/AVIF for the raster version if you need a smaller file.
3. Is the image a screenshot? Use PNG for lossless text and edges. WebP lossless if you need a smaller file.
4. Is the image a phone photo from an iPhone? Convert HEIC to JPG or WebP before sharing.
5. Does the image need transparency? Use PNG, WebP, or AVIF. Not JPG.
6. Does the image need to be animated? Use WebP, AVIF, or a video format (MP4, WebM). Not GIF (obsolete).

What about GIF?

GIF is obsolete. It supports 256 colors, has terrible compression, and exists today only because of inertia. For an animated image, use WebP (smaller, better quality) or a short looping video (MP4 or WebM, smallest, best quality). For a static image, never use GIF — use PNG or WebP.

What about the obscure ones?

TIFF, BMP, JXL, JPEG XL, JPEG 2000, EXR, RAW, etc. all have their uses (TIFF for print, RAW for photography, EXR for VFX) but they are not relevant to the web or to most product work. If you encounter one, you will know.

The honest summary

Use WebP for almost everything on the web. Use AVIF when you can assume modern browser support and need the smallest possible file. Use PNG for screenshots and any image that needs sharp edges or transparency. Use JPG as the universal fallback. Convert HEIC before sharing. Use SVG for logos and icons. The format choice is a 3-10x lever on file size with zero loss of quality — it is the single highest-ROI decision in image work. The Image Compressor on this site handles the conversion in your browser; the Image Resizer handles the dimensions; the HEIC to JPG tool handles the iPhone case. None of them upload your photos anywhere.