Guide

Image formats explained: JPG, PNG, WebP, and HEIC

Understanding image formats helps you choose the right tool for each job, preserve quality, and avoid costly rework across photography, publishing, and web development workflows.

Overview

Why image formats still matter

The format you choose affects file size, visual quality, editing flexibility, and compatibility with every downstream system that touches your image.

Format choice is a chain reaction

When you select an image format, you are not just deciding how pixels are stored. You are choosing a compression philosophy, a color space behavior, a transparency model, and a compatibility profile that will follow the file through every copy, upload, conversion, and edit. The wrong choice at the source can cause banding in gradients, bloated page loads, rejected uploads, or detail loss that compounds every time the file is re-saved. Understanding the fundamentals behind each format helps you make these decisions with confidence rather than guesswork.

The compression spectrum

Image formats occupy a spectrum from lossless to lossy. At one extreme, lossless formats like PNG and TIFF preserve every pixel exactly, which is ideal for screenshots, archival storage, and images that will undergo repeated editing. At the other extreme, lossy formats like JPG and modern video codecs throw away information that the human eye is less likely to notice, trading fidelity for dramatically smaller file sizes. WebP and HEIC sit in the middle, offering both lossy and lossless modes within a single format. Knowing where your use case falls on this spectrum is the first step toward choosing the right container.

Historical context of modern formats

JPG was standardized in 1992 by the Joint Photographic Experts Group and became the backbone of digital photography, web imagery, and email attachments. PNG emerged in 1996 as a replacement for GIF, adding lossless compression, true-color support, and alpha transparency without patent restrictions. WebP was introduced by Google in 2010 and has gradually become the standard for modern web delivery thanks to superior compression ratios. HEIC, based on the HEVC video codec, was adopted by Apple in 2017 as the default iPhone format and offers roughly twice the compression efficiency of JPG. Each of these formats exists because the previous generation could not solve a specific problem, and understanding that lineage helps predict where each format excels or fails.

Format

JPG / JPEG

Lossy compression designed for photographs and complex images with continuous tone and color variation.

How JPG compression works

JPG compression is built on a mathematical transform called the Discrete Cosine Transform, which breaks the image into small frequency blocks, discards high-frequency detail that the eye is less sensitive to, and then encodes the remaining information with Huffman coding. The quality slider you see in most export dialogs controls the quantization table, which is essentially a mask telling the encoder how aggressively to discard each frequency band. At quality 90, the loss is nearly invisible. At quality 50, blocky artifacts and chroma smearing become obvious. At quality 20, the image becomes a mosaic of compression squares. This design makes JPG spectacularly efficient for photographs but fundamentally unsuited for images with sharp edges, text, or flat color regions because those high-frequency boundaries are exactly what the encoder discards.

JPG quality levels in practice

In real-world workflows, quality 80–90 is the sweet spot for web photos and social media uploads, where the file size reduction is substantial and the visual loss is acceptable on typical screens. Quality 60–70 is often used for thumbnail previews or inline images where the viewer is not zooming in. Quality 95–100 is used for print preparation and high-resolution archival copies, though even maximum quality JPG is still lossy. One critical limitation is generational loss: every time you open a JPG, edit it, and re-save as JPG, another round of compression is applied. After five or ten generations, the cumulative artifacts become visible. For this reason, always keep an original uncompressed or lossless master file and treat JPG as a final delivery format rather than an editing format.

When JPG is the right choice

JPG is the default format for photographs, camera exports, and any image where the content is continuous tone rather than sharp edges. It is the standard for social media uploads, email attachments, e-commerce product photos, blog featured images, and print-to-web workflows. If you are sharing a photo from your phone, uploading a portrait to a website, or attaching a product image to a marketplace listing, JPG is almost always the correct format because the receiving system expects it, the file size is manageable, and the visual quality is acceptable for the intended viewing distance. The only exceptions are when you need transparency, when the image contains text or logos that must remain crisp, or when the image will be edited repeatedly.

When to avoid JPG

Do not use JPG for screenshots, interface mockups, diagrams, logos, or any image containing text, because the compression will blur the edges and create mosquito artifacts around high-contrast boundaries. Do not use JPG when you need transparency, because the format does not support an alpha channel and will flatten transparent areas to a solid color, usually white or black. Do not use JPG as an intermediate editing format, because each re-save compounds quality loss. Do not use JPG for line art, flat color illustrations, or cartoon-style graphics, because PNG or SVG will produce smaller files and sharper results for those content types. If your image is a logo on a transparent background, a user interface screenshot, or a technical diagram with small text, JPG is the wrong tool for the job.

Format

PNG

Lossless compression with sharp edges, transparency support, and predictable quality across generations.

How PNG compression works

PNG uses DEFLATE compression, the same algorithm found in ZIP files, to find and eliminate repeated patterns within the image data without discarding any pixels. Before compression, PNG filters each row of pixels using a predictive strategy that turns the raw image into a difference map, which makes the data more compressible. The result is that a PNG file preserves every pixel exactly as it was in the source, which means you can open, edit, and re-save a PNG indefinitely without any quality degradation. This is why PNG is the standard for screenshots, logos, and any workflow where editing stability matters more than file size. The trade-off is that PNG files are usually larger than JPG for photographic content, and the gap widens as the photo resolution increases.

PNG transparency and color modes

PNG supports multiple color modes that affect both quality and file size. PNG-8 uses a palette of up to 256 colors, similar to GIF, and is excellent for simple graphics with limited color ranges. PNG-24 uses full 24-bit color and is the standard for screenshots and complex graphics. PNG-32 adds an 8-bit alpha channel for transparency, which is essential for overlays, drop shadows, and design assets that need to sit on variable backgrounds. The alpha channel in PNG is not binary like GIF, it is a smooth gradient from fully opaque to fully transparent, which enables soft edges and anti-aliased transparency. This makes PNG the only format among the common web formats that supports both full-color fidelity and sophisticated transparency without relying on external clipping or masking.

When PNG is the right choice

Choose PNG when your image contains text, sharp edges, logos, diagrams, or any content where edge fidelity is more important than file size. Choose PNG when you need transparency, whether that is a simple cutout or a soft gradient shadow. Choose PNG when the image will be edited repeatedly, because the lossless format means you can re-save without cumulative degradation. Choose PNG for screenshots, because the crisp text and interface elements would be destroyed by JPG compression. Choose PNG when you are creating design assets, overlays, icons, or any graphic that will be composited on top of another background. In short, PNG is the default for graphics, and JPG is the default for photos.

PNG size considerations and optimization

Because PNG is lossless, its file size is determined by the complexity of the image rather than a quality slider. A photograph saved as PNG will typically be two to five times larger than the same photo saved as JPG at quality 80. However, a simple graphic with large flat color areas can be smaller as PNG than as JPG because the lossless compression handles repetition efficiently. For web use, PNG files should be run through a lossless optimizer such as oxipng or pngcrush, which can reduce file size by 10–30% without changing a single pixel. If you are publishing PNGs on a website, consider whether the transparency is truly necessary, because removing the alpha channel and saving as PNG-24 can cut the file size in half while preserving the visual quality.

Format

WebP

Modern compression with better file sizes, broad feature support, and dual lossy and lossless modes.

WebP compression architecture

WebP was developed by Google as a unified replacement for both JPG and PNG on the web. Its lossy mode uses predictive coding and block transforms similar to the VP8 video codec, which consistently outperforms JPG by 25–35% for photographic content at equivalent visual quality. Its lossless mode uses LZ77-style dictionary coding and color cache prediction, which typically produces files 20–30% smaller than PNG for the same pixel-perfect output. WebP also supports a full 8-bit alpha channel for transparency in both lossy and lossless modes, something that no other common web format offers in a single container. This versatility means that WebP can replace both your photo JPGs and your transparent PNGs with smaller files, simplifying asset management and reducing page weight.

WebP quality and visual performance

When comparing WebP to JPG at equivalent file sizes, WebP generally preserves more fine detail and suffers less from the blocky artifacts that plague low-quality JPG exports. This is because WebP uses a more sophisticated prediction model and entropy coding system. At quality 80, a WebP file is typically 25% smaller than a JPG of the same quality, or equivalently, a WebP at quality 80 looks better than a JPG of the same file size. For web publishers, this means faster page loads, lower bandwidth costs, and better user experience, especially on mobile networks. The trade-off is that WebP encoding is slower than JPG encoding, which can matter when you are processing thousands of images in a batch pipeline. For one-off conversions in a browser tool, this delay is negligible.

When WebP is the right choice

Use WebP for any image that will be delivered through a modern web browser, because the compression savings translate directly into faster page loads and lower data usage for your visitors. Use WebP for transparent graphics when you want the smaller file size of a lossy format with the transparency features of PNG. Use WebP for responsive image sets where you are generating multiple sizes of the same asset, because the cumulative bandwidth savings across all breakpoints can be substantial. Use WebP for e-commerce product catalogs, blog galleries, and marketing landing pages where image weight is a significant portion of the total page size. Do not use WebP for long-term archival storage or as a master editing format, because the format is still evolving and not as universally supported by desktop editing tools as JPG and PNG.

WebP limitations and compatibility

While all modern browsers support WebP, some older email clients, desktop publishing tools, native mobile apps, and enterprise content management systems still reject WebP uploads. If your workflow involves sending images to systems that you do not control, you may need to keep a JPG fallback. Some social media platforms accept WebP but convert it to JPG internally, which can produce unexpected quality loss. Additionally, WebP files with alpha transparency are not universally supported in older design tools. For these reasons, the best practice is to keep your original master files in a safe format and generate WebP copies only for the final web delivery stage. This way, you can always re-export if a downstream system rejects the WebP file.

Format

HEIC / HEIF

The default iPhone format with efficient compression based on modern video codec technology.

HEIC technology and efficiency

HEIC is the file extension Apple uses for images stored in the High Efficiency Image File Format, which is based on the same HEVC video codec that powers 4K streaming. The core innovation is that HEIC treats each image as a video frame, using motion-vector-style prediction and larger transform blocks to achieve roughly twice the compression efficiency of JPG. In practice, this means an iPhone photo saved as HEIC is typically half the file size of the same photo saved as JPG, with no visible quality loss. This efficiency is why Apple switched to HEIC as the default camera format in iOS 11, allowing users to store twice as many photos in the same device storage. For mobile photography, HEIC is a clear technical win over JPG.

HEIC compatibility challenges

Despite its technical advantages, HEIC suffers from compatibility problems that JPG solved decades ago. Windows versions before Windows 10 require a paid codec extension to open HEIC files. Many web browsers cannot display HEIC natively. Social media platforms, email clients, and desktop photo tools often reject HEIC uploads outright. Some enterprise content management systems and government portals only accept JPG or PNG. When you share an HEIC image from your iPhone to someone with an older Android phone, a Windows PC, or a web-based upload form, there is a significant chance the recipient will not be able to open it. This is why Apple also offers an option to share photos as JPG automatically, even though they are stored as HEIC on the device.

When to convert HEIC

Convert HEIC to JPG when you need to share with someone who uses older software, upload to a website that does not accept HEIC, attach to an email for a broad audience, or submit to a form with restricted file type support. Convert HEIC to PNG when you need a lossless editing copy for design work, annotations, or document inclusion. Convert HEIC to WebP when you are publishing the image on a modern website and want the smallest possible file size with broad browser support. In all cases, keep the original HEIC file on your phone or in your archive, because the conversion is a one-way loss for lossy formats like JPG and WebP. The original HEIC is your master file, and the converted copies are delivery formats.

Decision

Choosing the right format: a practical decision tree

Start with the destination, then pick the format, then protect the original, and finally optimize for the specific constraints of your workflow.

Step 1: Is the image a photo or a graphic?

If the image is a photograph with continuous color, gradients, and complex detail, start with JPG or WebP as your delivery format. If the image is a screenshot, logo, diagram, icon, or any graphic with sharp edges, text, or flat color areas, start with PNG or WebP lossless. This is the single most important fork in the decision tree, because it determines whether lossy compression is acceptable. Photos tolerate lossy compression well because the discarded detail is masked by the complexity of the scene. Graphics do not tolerate lossy compression because the discarded detail is exactly the edges and text that define the image's usefulness.

Step 2: Do you need transparency?

If the image must sit on top of a variable background, overlay another design element, or have soft edges that fade into the page, you need a format with alpha channel support. PNG supports full 8-bit alpha transparency and is universally compatible. WebP also supports alpha in both lossy and lossless modes, making it the modern alternative for transparent web graphics. JPG does not support transparency at all and will flatten transparent areas to a solid color. HEIC supports alpha in some implementations but is rarely used for transparency in web workflows. If transparency is a hard requirement, eliminate JPG from consideration and choose between PNG and WebP based on your target audience's browser support.

Step 3: Where is the image going?

The destination system often dictates the format more than the content does. Social media platforms and email attachments almost universally prefer JPG. Web publishing increasingly prefers WebP with JPG fallbacks. Design tools and document editors typically accept PNG, JPG, and sometimes WebP. Print workflows usually need TIFF or high-quality JPG. Enterprise upload forms may restrict file types to JPG and PNG only. iPhone sharing sometimes requires HEIC-to-JPG conversion. Before you choose a format, check the requirements of the platform, form, or recipient. It is faster to export the right format once than to convert reactively after a rejection.

Step 4: Will the image be edited again?

If the image is a final deliverable that will not be modified, lossy formats like JPG and WebP are perfectly fine. If the image is a work-in-progress that will be cropped, annotated, color-corrected, or composited, use a lossless format like PNG or a raw camera format for the master file, and generate lossy copies only for the final delivery stage. This rule protects you from generational loss, which is the cumulative degradation that happens every time a lossy file is opened, edited, and re-saved. Professional workflows always separate the master file from the delivery files, and your personal workflow should do the same if you care about preserving image quality over time.

Step 5: Optimize for size and performance

Once you have chosen the right format, fine-tune the quality settings and dimensions for the specific destination. For web images, resize to the exact display dimensions rather than relying on browser scaling, because a 4000-pixel-wide image displayed at 800 pixels wastes bandwidth and looks softer than a native 800-pixel export. For JPG, test quality 80 as a starting point and raise or lower it based on visual inspection at the target display size. For WebP, quality 75–80 usually matches JPG quality 85–90 at a smaller file size. For PNG, run a lossless optimizer to remove unnecessary metadata and compress more efficiently. For all formats, consider lazy loading and responsive image sets if you are publishing multiple sizes on a website.

Workflow

Conversion strategy and quality preservation

Smart conversion means understanding what each format transition preserves, destroys, or transforms.

PNG to JPG: what you lose and gain

Converting PNG to JPG reduces file size dramatically for photographic content, but you lose transparency and introduce lossy artifacts. If the PNG is a screenshot or graphic, the JPG result will be blurry and larger than the PNG in some cases. Only convert PNG to JPG when the source is a photograph that was accidentally saved as PNG, or when you need a smaller file and do not need transparency. Always preview the conversion before committing, because some PNG files with subtle gradients will show visible banding when converted to JPG. If the PNG contains text, the JPG will almost always look worse regardless of quality settings.

JPG to PNG: understanding the limits

Converting JPG to PNG creates a lossless file, but it cannot restore detail that was already lost by the original JPG compression. The result is a larger file that contains the same visual artifacts as the original JPG, just without any additional loss on future saves. The real benefit of JPG-to-PNG conversion is editing stability: you can now crop, annotate, and re-save the PNG without compounding compression artifacts. This is the standard workflow for retouching a JPG photograph in a design tool. Do not expect the PNG to look better than the JPG, but do expect it to survive repeated editing without further degradation.

HEIC to anything: compatibility first

HEIC conversion is almost always driven by compatibility rather than quality. Because HEIC is already a highly efficient format, converting it to JPG usually increases the file size while reducing quality. Converting to PNG preserves quality but dramatically increases file size. Converting to WebP is the best web delivery option if the target platform accepts it. The key principle is to treat the HEIC file as your master and generate the converted copy as a disposable delivery format. Never edit the converted file and then try to convert back to HEIC, because the round-trip will degrade quality and the HEIC container will not restore what was lost.

WebP as an intermediate format

WebP is primarily a delivery format, not an editing or archival format. Converting a JPG or PNG to WebP for website use is a smart final step, but you should keep the original JPG or PNG as your master file. If you need to edit the image again, return to the original rather than editing the WebP copy. WebP is not as widely supported by desktop editing tools as JPG and PNG, and some versions of WebP have subtle color space differences that can shift the appearance of the image. Think of WebP as the shipping container, not the warehouse.

Next

Related guides

Continue with nearby image preparation decisions.

PNG vs JPG

A direct comparison of when to choose each format with detailed scenario analysis and visual quality trade-offs.

WebP for websites

When to use WebP for page weight, modern delivery, and fallback strategies for older browsers.