Guides
7
HEX, RGB and HSL: one colour, three notations
How hex codes map to RGB channels, why HSL is the right notation for building a palette, and how contrast ratios are actually calculated.
3 min read
Images to PDF and back: what conversion does
How an image is embedded in a PDF, what page size and compression to expect, and why browser-based conversion is the safer default for private files.
3 min read
Favicon sizes in 2026: which five files you actually need
Every favicon size browsers and mobile devices request, the HTML that declares them, and why your new icon is still not showing up.
2 min read
Image optimization: the four decisions that matter
Format, dimensions, compression level and loading strategy - the four image decisions that decide your LCP, with the numbers to use for each.
3 min read
Responsive images with srcset and sizes: a practical guide
How responsive images actually work, why the sizes attribute is the one people omit, and when to use picture instead of srcset.
2 min read
SVG vs PNG: when to use each, and when to convert
Why SVG wins for anything vector, the cases where you must rasterise anyway, and how to export a PNG at the right resolution.
2 min read
WebP vs PNG vs JPEG: which format for which image
How the three main web image formats actually differ, what each costs in bytes, and a decision rule you can apply without thinking about it.
2 min read
About images and page weight
Images are the single most common reason a launch page is slow, and slow pages lose conversions before they lose rankings. A hero image exported straight from a design tool at full resolution can be two megabytes on its own, which is more than the rest of the page combined and most of it invisible at the size it renders.
This hub covers the decisions that matter in order of impact: choosing the format, sizing for the layout rather than for the source file, serving responsive variants, and reserving space so the page does not shift while images arrive. Layout shift is worth calling out separately because it is a ranking signal and an obvious usability problem, and it is fixed by two attributes.
Compression gets a full treatment because the intuition is usually wrong. The quality setting where a photograph starts to look degraded is far lower than most people assume, and the file size difference between a defensible setting and a cautious one is often three to one.
Common questions
- WebP or AVIF?
- AVIF compresses better and is now supported by every current browser. WebP encodes faster and is a safe universal fallback. Serving AVIF with a WebP fallback in a picture element covers both.
- How much can images actually be compressed?
- For photographic content, quality settings around 75 to 80 are usually indistinguishable from the original at normal viewing size and cut file size by half or more.