# Image formats: JPEG, PNG, WebP, and AVIF — when to use each Источник / Source: https://picwin.co/en/blog/image-formats-jpeg-png-webp-avif Язык / Language: en Рубрика / Topic: Technology Автор / Author: The Picwin editors Опубликовано / Published: 2026-03-17T00:00:00.000Z Обновлено / Updated: 2026-09-03T11:17:26.468Z Слов / Words: 1620 · Чтение / Reading: 9 min Обложка / Cover: https://picwin.co/api/picwin/blog-images/3a60d278042f1a5b4a7eff963c7ad53cc8deb4f1dad4fc90802351179054e607.webp Переводы / Translations: kk: https://picwin.co/kk/blog/suret-formattary-jpeg-png-webp-avif, pt: https://picwin.co/pt/blog/formatos-de-imagem-jpeg-png-webp-avif, ru: https://picwin.co/blog/formaty-izobrazheniy-jpeg-png-webp-avif, uz: https://picwin.co/uz/blog/tasvir-formatlari-jpeg-png-webp-avif Four formats cover nearly every use case, but the choice should depend on four properties rather than habit: lossy compression, transparency, animation, and support. We compare their capabilities, measured file sizes at equal quality, and a practical migration path. --- **In short** Serve photographs as WebP or AVIF and keep JPEG as a fallback. Use PNG for graphics with sharp edges and transparency, or preferably SVG when the artwork is vector-based. In our measurements, AVIF had a median size of 66 KB at equal quality versus 119 KB for JPEG, but it takes longer to encode and needs a fallback through the `picture` element. Asking whether JPEG or PNG is “better” misses the point: they are tools for different jobs. Choose a format by four properties, all of which can be checked. ## How do image formats differ? In four ways: whether compression discards data, whether transparency and animation are supported, and how widely the format can be opened. **Lossy compression** removes information to reduce file weight, and that information cannot be recovered. It suits photographs, where the eye overlooks small losses in tonal detail, but not screenshots, where every letter forms a hard edge. **Lossless compression** restores the file byte for byte. It is essential for flat-colour graphics, but makes photographs several times heavier. Format Compression Alpha JPEG lossy only no PNG lossless only yes WebP both yes AVIF both yes Logos, icons, and cut-out objects need transparency. JPEG’s lack of it is not a minor inconvenience: an isolated object must be placed on a solid background in the hope that the page background never changes. ## When is JPEG still the right choice? When a file must open anywhere: in an old email client, a decade-old CRM, or a print shop. Everything understands JPEG, so it remains a sensible fallback inside `picture`. Remember two things about JPEG. It is eight-bit and has no alpha channel, so gradients can band and transparency is impossible. It also almost always uses 4:2:0 chroma subsampling, storing colour at half resolution. That is unnoticeable in a photograph but very obvious in red text on white. ## When do you need PNG? When an image has hard edges and flat fills: screenshots, interfaces, diagrams, logos, and anything containing text. PNG preserves them losslessly and supports transparency. PNG has an underrated palette mode. An image containing a few dozen colours, saved with a 64-colour palette, can be many times smaller than a full-colour version while looking identical. For icons and simple diagrams, it is the best compromise when vector output is unavailable. What PNG cannot do is compress a photograph efficiently. The same frame is an order of magnitude heavier than JPEG: in our measurements, a reference PNG 1200 pixels wide occupied 1–2 MB where JPEG needed 58–213 KB. ## What does WebP offer? WebP is a compromise supported by every current browser. It provides lossy and lossless compression, transparency in both modes, and animation. One detail matters for print and editing workflows: lossy WebP is eight-bit with 4:2:0 subsampling, while lossless WebP uses 8-bit ARGB. The format also has a hard size ceiling of **16 383 pixels** per side. That is a real constraint for panoramas and large-format canvases. ## What does AVIF offer, and what is the catch? AVIF is based on the AV1 video codec and compresses photographs considerably more tightly. It supports transparency, animation, wide colour gamut, and depth up to 12 bits. Its size limit is practically unreachable: 2 147 483 647 pixels per side, the same as PNG. There are two catches. First, encoding time: AVIF takes several times longer than JPEG, which matters for a large library. Second, support outside browsers is inconsistent; old editors, messengers, and internal systems may not open it. That is why [MDN’s image type documentation](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types) recommends serving AVIF through `picture` with a fallback. Format Side limit, px Animation JPEG 65 535 no PNG 2 147 483 647 no WebP 16 383 yes AVIF 2 147 483 647 yes These limits come from the same MDN documentation. They rarely matter, but when they do, the limit tends to appear unexpectedly. ## How much do file sizes differ? As much as the subject allows: smooth sky may compress three times better than foliage. So “AVIF is 50% lighter” means little without the actual frame. Test your own material; here is our method. We took eight photographic frames from the catalogue, resized each to 1200 pixels wide, and saved a reference PNG. For each format, we then found the lowest quality at which the SSIM difference from the reference did not exceed 0.02. In other words, we compared equal measured quality rather than identical numbers in a “quality” field. Format Median Range Lossless PNG 1.4 MB 1.0–2.0 MB JPEG 119 KB 58–213 KB WebP 97 KB 33–194 KB AVIF 66 KB 16–130 KB The range matters more than the median. Across eight frames, AVIF was 45% lighter than JPEG on average and WebP 22% lighter, but the extremes differed twofold. AVIF saved 39% against JPEG on a noisy night-city frame and 73% on a business scene with an even light background. You can repeat the measurement with three ImageMagick commands: `magick photo.jpg -resize 1200x -strip ref.png magick ref.png -quality 60 out.avif magick compare -metric SSIM ref.png out.avif null: ` Adjust quality until the difference approaches your chosen threshold, then compare the resulting file sizes. Our guide to [fast images for websites](/en/blog/fast-images-for-websites) explains how file weight translates into loading time. ![Two columns compare the properties of established JPEG and PNG with modern WebP and AVIF](/api/picwin/blog-images/69858f1146edffcd21c994ee730b9e52bb9b21a42d367f12fa1969220c062ce8.webp) Modern formats reduce file weight, but the markup still needs a fallback. ## WebP or AVIF? ### WebP Encodes quickly and opens almost everywhere, including many desktop applications. Transparency and animation are supported. The side limit is 16 383 pixels. It is a sensible default for a large library that is rebuilt frequently. ### AVIF Compresses more tightly: a median of 66 KB versus 119 KB for JPEG on the same frames. It supports wide gamut and 12 bits. Encoding takes several times longer, and files do not always open outside browsers, so a fallback is required. ## How do you migrate a library to modern formats? - ### Separate images by type Put photographs in one list and graphics with hard edges or transparency in another. They require different rules. - ### Keep originals untouched Always create derivatives from the original. Converting an already compressed file cannot “improve” it. - ### Build the variants For photographs, create AVIF and WebP with JPEG as fallback. For graphics, use SVG if vector-based; otherwise choose PNG with a reduced palette. - ### Declare the choice in markup Use `picture` with several `source` elements. The browser takes the first format it understands and ignores the rest. - ### Spot-check weight and quality About ten varied frames are enough: smooth backgrounds, fine textures, and high-contrast graphics. - ### Keep a way back A link in an email, a partner export, or a print-shop file should still be JPEG or TIFF, not AVIF. ## What about GIF and SVG? GIF has had its day: 256 colours and a side limit of 65 536 pixels. Its remaining use, short animation, is handled better by WebP, AVIF, or ordinary video. SVG stands apart because it describes shapes rather than pixels. Logos, icons, diagrams, and charts scale without loss and occupy only a few kilobytes. The rule is simple: if an image was drawn rather than photographed, start with SVG. A format cannot fix the wrong dimensions A 3000-pixel-wide frame placed in a 400-pixel slot remains heavy in every format. Choose dimensions first and format second, not the other way around. ## What does this mean when working with a stock library? A stock file arrives in a format convenient for storage, not necessarily for your page. Treat it as a source from which to create variants for a specific placement. Picwin covers and previews are delivered as WebP, and the storefront declares every image type so the browser does not have to guess. [IllustrationIllustrations and graphics are the part of the catalogue most likely to need vector output or transparent PNG. See the works](/en/category/illustration)[TexturesTextures and backgrounds compress especially well when smooth, making format differences particularly easy to see. See the works](/en/category/textures) **Key takeaways** - Choose by four properties: loss, transparency, animation, and support. - Use WebP or AVIF for photographs with JPEG fallback; use SVG or, failing that, PNG for graphics. - At equal quality, AVIF was 45% lighter than JPEG and WebP was 22% lighter. - WebP has a 16 383-pixel side limit; AVIF’s practical limit is effectively unreachable. - Savings depend on the subject, so measure your own frames. Need a ready-made frame for your task? In the Picwin mini app, an image is created to a brief and arrives ready for the storefront; you only need to choose the format for its place on the page. [Open the mini app](/en/partners) ### Which is better, WebP or AVIF? AVIF compresses more tightly; WebP encodes faster and opens in more applications. A practical setup serves both through `picture` and keeps JPEG as fallback. ### Can we stop using JPEG now? Almost on websites, but not elsewhere. Email, exports, print shops, and internal systems still rely on JPEG and TIFF. ### Does converting JPEG to WebP reduce quality? Yes, when saving lossily. Existing artefacts remain and new ones are added. Convert from the original, not an already compressed copy. ### Why is a PNG photograph ten megabytes? Because PNG compresses losslessly. For photographs that means retaining nearly every shade; our reference PNGs were already 1–2 MB at 1200 pixels wide. ### Which format should I use for a logo? SVG if a vector exists. Otherwise use transparent PNG; at small sizes, a 64-colour palette is enough. ### Do all browsers support AVIF? Current versions of major browsers do, but support outside browsers is uneven. That is precisely why MDN recommends a fallback through `picture`. ### What is 4:2:0 chroma subsampling, and when is it a problem? It stores colour at half resolution. It is invisible in photographs but creates dirty edges around coloured text and fine coloured lines; use PNG or lossless compression there. Continue with [dimensions and resolution](/en/blog/image-size-resolution-and-dpi), [preparing images for a fast website](/en/blog/fast-images-for-websites), and [preparing images for print](/en/blog/preparing-images-for-print). Browse finished work in the [catalogue](/en/catalog).