A digital image is a grid of pixels, and an image file is a way of storing that grid in fewer bytes. The format you pick decides how many bytes, whether detail is lost and whether you get transparency. This guide explains the trade-offs with measured numbers, and which tool to reach for.
Pixels, size and the file you start from
An uncompressed pixel takes 3 bytes (red, green, blue). A 4000 × 3000 phone photo is 12 megapixels, which is 36,000,000 bytes, about 34.3 MiB, before compression. Formats shrink that by finding patterns, which is why photos usually arrive as files of a few megabytes.
Aspect ratio is width divided by height, simplified. 1920 × 1080 reduces by 120 to 16:9 and 4000 × 3000 to 4:3. To resize without distortion, change one side and compute the other: a 16:9 image 800 wide is 450 tall. The Aspect Ratio Resizer and Image Resizer keep the ratio, the Bulk Image Resizer handles many files and the Image Dimension Inspector reads the size of an existing one.
Print size is pixels divided by pixels per inch: a 6 × 4 inch print at 300 ppi needs 1800 × 1200 pixels. A screen image has no inherent size; only its pixels matter.
Lossy versus lossless
- Lossless formats (PNG, GIF, lossless WebP) store every pixel exactly. Decoding returns the original.
- Lossy formats (JPEG, lossy WebP, AVIF, HEIC) discard detail the eye is least likely to miss, so files are far smaller but cannot be restored. A quality setting trades size for fidelity.
The formats compared
| Format | Compression | Transparency | Animation | Best for |
|---|---|---|---|---|
| JPEG | Lossy | No | No | Photographs |
| PNG | Lossless | Yes | Rarely (APNG) | Screenshots, logos, graphics with text |
| GIF | Lossless, 256 colours | 1-bit | Yes | Short simple animations |
| WebP | Both | Yes | Yes | Web images of any kind, smaller than JPEG or PNG |
| AVIF | Both | Yes | Yes | The smallest files at a given quality, HDR; slower to encode |
| HEIC / HEIF | Lossy | Yes | Yes | Phone photos (iPhone default); poor browser support |
| SVG | Vector (no pixels) | Yes | Via CSS or SMIL | Icons, logos and diagrams at any size |
Lossy compression suits natural, noisy images such as photographs. Lossless compression suits flat colours and sharp edges. We measured the same two synthetic 800 × 600 test images, each 1,440,000 bytes uncompressed:
| Format | Graphic (flat colours, sharp edges) | Photo-like (smooth with texture) |
|---|---|---|
| PNG | 7,203 bytes | 722,265 bytes |
| JPEG, quality 85 | 45,938 bytes | 70,979 bytes |
| JPEG, quality 50 | 26,980 bytes | |
| WebP lossless / lossy 80 | 2,780 bytes | 30,498 bytes |
| AVIF, quality 60 | 4,180 bytes | 31,491 bytes |
On the flat graphic, PNG is about 6 times smaller than JPEG, and JPEG would also smear the sharp edges. On the photo-like image the situation reverses: JPEG at quality 85 is about 10 times smaller than PNG, and WebP and AVIF at similar quality are smaller still. Your own files will differ, but the pattern holds.
Converting between formats
Use the converter that matches your starting point: JPG to PNG Converter, PNG to JPG Converter, JPG to WebP Converter, PNG to WebP Converter, WebP to JPG Converter, WebP to PNG Converter, HEIC to JPG Converter, AVIF to JPG Converter and SVG to PNG Converter. Converting to a lossy format always loses detail, and converting lossy to lossless does not bring it back, it just makes a bigger file. Collect photos into a document with the Image to PDF Converter and pull pages back out with the PDF to Image Converter.
To embed a small image directly in HTML or CSS, encode it with the Image to Base64 Converter (and reverse it with the Base64 to Image Converter). Base64 turns every 3 bytes into 4 characters, so the data is 33.3% larger; reserve it for tiny icons.
Editing without wasting quality
Every save as JPEG recompresses, so do all your edits first and export once. Keep an original. Tools that change pixels: Image Cropper, Image Rotator, Image Flipper, Image Splitter, Image Collage Maker, Image Watermark Adder and Profile Picture Maker. Reduce file size with the Image Compressor. Visual effects: Image Blur Tool, Image Brightness & Contrast Adjuster, Image Grayscale Converter, Image Pixelator and the Image to ASCII Art Converter.
Special cases
- Vector graphics (SVG) are described by shapes, so they scale to any size. Shrink them with the SVG Optimizer.
- Favicons need several small sizes; the Image to Favicon Generator makes the set.
- Text in an image can be read back with the Image to Text OCR.
- Placeholders during development come from the Placeholder Image Generator.
- Colours inside an image: see How Color and Contrast Work.
Common mistakes
- Saving a screenshot as JPEG. Text gets fuzzy halos and the file is larger; use PNG or lossless WebP.
- Saving a photo as PNG. The file is many times larger than it needs to be.
- Upscaling a small image. It adds pixels, not detail.
- Ignoring metadata. Photos can carry location data; see How EXIF Photo Metadata Works.