Image guides
22 short, practical explanations of how image formats, compression and metadata work, and how to get things done, including what each tool can and cannot do.
Compression
Make files smaller without making them look worse, and hit the size limits of upload forms.
How to compress an image without uploading it
Make photos and graphics smaller in your browser: which preset to pick, why resizing often saves more than quality, and what compression cannot fix.
3 min read
How to reduce JPG file size
Practical ways to shrink JPEG photos: the quality range that still looks the same, why the encoder matters, resizing, and when to switch to another format.
2 min read
How to compress PNG files (and when PNG is the wrong format)
Lossless optimisation, smart palette reduction and transparency: how to make PNGs smaller, and why a photo usually should not be a PNG at all.
2 min read
Lossy vs lossless compression: how to shrink images without visible loss
What each kind of compression throws away, which formats use which, and a practical routine for making images smaller without anyone noticing.
2 min read
How to compress an image to an exact size in KB
How target-size compression works for forms that demand under 50 KB or 200 KB, why the result lands just under the limit, and what to do if it will not fit.
3 min read
Image formats
What each format is good at, where it opens, and what changes when you convert.
JPG vs PNG: which format should you use?
Photos, screenshots, logos and transparency: what JPG and PNG are each good at, how much size difference to expect, and how to convert between them safely.
2 min read
WebP vs JPG: is it time to switch?
How much smaller WebP really is, where it is supported, where it still causes trouble, and how to convert in either direction.
2 min read
WebP vs AVIF: what AVIF is and when it is worth it
AVIF often makes photos around half the size of JPEG, but it is slow to encode and not accepted everywhere. How it compares with WebP and when to use each.
2 min read
What is HEIC, and how do you open it on Windows or the web?
Why iPhones save photos as HEIC, why Windows and websites often reject them, and how to convert HEIC to JPG without uploading your photos.
2 min read
What is JPEG XL, and can you use it yet?
JPEG XL compresses better than JPEG, supports lossless and HDR, and can repack old JPEGs. Where it works today, where it does not, and how to convert.
2 min read
When to use SVG, and how to optimise it
SVG is ideal for logos, icons and illustrations and wrong for photos. When to choose it, how to make files smaller, and how to handle untrusted SVGs safely.
2 min read
Privacy
Hidden metadata, location data, redaction and face blurring, and how local processing keeps images on your device.
What is EXIF metadata, and what does it reveal about you?
Photos can carry GPS location, capture time, camera model and serial numbers. What EXIF and related metadata contain, who can see them, and how to remove them.
2 min read
How to remove GPS location from photos before sharing
Phones record where each photo was taken. How to check for location data, remove only the GPS coordinates or everything, and stop your camera adding it.
2 min read
How to check a photo before you share it
A checklist for hidden metadata, embedded thumbnails, secrets visible in screenshots and details in the picture itself, with tools that run on your device.
2 min read
How to redact a screenshot properly
Why highlighter strokes, markup layers and light blur can leak information, and how true redaction replaces the pixels so hidden text is gone for good.
2 min read
How to blur faces in a photo
Hide faces with on-device face detection, choose blur, pixelation or a solid mask, and check the result before you share it.
2 min read
How browser-based image tools work without uploading files
WebAssembly codecs, Web Workers and on-device AI: the technology that lets a web page compress, convert and edit images on your device, and how to check it.
2 min read
Websites and developers
Image sizes and formats for the web, responsive markup, inline images, favicons and link previews.
How to optimise images for a website, and how large they should be
Pixel sizes for common layouts, sensible file size budgets, the right format for each kind of image, and the loading attributes that make pages feel fast.
2 min read
Responsive images with srcset and sizes, explained
Serve the right image width to each screen: how srcset and sizes work, which widths to generate, and how picture adds AVIF and WebP with a fallback.
2 min read
Image to Base64 and data URIs: when to inline images, and when not to
What Base64 and data URIs are, the 33 percent size cost, the caching trade-off, and the few cases where inlining an image really helps.
2 min read
How to generate a complete favicon set
Which favicon files a website needs today, from favicon.ico to the Apple touch icon and web manifest icons, and how to generate all of them from one image.
2 min read
How to create an Open Graph image for link previews
The 1200 × 630 image that appears when a link is shared: recommended size, safe areas, file size, the meta tags that point to it, and how to make one.
2 min read