search⌘KtranslateENexpand_moreupload_fileConvert

concepts / image format

What is Image Format?

Q: What is the best image format?

It depends on use: JPEG for photos, PNG for transparent graphics, WebP for web optimization, SVG for scalable logos.

Q: What image format is best for web?

WebP for photographs (25-35% smaller than JPEG). PNG for transparent graphics. SVG for icons and logos.

Q: What image format is best for printing?

TIFF or high-quality JPEG for photographs. PDF or EPS for vector graphics. PNG for graphics with transparency.

Q: Should I save images as PNG or JPG?

JPG for photographs (smaller files). PNG for screenshots, logos, or images with transparency (sharper quality).

Q: What is the difference between raster and vector images?

Raster images (JPEG, PNG) store pixel data. Vector images (SVG, AI) store mathematical paths that scale perfectly to any size.

The format is a set of promises.

An image format decides what a file can hold (transparency, animation, extra brightness range), how it shrinks the pixels, and who can open it. Pick what your picture needs, and the list on the right ranks ten formats and tests each one in your browser.

THE PICTURE IS

PhotoLogo or drawingScreenshot

IT MUST

blur_onKeep transparencyanimationMove (animate)hdr_onKeep HDR / 16-bitopen_in_fullScale to any sizepublicOpen anywherecompressBe as small as possible

RANKED FOR YOUR PICTURETESTED IN YOUR BROWSER

1JPEG.jpg .jpegOpens everywhere; blurs sharp edges and has no transparency.opens herebrowser writes it

2WebP.webpLossy or lossless, with transparency and animation; all current browsers, some older apps refuse it.opens herebrowser writes it

3AVIF.avifSmallest photos and HDR, from the AV1 video codec; slow to encode, newer software only.no test filecan’t write it

4PNG.pngExact pixels and full transparency; photos come out large. Animation only as APNG.opens herebrowser writes it

5GIF.gifAnimation that plays anywhere; only 256 colours per frame and on/off transparency.opens herenot written here

6JPEG XL.jxlStrong on both photos and graphics, can repack JPEGs losslessly; few browsers open it.no test file

7HEIC.heicThe iPhone camera default; small and 10-bit, but rarely opens outside Apple software.no test file

8BMP.bmpRaw, uncompressed pixels from early Windows; no reason to choose it today.opens herenot written here

9TIFF.tif .tiffPrint and archive master: 16-bit, layers, CMYK. Huge, and browsers mostly cannot show it.won’t open herenot written here

10SVG.svgShapes and text, not pixels: sharp at any size. Useless for photos.opens herenot written here

The first bytes say which format, and how big.

Software doesn't trust the file extension. It reads a signature at the start, then finds the width and height, which every format stores in a different place and byte order. Your browser just saved the same 640 × 427 picture in each format it can write; these are the real bytes.

signaturewidthheightother bytes37 × 23640 × 4274000 × 3000

JPEG5,282 bytesFF D8 starts the file. The size sits in the SOF marker after the tables, height first, as 2-byte big-endian numbers, so a JPEG can never exceed 65,535 px.read back: 640 × 427 ✓

bytes 0-15

ffd8ffe000104a464946000101000001

bytes 630-642

2828ffc000110801ab02800301

PNG260,196 bytesEight-byte signature, then the IHDR chunk: width and height as 4-byte big-endian numbers.read back: 640 × 427 ✓

bytes 0-15

89504e470d0a1a0a0000000d49484452

bytes 16-25

00000280000001ab0806

WebP2,866 bytesRIFF ... WEBP, then a VP8X header: canvas width − 1 and height − 1 as 3-byte little-endian numbers.read back: 640 × 427 ✓

bytes 0-15

524946462a0b00005745425056503858

bytes 22-31

00007f0200aa01004943

BMP819,894 bytes"BM", then the DIB header: width and height as 4-byte little-endian signed numbers. A positive height means rows are stored bottom-up.read back: 640 × 427 ✓

bytes 0-15

424db6820c0000000000360000002800

bytes 16-27

000080020000ab0100000100

What each format can hold

formatsignaturecompressiontransparencyanimationbits per channelyearlargest size

JPEGFF D8 FFlossy (DCT)nono8 (12 rare)199265,535 px

PNG89 50 4E 47 0D 0A 1A 0Alossless (DEFLATE)full alphaAPNG extension1, 2, 4, 8, 1619962³¹ − 1 px

GIF47 49 46 38 39 61lossless (LZW), 256 colourson/offyes8 (palette)198765,535 px

WebPRIFF … WEBPlossy or losslessfull alphayes8201016,383 px

AVIF…ftypaviflossy or lossless (AV1)full alphayes (sequence)8, 10, 12201965,536 px per tile, grids larger

HEIC…ftypheiclossy (HEVC)full alphayes (sequence)8, 102015grids of tiles

JPEG XLFF 0A or …JXL lossy or losslessfull alphayesup to 32 (float)20211,073,741,823 px

SVG<svg (text)none (gzip as .svgz)full alphayes (SMIL, CSS)n/a (vector)2001unlimited

TIFF49 49 2A 00 or 4D 4D 00 2Anone, LZW, ZIP, JPEG…full alphano (pages)1-32, float19864 GB file (BigTIFF more)

BMP42 4Dnone (RLE rare)V4/V5 headers onlyno1-3219902³¹ − 1 px

Change or inspect a format

Image ConverterChange any picture into eight formats and see what each one keeps or drops.logo.webparrow_forwardlogo.png PixelWhat every format is ultimately storing: a grid of numbers.#0d9488arrow_forward0d 94 88 ff HEIC to JPGTurn iPhone photos into a format every app opens.IMG_0412.heicarrow_forwardIMG_0412.jpg PNG formatOpen a PNG and read every chunk, CRC and filter.logo.pngarrow_forwardIHDR · IDAT · IEND

SOURCES

[1]ITU-T T.81 / ISO/IEC 10918-1: JPEG [2]W3C: Portable Network Graphics (PNG) Specification, 3rd edition [3]RFC 9649: WebP image format [4]AOMedia: AV1 Image File Format (AVIF)[5]WHATWG MIME Sniffing: matching an image type pattern [6]ISO/IEC 18181: JPEG XL overview (jpeg.org)

Frequently Asked Questions

What is the best image format?

It depends on use: JPEG for photos, PNG for transparent graphics, WebP for web optimization, SVG for scalable logos.

What image format is best for web?

WebP for photographs (25-35% smaller than JPEG). PNG for transparent graphics. SVG for icons and logos.

What image format is best for printing?

TIFF or high-quality JPEG for photographs. PDF or EPS for vector graphics. PNG for graphics with transparency.

Should I save images as PNG or JPG?

JPG for photographs (smaller files). PNG for screenshots, logos, or images with transparency (sharper quality).

What is the difference between raster and vector images?

Raster images (JPEG, PNG) store pixel data. Vector images (SVG, AI) store mathematical paths that scale perfectly to any size.