JPEG, GIF, PNG & RAW: What They Are and How to i Use Them

In this article I will cover the most popular photo file formats. Whether you are a professional photographer, an amateur photographer, or neither, it is important to know the differences and functions of each photo file format. So let’s take a look at them.

Digital images come in many file formats, but four names appear in almost every workflow: JPEG, GIF, PNG and RAW. Knowing how these formats differ—and when to use each—saves time, reduces file size, preserves quality and avoids frustrating re-exports. This guide explains what each format is, how it compresses data, the strengths and limitations, and the practical export settings to use for web, print and animation.

How Digital Images Work (Quick Foundations)

Every bitmap image is a grid of pixels. Each pixel stores colour values—commonly in RGB. Two technical aspects affect how formats behave:

• Colour depth: How many bits per channel an image stores (e.g., 8-bit per channel ≈ 16.7 million colours; 10/12/14-bit offer more tonal detail for editing).
• Compression: Lossy methods discard some information for smaller files (good for photos, worse for flat graphics). Lossless methods save the exact pixels (larger files but perfect fidelity).

Metadata (EXIF, colour profiles like sRGB) also travels inside the file. For the open web, sRGB is the safest colour space for consistent rendering across browsers and devices.

JPEG (Joint Photographic Experts Group)

What it is: JPEG is a lossy compression format optimised for photographs and smooth gradients. It uses techniques like chroma subsampling (reducing colour resolution more than brightness because the human eye is less sensitive to colour detail) to achieve very small files.

Strengths

• Excellent compression efficiency for photos with continuous tone and noise/grain.
• Broadest compatibility across devices, CMSs and browsers.
• Can embed EXIF, orientation and colour profile (e.g., sRGB).

Limitations

• No support for transparency or animation.
• Visible artefacts on sharp edges, text and flat colour blocks; repeated saves degrade quality further (“generation loss”).

When to use JPEG

• Photographs for the web and social media.
• Large hero images and backgrounds where transparency is not required.
• Print exports where high-quality JPEG is acceptable (posters, flyers), or when TIFF/PNG would be too heavy.

Export settings that work

• Quality: 70–85 is a good balance for the web. Increase only if you see banding.
• Progressive JPEG: Enable for nicer loading (appears blurry → sharp).
• Chroma subsampling: 4:2:0 is typical; 4:4:4 retains more colour detail at larger size.
• Resize for delivery: Send the pixels you need (e.g., 1600–2560 px wide for hero banners depending on your theme’s container).

PNG (Portable Network Graphics)

What it is: PNG is a lossless image format designed for sharp lines, clear text and transparency. It stores exact pixel values, so edges remain crisp and colours don’t smear.

Strengths

• Pin-sharp rendering of logos, UI elements, diagrams and screenshots.
• Full transparency support (alpha channel)—great for overlays and compositing.
• Lossless—re-saving does not degrade the image.

Limitations

• Larger files than JPEG for continuous-tone photos.
• No native animation (APNG is a PNG variant but not universally used outside Firefox/Safari; many tools export animated PNGs, yet GIF/WebP are more common).

PNG-8 vs PNG-24/32

• PNG-8: Up to 256 colours (like GIF), very small if your artwork is simple.
• PNG-24/32: True-colour with optional 8-bit alpha transparency—best for complex UI and graphics.

When to use PNG

• Logos, icons, UI components and diagrams that must remain razor-sharp.
• Images that need transparency (e.g., product cut-outs over backgrounds).
• Screenshots and illustrations where clarity matters more than file size.

Export settings that work

• Choose PNG-8 for small, flat-colour assets; PNG-24/32 for gradients or alpha transparency.
• Run a lossless optimiser (e.g., oxipng, ImageOptim) to remove metadata and compress palettes.

GIF (Graphics Interchange Format)

What it is: A legacy format famous for simple animation. GIF uses an indexed palette of up to 256 colours and optional frame-based animation.

Strengths

• Simple looping animations and stickers widely supported across platforms.
• Small for flat-colour art with limited palettes.

Limitations

• Colour limit (256) causes banding, dithering and heavy files for photo-like content.
• No full alpha transparency (only 1-bit “on/off” transparency).

When to use GIF

• Tiny looping animations, micro-doodles, pixel art, simple UI indicators.
• When the platform only supports GIF for animation (stickers/embeds).

Modern alternatives

• WebP/AVIF for static images or animated clips (better compression and colour);
• MP4/WebM for longer animations (video with autoplay/loop/mute behaves like an animated image but is much smaller).

RAW (Camera RAW)

What it is: RAW files (e.g., .CR3, .NEF, .ARW, .DNG) contain minimally processed sensor data from a camera. They preserve the maximum dynamic range and colour information (often 12- or 14-bit per channel), which gives you far more latitude when adjusting exposure, white balance and tone.

Strengths

• Highest image quality for editing: recover highlights/shadows, adjust white balance non-destructively.
• Flexible colour management and bit depth for professional retouching.
• Archival value: the best “digital negative” you can keep.

Limitations

• Large files that require dedicated software (Lightroom, Capture One, Darktable, etc.).
• Not intended for direct sharing on the web; export to JPEG/PNG/TIFF for delivery.
• Camera-specific RAW variants; long-term archiving often uses DNG or TIFF.

Typical workflow

1. Shoot in RAW (plus JPEG if you need instant previews).
2. Import into a RAW editor; apply exposure, white balance, profile, lens corrections and noise reduction.
3. Export delivery files: JPEG for web/social, TIFF/PNG for print or further composite work.

Choosing the Right Format (Real-World Scenarios)

• Portfolio photography page: Responsive JPEG exports at 70–85 quality; add srcset for multiple widths.
• Logo on transparent header: PNG-24 with alpha transparency for clean edges.
• App UI icons: PNG-8 or SVG when available (SVG is vector and ideal for simple shapes).
• Simple animated “loading” indicator: small GIF or CSS animation; for complex loops, use MP4/WebM.
• Product photos with background: JPEG; if you need cut-outs over varied backgrounds, export PNG with alpha.
• Studio shoot bound for heavy retouch: capture RAW, edit, deliver JPEG/TIFF.

Exporting for the Web

Optimisation keeps pages fast without sacrificing quality. A practical sequence:

1. Resize to the actual display width your theme uses (e.g., 1200–1600 px for content images, 2000–2560 px for full-width hero banners).
2. Choose format with the above rules: photos → JPEG, crisp graphics/transparency → PNG, tiny loops → GIF/MP4/WebP.
3. Set quality: JPEG 70–85, PNG lossless with optimisation, GIF limited palette.
4. Embed profile as sRGB for colour consistency across devices.
5. Use responsive images (srcset and sizes) so mobile devices don’t fetch desktop-sized files.
6. Lazy-load below-the-fold images to improve Largest Contentful Paint (LCP).

Exporting for Print

Print needs high-quality source files and the right profile. Use the printer’s instructions; common practice includes:

• File type: High-quality JPEG or TIFF (TIFF supports lossless options and layers).
• Resolution: 300 ppi at final print dimensions. (PPI is about pixel density at print size; it doesn’t matter for the web.)
• Colour: Convert to the printer’s recommended profile if required; otherwise supply sRGB and let the RIP handle conversion.

Common Mistakes—and How to Fix Them

• Using PNG for all photos: Switch to JPEG at 70–85 quality; your pages will load faster with no visible difference.
• Logo looks fuzzy on retina displays: Export 2× and 3× PNGs (or use SVG) and reference them with srcset.
• Banding in gradients: Increase JPEG quality slightly or add a tiny amount of noise/dither to the gradient layer.
• Massive animated GIFs: Convert to MP4/WebM loop or animated WebP.
• Wrong colours online: Ensure exports are in sRGB; strip embedded CMYK profiles for web delivery.
• Saving JPEG repeatedly: Keep an editable master and export fresh copies to avoid cumulative artefacts.

FAQ

Is WebP or AVIF better than JPEG/PNG? Often, yes—both can be smaller for equivalent quality. However, JPEG/PNG remain universal and are easy to manage in any CMS. Many sites serve WebP/AVIF with fallbacks automatically via CDNs or plugins.

Can I get transparent backgrounds in JPEG? No—use PNG or WebP for transparency.

Should I always shoot RAW? If storage and workflow allow, yes for maximum editing flexibility. For quick sharing and smaller files, shoot JPEG + RAW or just JPEG when speed matters most.

Conclusion

There is no single “best” format—only the most suitable one for the job. Use JPEG for photographs, PNG for crisp graphics and transparency, GIF for simple animations, and RAW for capture and heavy editing. With the right export settings and a tidy workflow, you will deliver sharp images at small sizes and keep your pages fast—exactly what users (and search engines) love.