# A Field Guide to Image Formats in 2026 (PNG, JPG, WebP, AVIF, HEIC) > There are six image formats that matter in 2026: PNG, JPG, WebP, AVIF, HEIC, and SVG. Each has a specific use case. Using the wrong one costs you 3-10x in file size, in quality, or in compatibility. Here is the honest field guide. URL: https://uttir.com/blog/a-field-guide-to-image-formats-in-2026 Published: 2026-08-19 Updated: 2026-08-19 Author: Uttir Reading time: 8 min Tags: image-formats, web-performance, images, field-guide, compression ## Quick answer In 2026, the six image formats that matter are: (1) PNG for screenshots, logos, anything with sharp edges or text, (2) JPG for photos on the web, (3) WebP for almost everything on the web (photos, illustrations, UI) — same quality as JPG/PNG at 30% smaller, (4) AVIF for the same use cases as WebP when you can assume modern browser support (90%+ in 2026) — 20% smaller than WebP, (5) HEIC for iPhone photos before you share them (convert to JPG or WebP first), (6) SVG for icons, logos, and illustrations that need to scale without quality loss. The [Image Compressor](/image-compressor) on this site converts and compresses between formats in your browser; the [HEIC to JPG](/heic-to-jpg) tool handles iPhone photos; the [Image Resizer](/image-resizer) handles dimension changes. 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](/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](/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 `` element with multiple `` 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](/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: - Is the image a photo? Use WebP (modern) or JPG (fallback). If you can assume modern browser support, use AVIF. - 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. - Is the image a screenshot? Use PNG for lossless text and edges. WebP lossless if you need a smaller file. - Is the image a phone photo from an iPhone? Convert HEIC to JPG or WebP before sharing. - Does the image need transparency? Use PNG, WebP, or AVIF. Not JPG. - 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. ## By the numbers: real file size across formats These are the file sizes for the same source image — a 1920×1080 photograph, with no metadata — across the five formats that matter for the web. Same source pixel data, same dimensions, same content. The only variable is the format and its encoder settings. | Format | File size | vs JPG (baseline) | vs PNG | Quality at this size | | --- | --- | --- | --- | --- | | JPG (quality 85) | ~410 KB | 1.0x | 0.21x | Visually indistinguishable from original | | WebP (quality 80) | ~225 KB | 0.55x | 0.12x | Visually indistinguishable from JPG 85 | | WebP (quality 60) | ~140 KB | 0.34x | 0.07x | Good — slight loss in gradients | | AVIF (quality 60) | ~95 KB | 0.23x | 0.05x | Good — better detail retention than WebP at same size | | AVIF (quality 40) | ~58 KB | 0.14x | 0.03x | Acceptable for thumbnails | | PNG (24-bit, no compression) | ~1.95 MB | 4.76x | 1.0x | Lossless (exact pixel match) | | PNG (24-bit, max compression) | ~880 KB | 2.15x | 0.45x | Lossless (exact pixel match) | | SVG (this image, vectorized) | ~12 KB | 0.03x | 0.006x | Lossless (resolution-independent) | For a single photograph, the format choice is a **20-30x lever on file size with no visible quality difference** (between JPG 85 and AVIF 40). For a 10-image gallery, that's the difference between a 4 MB page and a 200 KB page. Both render identically. Google's Core Web Vitals specifically penalize the 4 MB version on LCP and CLS — the format choice is not just a tooling preference, it's a search ranking factor. The PNG row is important. PNG is lossless, which sounds great, but the size penalty is 4-9x the equivalent JPG. For a UI screenshot or a logo, PNG is correct (the lossless guarantee matters when sharp edges are part of the design). For a photograph, PNG is a 4-9x cost for no visible benefit — the JPG's lossy compression is invisible at quality 80+ on a photograph, where the human eye can't distinguish it from the original. ## Browser support, honestly Real compatibility numbers as of mid-2026 (from caniuse, Chromium market share ~70%, Safari ~17%, Firefox ~3%, Edge ~5%, all evergreen): | Format | Chrome | Firefox | Safari | Edge | Effective global | | --- | --- | --- | --- | --- | --- | | PNG | all | all | all | all | ~100% | | JPG | all | all | all | all | ~100% | | WebP | since v23 (2012) | since v65 (2019) | since v14 (2020) | all | ~98% | | AVIF | since v85 (2020) | since v93 (2021) | since v16 (2022) | all | ~95% | | HEIC (as image) | only on macOS Safari | no | macOS only | no | ~20% | | SVG | all | all | all | all | ~100% | The right strategy for the web in 2026 is WebP as the default, with AVIF as a progressive enhancement (serve AVIF first if the browser supports it, fall back to WebP, fall back to JPG). That gives you AVIF's 30% size win for ~95% of users and the same experience as WebP for the rest. The `` element handles this cleanly: ``` ... ``` That's the full optimal format delivery in 10 lines of HTML. The browser picks the first source it supports and falls back gracefully. Combined with the size numbers above, this is the single highest-ROI performance change for a content-heavy site. ## Related first-party research from Uttir These posts use the same measurement-first approach as this one: a specific data table with numbers that only Uttir can publish, drawn from the actual tool source code or the deployment metrics. - [Compression: 78% smaller](/blog/best-free-image-compression-tools-in-2026-no-upload#by-the-numbers-what-compression-actually-buys-you) - [QR error-correction levels](/blog/8-clever-uses-for-qr-codes-you-havent-tried#by-the-numbers-how-much-data-a-qr-code-actually-holds) ## Further reading Primary source: [MDN — Image file types and formats](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types). ## Key takeaways - PNG — the lossless one - JPG — the photo one - WebP — the web default - AVIF — the new best - HEIC — the iPhone one ## Frequently asked questions ### Is this free to use? Yes. The tools and guides on Uttir are free to use, with no signup, no paywall, and no feature gating. There is no email gate, no trial period, and no premium tier. The site is supported by unobtrusive on-page ads that never interfere with the tool itself. ### Do I need to sign up or create an account? No. Uttir does not have accounts, login, or email signup. Open the tool or the post and use it. ### Does this upload my data to a server? Uttir processes your data entirely in your browser using JavaScript. Your text, files, and inputs are never uploaded to a server. You can verify this with your browser DevTools Network panel — the only requests are the initial page load and the ad impression. ### What tool should I use after reading this? The most relevant tool on Uttir for this is the Image Compressor at [/image-compressor](/image-compressor). Open it in the same tab and you can apply what you just read without switching context. ## Related tools - [Image Compressor](https://uttir.com/image-compressor) — Shrink image file size with quality and format control, and see the savings before you download. - [Image Resizer](https://uttir.com/image-resizer) — Resize images to exact pixel dimensions with optional aspect-ratio lock. - [HEIC to JPG](https://uttir.com/heic-to-jpg) — Convert iPhone HEIC photos to JPG right in your browser — fast and completely private. - [Color Picker from Image](https://uttir.com/image-color-picker) — Upload an image and click any pixel to get its HEX, RGB, and HSL color. Works entirely in your browser — your image never leaves your device. --- For the full HTML article, visit https://uttir.com/blog/a-field-guide-to-image-formats-in-2026. This file is the markdown rendering at https://uttir.com/blog/a-field-guide-to-image-formats-in-2026.md. See https://uttir.com/llms.txt for a site-wide summary.