Image optimisation

Articles

• Setting up an AVIF pipeline for your images

  Tutorial

  Build an AVIF pipeline with avifenc or sharp: output variants, quality and speed knobs, fallback strategy, and verification.

• AVIF vs WebP formats

  Reference guide

  AVIF vs WebP image formats: compression, browser support, encoding cost and when to use each for smaller faster images.

• CSS background images slowing down LCP

  Troubleshooting guide

  Fix LCP from CSS background images: preload with image-set, understand resolution switching, and know when to switch the hero to an img.

• Images not loading, blank boxes and broken image icons

  Troubleshooting guide

  Fix broken image icons and blank image boxes: wrong paths, blocked hosts, server errors and format problems, with checks in DevTools.

• content-visibility versus loading lazy for images

  Reference guide

  content-visibility vs loading lazy for images: how each defers work, the CLS risk, and when to combine or choose between them.

• CSS image-set for optimized background images

  Reference guide

  CSS image-set function: resolution switching and format fallbacks for background images, with a url() fallback and browser support notes.

• Screenshots for documentation and marketing

  Tutorial

  Best practice for documentation and marketing screenshots, from capture resolution and DPI to sharpness, accessibility and optimisation.

• The favicon: small but not trivial

  Reference guide

  Optimise the favicon: PNG for modern browsers, ICO for legacy, apple-touch-icon sizes, cache and update semantics, with a file table.

• figure and figcaption for image semantics

  Tutorial

  Use figure and figcaption to attach captions to images, with the right HTML semantics for accessibility and SEO.

• When to use GIF vs animated WebP and AVIF

  Reference guide

  Compare GIF with animated WebP and AVIF, their size and color limits, and when each is the right choice on the web.

• Serving HEIC iPhone photos on the web

  Tutorial

  HEIC photos and the web: why browsers cannot render HEIC, when to convert to JPEG, WebP or AVIF, and how to build the conversion into a pipeline.

• Optimising the hero image for speed

  Reference guide

  Optimise the hero image: preload with fetchpriority high, choose the right srcset candidate, compress, and never lazy-load above the fold.

• Images that push content down and cause layout shift

  Troubleshooting guide

  Fix layout shift from images: reserve space with width and height or aspect-ratio, handle responsive art direction, and verify CLS drops.

• Image CDN configuration

  Reference guide

  Configure an image CDN: URL transform parameters, caching with immutable URLs, variant presets and the purge flow for updates.

• Choosing an image compression quality setting

  Reference guide

  Choose the right image quality setting: test per image type, follow the 75 to 85 starting range for photos, and standardise in the build.

• Image copyright and attribution for a website

  Reference guide

  Source images legally, respect image licences, give correct attribution, and avoid copyright claims and takedowns on your website.

• Remove image EXIF metadata

  Tutorial

  Remove EXIF metadata from website images: why it matters for privacy and file size, and how to strip it at export, with a tool, or in a pipeline.

• Stop other sites hotlinking your images

  Troubleshooting guide

  Stop hotlinking: see how it wastes origin bandwidth, block at the server or CDN edge with referrer rules, and handle false positives.

• Image optimisation with command line tools

  Tutorial

  Command line image optimisation: cwebp, ImageMagick, oxipng and squoosh-cli commands that shrink images before upload.

• Image optimisation guide

  Reference guide

  How to choose an image format, compress without visible loss, resize to the render size, and deliver images fast with srcset, dimensions, lazy loading and CDN caching.

• Image SEO filenames alt text and captions

  Reference guide

  Image SEO basics: descriptive filenames, meaningful alt text and captions help Google understand images. Filenames are a light signal; alt text is the strongest one.

• Image SEO: alt text, filenames and context

  Reference guide

  Improve image SEO with descriptive alt text, readable filenames, captions and context, plus the markup that makes images indexable.

• Image sitemaps: what they do

  Reference guide

  What an image sitemap does, the image XML namespace, when it helps, submitting it, and common validation errors.

• Image sprite versus icon font

  Reference guide

  Compare CSS image sprites, SVG sprites, and icon fonts by load weight, accessibility, and sharpness, and pick the right icon strategy.

• How to compress images for the web

  Tutorial

  Compress images for the web in the right order: measure current size, pick a format, resize to render size, apply lossy balance, strip metadata, and automate.

• Lazy loading images without breaking LCP

  Tutorial

  Lazy load images with the loading attribute, decode async, keep the LCP image eager, and cover no-JS edge cases without hurting LCP.

• Lazy loading with srcset

  Reference guide

  Combine lazy loading with srcset and sizes: what the browser defers, the candidates to keep eager, and the LCP-safe pattern.

• LQIP low-quality image placeholders

  Tutorial

  LQIP low-quality image placeholders: what they are, how to build them, and when they help or hurt perceived performance.

• Next-generation image format guide

  Reference guide

  Compare AVIF, WebP and JPEG XL for current browser support and compression, and pick the safest serving stack with correct fallbacks.

• CSS object-fit and object-position for images

  Reference guide

  CSS object-fit cover, contain, fill, none and scale-down explained with object-position, aspect-ratio pairing and the CLS pitfalls to avoid.

• Object storage vs a database for image files

  Reference guide

  Compare object storage and a database for website images, and decide when files belong in the browser addressable store vs the DB.

• Open Graph image specifications

  Reference guide

  Build Open Graph images that render everywhere: absolute HTTPS URL, 1200x630 ratio, width and height tags, and file size limits.

• PNG optimization with palette and quantization

  Tutorial

  PNG optimization: palette reduction and quantization shrink 24-bit PNG files by converting them to 8-bit indexed images while preserving alpha transparency.

• Preload the hero image

  Tutorial

  Preload the hero image for a faster LCP, and learn when fetchpriority or font preload beats an image link preload.

• Responsive favicon setup guide

  Tutorial

  How to set up favicons so modern browsers get an SVG and legacy browsers and devices get the icons they need.

• Serving images for retina and high-DPI displays

  Reference guide

  Serve sharp images on retina and high-DPI displays with srcset density descriptors, and verify the browser picks the right file.

• The sizes attribute in responsive images

  Reference guide

  The HTML sizes attribute for responsive images: how width descriptors pair with sizes, examples, and the mistakes to avoid.

• Responsive images with srcset and sizes

  Reference guide

  How srcset with w descriptors and sizes chooses the right image file, when to use picture for art direction, and the practical pitfalls to avoid.

• How browsers pick a srcset image

  Reference guide

  How browsers pick srcset images with w descriptors and sizes: the density math, the first-fit rule, and the mismatch traps that cause big downloads.

• Optimising SVGs for the web

  Tutorial

  SVG optimisation: remove metadata and precision noise, purge hidden layers and unused defs, minify the markup and serve it compressed.

• SVG vs PNG: which format when

  Reference guide

  Compare SVG and PNG for web graphics: vector vs raster, scaling behaviour, favicons and logos, when to fall back to PNG, with a decision table.

• Serving thumbnails fast

  Reference guide

  Serve thumbnails fast: generate the right size, use WebP/AVIF, cache immutably, add width and height, and lazy-load in grids.

• WebP and AVIF conversion inside your CI pipeline

  Tutorial

  WebP and AVIF conversion in CI: a build-time step with sharp, deterministic output, and a check that no bitmap ships unoptimised.

• WebP and AVIF: modern image formats

  Reference guide

  Compare WebP and AVIF with JPEG for size, quality and browser support, and convert a site's image set without double-encoding loss.

• WebP lossless vs lossy compression

  Reference guide

  WebP lossless vs lossy: lossless keeps every pixel and bests PNG, lossy trades small quality for far smaller files. Choose by content type and quality level.

• WordPress pages slow because of images

  Troubleshooting guide

  Fix slow WordPress pages from images: scale sizes in the theme, regenerate thumbnails, compress and offload uploads, then test the result.