JPG vs PNG vs WebP vs AVIF: The Complete Guide to Image Formats and Resizing

Every image you post, upload or send has two hidden properties that decide how good it looks and how heavy it is: its format (JPG, PNG, WebP and so on) and its size in pixels. Pick the wrong format and your logo gets a fuzzy halo or your photo weighs ten times what it should. Resize it badly and fine detail turns into jagged lines or mush.

This guide explains how the common image formats work, where each came from, which one to use where, and what actually happens to the pixels when you resize, including how resizing differs for each format. The measurements in it come from real tests in a web browser, and you can apply everything with our free Social Media Image Resizer.

Pixels, resolution and colour: the basics

• Raster images (photos, screenshots) are grids of coloured dots called pixels. A 1080 × 1080 image has 1,166,400 of them. Raster images lose quality when enlarged, because there is no extra detail to show.
• Vector images (SVG logos, icons) store shapes as maths: lines, curves and fills. They can be scaled to any size and stay perfectly sharp.
• Colour depth: most images store 8 bits per colour channel (red, green, blue), giving about 16.7 million colours. An optional fourth alpha channel stores transparency.
• Colour models: screens mix light in RGB; printers mix ink in CMYK. JPEG internally converts to YCbCr, separating brightness from colour, because our eyes notice brightness detail far more than colour detail.
• Resolution vs DPI: on screens only pixel dimensions matter. DPI (dots per inch) matters only for print: a 4 × 6 inch print at 300 DPI needs 1200 × 1800 pixels.

Lossy vs lossless image compression

Lossless formats (PNG, GIF, lossless WebP) store every pixel exactly. Lossy formats (JPEG, lossy WebP, AVIF, HEIC) throw away detail your eyes are unlikely to notice in exchange for much smaller files. Our file compression encyclopedia explains the underlying techniques. Here is what that difference means in practice. We encoded a flat logo-style graphic (1200 × 630, solid colours and text) in Chromium, the engine behind Chrome and Edge, and compared every pixel with the original:

Even at high quality, JPEG altered about a fifth of the pixels, mostly around text and edges, where it creates faint smudges and ripples. PNG kept every pixel exact. That is the real reason to use PNG for logos, screenshots and text, more than file size.

Every common image format, explained

JPEG (.jpg, .jpeg)

History: created by the Joint Photographic Experts Group and standardised in 1992, JPEG made digital photography and the image-filled web possible. How it works: the image is converted to brightness and colour channels, and the colour channels are usually stored at reduced resolution (chroma subsampling). The image is then cut into 8 × 8 pixel blocks, each block is turned into frequency components (a discrete cosine transform), fine detail is rounded away according to the quality setting, and the result is packed with Huffman coding. Strengths: tiny files for photos, and universal support. Weaknesses: no transparency; blocky artefacts at low quality; ringing around sharp edges and text; and generation loss, because every re-save loses a little more.

PNG (.png)

History: created in 1996 as a free replacement for GIF, after patent claims on GIF's LZW compression. How it works: each row of pixels is first "filtered" (predicted from its neighbours), then compressed losslessly with DEFLATE, the same method as ZIP. It supports full-colour images, palette images of up to 256 colours, and a full alpha channel for smooth transparency. Strengths: pixel-perfect, crisp text and edges, real transparency. Weaknesses: photos become very large: our photo-like test image was 1.59 MB as PNG versus 200 KB as JPEG.

GIF (.gif)

History: introduced by CompuServe in 1987; the 1989 version (GIF89a) added animation and simple transparency. How it works: a palette of at most 256 colours, compressed losslessly with LZW. Strengths: animation that plays everywhere. Weaknesses: 256 colours make photos grainy ("dithered"), transparency is only on/off, and animated GIFs are huge compared with video or animated WebP.

WebP (.webp)

History: released by Google in 2010, based on the VP8 video codec; lossless mode, transparency and animation followed. Google reported lossy WebP files 25–34% smaller than comparable JPEGs, and every major browser supports it, Safari since 2020. How it works: lossy WebP predicts each block from its neighbours and stores only the difference; lossless WebP uses its own set of tricks such as colour caching and backward references. Strengths: one format for photos, graphics, transparency and animation, with small files. In our tests it was the smallest of the formats the browser could encode. Weaknesses: some older software and many print workflows still expect JPEG or PNG.

AVIF (.avif)

History: published in 2019 by the Alliance for Open Media, using the AV1 video codec, and supported in Chrome (2020), Firefox (2021) and Safari (2022). Strengths: often the smallest files for photos at good quality, with support for HDR and wide colour. Weaknesses: slow to encode, and not every tool can create it. The Chromium version we tested could display AVIF but could not encode it from a canvas; it silently fell back to PNG.

HEIC / HEIF (.heic)

History: Apple made HEIC the default iPhone photo format in 2017 (iOS 11). It uses the HEVC video codec, which Apple said stores photos at about half the size of a comparable JPEG. Weaknesses: limited support in web browsers and on many websites, so phones usually convert HEIC to JPEG when sharing. If a website rejects your photo, this is often why.

SVG (.svg)

History: a W3C standard since 2001. How it works: a text (XML) description of shapes, paths, text and colours, drawn by the browser at whatever size is needed. Strengths: perfectly sharp at every size, tiny for logos and icons, and editable in code. Weaknesses: unsuitable for photos, and because SVG files can contain scripts, websites must handle uploaded SVGs carefully.

TIFF and BMP

TIFF (1986, Aldus) is the workhorse of scanning, printing and archiving. It can be uncompressed or losslessly compressed, holds multiple pages and high bit depths, and produces very large files. BMP is the old Windows bitmap, usually uncompressed. Both are best converted to PNG or JPEG for sharing online.

Newer formats

JPEG XL, standardised in 2022, offers excellent compression and can losslessly repackage existing JPEGs at a smaller size, but browser support is still limited. Watch this space.

Which format should you use, and where?

How image resizing works

Resizing (also called resampling) means calculating a new grid of pixels from the old one. When you shrink an image, many old pixels must be combined into each new pixel. When you enlarge it, new pixels must be invented between the old ones. The method used to do this is called an interpolation filter:

• Nearest neighbour: each new pixel copies the closest old pixel. It is fast and keeps hard edges, ideal for pixel art, but it produces jagged edges and can drop detail completely when shrinking.
• Bilinear: blends the four nearest pixels. Smooth, but slightly soft.
• Bicubic: blends sixteen nearby pixels with a smarter curve. Sharper, and the long-time default in photo editors.
• Lanczos: uses a wider window for the sharpest downscaling, at the cost of slight ringing near hard edges.

The difference is not subtle. We drew a test pattern of alternating 1-pixel black and white stripes and shrank it to a quarter of its width in the browser:

That vanishing act is called aliasing. On real photos it shows up as jagged edges, shimmering patterns (moiré) on fabrics and screens, and missing fine lines. Good resizers filter the image as they shrink it. Our Image Resizer uses the browser's highest-quality smoothing setting.

Shrinking vs enlarging

Shrinking is safe: detail is averaged, and a light sharpening afterwards can restore crispness. Enlarging cannot create real detail. The software can only blend existing pixels, so images become soft or blurry. AI upscalers produce sharper-looking results by guessing plausible detail, which is fine for decoration but not for evidence or documents. Always start from the largest original you have.

Aspect ratio: fit, fill or stretch

When the target shape differs from your image, a square post from a landscape photo for example, you have three choices: crop (fill the frame and lose the edges), fit (show everything with empty bars around it), or stretch (distort people and text, almost never what you want). Our resizer locks the crop box to the exact target shape, so you choose what to keep.

How resizing works for each format

For every pixel-based format, resizing follows the same three steps: decode the file into raw pixels, resample the pixels to the new size, and encode them back into a file. What changes is what each format does to your image in the first and last steps.

Resizing JPEG

The JPEG is decompressed (with its existing artefacts), resampled, then compressed again, which loses quality a second time. Keep re-saving to the minimum: resize once from the original, and choose a quality of about 80–92%. Our test photo-like image was 200 KB at 92% and 85 KB at 80%, against 1.59 MB as PNG. Two practical details matter. Phone photos store their rotation in hidden metadata, called EXIF orientation, which a good resizer applies so photos don't come out sideways. And browsers don't copy EXIF metadata (including GPS location) into newly encoded images, so a resized copy usually no longer reveals where the photo was taken.

Resizing PNG

PNG decodes and re-encodes losslessly, so the only change is the resampling itself. Smoothing creates new in-between colours, so a palette PNG (256 colours or fewer) may become a larger full-colour PNG. Transparent edges need careful handling, otherwise dark or light fringes appear. If you export a transparent PNG as JPEG, the transparency has to become a solid colour. With a plain browser canvas, Chromium turns fully transparent pixels black. Our Image Resizer, Hue Shift Generator and Image Splitter place the image on a white background before saving a JPEG, so transparent areas become white instead. To keep the transparency itself, export as PNG.

Resizing GIF

An animated GIF is many frames, and each one must be resized, then reduced back to 256 colours, which can add grain. Many simple tools, including browser canvas-based ones, read only the first frame, so the animation is lost. For animations, resize with a dedicated tool or convert to video or animated WebP.

Resizing WebP and AVIF

They follow the JPEG pattern in lossy mode (decode, resample, recompress, with some extra loss) and the PNG pattern in lossless mode. Remember that some tools can read these formats but not write them, so you may need to export as JPEG or PNG.

Resizing HEIC

Most browsers and websites cannot decode HEIC at all, so it is usually converted to JPEG first, either on the phone (for example, choosing the "Most Compatible" camera setting on an iPhone) or in a desktop app, and then resized like any JPEG.

Resizing SVG

There is nothing to resample. You simply change the displayed width and height, and the shapes are redrawn sharply at the new size. Only when you need a pixel image (for a social post, for instance) do you rasterise the SVG, ideally straight at the final size, and save it as PNG.

Resizing TIFF and BMP

These are decoded to pixels and resampled like PNG. For web or social use, export the result as JPEG (photos) or PNG (graphics) instead of keeping TIFF or BMP.

Social media image sizes

These are the sizes built into our Image Resizer. Platforms change their layouts from time to time, so check the platform's own help pages for anything critical.

Resizing images for websites

• Don't upload a 4000-pixel photo to show it at 800 pixels. The browser downloads every pixel anyway. Resize to the largest size it will actually be shown.
• Allow for high-density screens. Phones and modern laptops show 2 or 3 device pixels per CSS pixel, so an image displayed 400 pixels wide looks sharpest with an 800-pixel version. HTML's srcset attribute lets the browser choose the right size.
• Use modern formats with a fallback: WebP or AVIF for most browsers, JPEG or PNG for the rest.
• Compress after resizing, not before, and keep your originals.

How to use the Image Resizer

1. Open the Social Media Image Resizer and drop in a JPG, PNG or WebP image of up to 10 MB.
2. Pick one or more sizes: platform presets for Instagram, LinkedIn, WhatsApp, Facebook, X and YouTube, or a Custom size in pixels, inches or centimetres (with 72 DPI for web or 300 DPI for print).
3. Crop: drag and zoom the crop box, which is locked to the exact shape you need, or rotate the image. Optional brightness and contrast sliders are available too.
4. Check the live preview. When you set a custom exact size, the tool warns you if it would mean enlarging the image, and flags sizes likely to look blurry.
5. Export as JPEG (default quality 92%) for photos or PNG for graphics and transparent images, and download one image or all sizes together as a ZIP.

Everything happens in your browser with the Canvas API, so your photos are never uploaded.

Common mistakes

• Saving logos and screenshots as JPEG: use PNG or SVG for crisp text and edges.
• Saving photos as PNG: in our test the PNG was about eight times larger than a high-quality JPEG, with no visible benefit.
• Exporting transparent images as JPEG: transparency turns into a solid colour (black in many browsers and tools; white in ours). Use PNG to keep it.
• Re-saving JPEGs again and again: each save loses quality. Edit from the original.
• Enlarging small images: the result will be soft. Find a bigger original.
• Stretching instead of cropping: distorted faces and logos look unprofessional.
• Confusing DPI with quality on screens: a 72 DPI and a 300 DPI image with the same pixel size look identical on a screen.

Related tools

• Image Splitter: cut one image into an Instagram grid or tiles.
• Image Color Picker: read exact HEX/RGB colours from any image.
• Hue Shift Generator: recolour an image while keeping its brightness.
• JPG to PDF: combine images into a PDF, and Compress PDF to shrink it.