Image Optimization Glossary

A

Alpha channel Formats: A fourth channel stored alongside red, green and blue that records how opaque each pixel is. PNG, WebP and AVIF have one; JPEG does not, which is why converting a transparent logo to JPEG flattens it onto a solid background. Read more: AVIF vs WebP vs JPEG XL: Choosing a Next-Gen Image Format →
Artifact Compression: Visible damage introduced by lossy compression: blocking (8×8 squares in JPEG), ringing (halos along hard edges), banding (stepped gradients), and colour bleed. Which artifacts you get is a fingerprint of the encoder. Read more: Lossy vs Lossless: How Image Compression Actually Works →
Aspect ratio Layout: The proportion of width to height. Declaring it — via width and height attributes or the CSS aspect-ratio property — lets the browser reserve the right space before an image arrives, which is what prevents layout shift. Read more: Nine Image Optimization Mistakes That Quietly Cost You LCP →
AVIF Formats: An image format derived from the AV1 video codec. Typically produces smaller files than WebP at similar quality, supports alpha, wide colour and HDR, but encodes more slowly and is not quite as universally supported. Read more: AVIF vs WebP vs JPEG XL: Choosing a Next-Gen Image Format →

B

Bit depth Fundamentals: How many bits record each colour channel per pixel. Eight bits gives 256 levels per channel, the web norm. Ten or twelve bits allow smoother gradients and HDR, and are supported by AVIF and JPEG XL but not by baseline JPEG.
Blocking resource Performance: A stylesheet or synchronous script the browser must fetch and process before it can paint. Blocking resources delay every image on the page, which is why LCP problems are often not image problems at all. Read more: The Complete Guide to Optimizing Largest Contentful Paint (LCP) →
Brotli Delivery: A general-purpose compression algorithm applied on the wire by the server. It helps text — HTML, CSS, JS, SVG — considerably. It does almost nothing for JPEG, WebP or AVIF, which are already compressed. Read more: Minifying CSS and JS Effectively →

C

Cache hit ratio Delivery: The share of CDN requests answered from the edge rather than forwarded to your origin. A ratio that drops after adding WebP usually means a Vary header is fragmenting the cache. Read more: Faster Image Delivery: A Practical Guide to CDNs and Browser Caching →
Cache-Control Delivery: The HTTP response header that tells browsers and CDNs how long a file may be reused. For fingerprinted image assets, public, max-age=31536000, immutable is the standard setting. Read more: Faster Image Delivery: A Practical Guide to CDNs and Browser Caching →
CDN Delivery: Content Delivery Network. A pool of servers geographically close to your visitors that caches and serves your static files, cutting round-trip time and taking load off the origin. Read more: Faster Image Delivery: A Practical Guide to CDNs and Browser Caching →
Chroma subsampling Compression: Storing colour information at lower resolution than brightness, exploiting the eye's weaker sensitivity to colour detail. 4:2:0 halves colour resolution in both directions and is nearly free on photos — but it smears fine coloured text, which is why screenshots should use 4:4:4 or a lossless format. Read more: Lossy vs Lossless: How Image Compression Actually Works →
CLS Core Web Vitals: Cumulative Layout Shift. Measures how much visible content jumps around during loading. Images without declared dimensions are the classic cause. Good is below 0.1 at the 75th percentile. Read more: How Core Web Vitals Affect Your Search Rankings →
Colour profile Fundamentals: Embedded data (usually ICC) describing how the file's numbers map to real colours. Useful for print work, often several kilobytes of dead weight on the web where sRGB is assumed. Canvas-based converters drop it.
Content negotiation Delivery: Serving a different file for the same URL based on the request's Accept header — for example returning WebP to browsers that advertise support. Powerful, but it requires a correct Vary header or caches will serve the wrong format. Read more: Serving Next-Gen Image Formats with PHP →
Core Web Vitals Core Web Vitals: Google's three headline user-experience metrics: LCP for loading, INP for responsiveness, CLS for visual stability. They are measured on real visits, not in a lab, and feed into ranking as part of the page experience signals. Read more: How Core Web Vitals Affect Your Search Rankings →
CrUX Core Web Vitals: Chrome User Experience Report. The public dataset of real Chrome users' performance measurements that Search Console and PageSpeed Insights report as "field data". It is what actually counts for ranking; Lighthouse scores do not. Read more: How Core Web Vitals Affect Your Search Rankings →

D

Decoding Fundamentals: Turning compressed file bytes back into pixels. The decoding="async" attribute lets the browser do this off the main thread so a heavy image cannot stall interaction. Read more: Lazy Loading Implementation: Intersection Observer, Step by Step →
Density descriptor Responsive: The 2x-style entry in srcset, telling the browser which file to use at a given device pixel ratio. Suits fixed-size images like logos; width descriptors suit fluid ones. Read more: Responsive Images Done Right: Mastering srcset, sizes, and picture →
DPR Responsive: Device Pixel Ratio. How many physical screen pixels make up one CSS pixel. A DPR of 3 means a 400px-wide slot wants a 1200px image to look sharp. Read more: Responsive Images Done Right: Mastering srcset, sizes, and picture →

E

Entropy coding Compression: The final, fully reversible stage of an encoder, where frequently occurring values are given shorter codes. Huffman and arithmetic coding are the common varieties. It loses nothing — the loss already happened at quantisation. Read more: Lossy vs Lossless: How Image Compression Actually Works →
EXIF Fundamentals: Metadata cameras and phones embed in a file: exposure, lens, timestamp, orientation and often GPS coordinates. Frequently tens of kilobytes, and a privacy concern when photos are published as-is.

F

fetchpriority Performance: An HTML attribute that raises or lowers a resource's fetch priority. Setting fetchpriority="high" on the LCP image tells the browser to start it before other images rather than discovering its importance during layout. Read more: Lazy Loading Strategy: What to Defer, What to Prioritise, and Why →
Fingerprinting Delivery: Putting a content hash in the file name (hero.a91f3c.webp) so the URL changes whenever the bytes change. It is what makes a one-year immutable cache safe: you never need to invalidate, you just reference a new name. Read more: Faster Image Delivery: A Practical Guide to CDNs and Browser Caching →

G

GD Server-side: The image library bundled with most PHP installations. Handles JPEG, PNG, GIF and WebP, and can write AVIF on recent builds. Simpler and more limited than ImageMagick, but usually already installed. Read more: Serving Next-Gen Image Formats with PHP →

H

HTML5 Canvas Fundamentals: The browser drawing surface this site's converter uses. Drawing an image onto a canvas and calling toBlob() re-encodes it with the browser's own encoder, which is why conversion here needs no server.

I

Immutable Delivery: A Cache-Control directive promising a URL's content will never change. It stops browsers sending revalidation requests on reload — worth real time on repeat visits, and safe only with fingerprinted names. Read more: Faster Image Delivery: A Practical Guide to CDNs and Browser Caching →
INP Core Web Vitals: Interaction to Next Paint. Measures the delay between a user interaction and the resulting visual update, across the whole visit. Replaced First Input Delay in 2024. Good is under 200 ms at the 75th percentile. Read more: How Core Web Vitals Affect Your Search Rankings →
Intersection Observer JavaScript: A browser API that reports when an element enters or leaves a region of the viewport, without the scroll listeners that used to cause jank. The right tool for lazy loading anything native lazy loading does not cover. Read more: Lazy Loading Implementation: Intersection Observer, Step by Step →

J

JPEG XL Formats: A modern format with excellent compression, progressive decoding and lossless JPEG transcoding. Technically strong, but browser support has been the sticking point, which keeps it off most production sites. Read more: AVIF vs WebP vs JPEG XL: Choosing a Next-Gen Image Format →

L

Lazy loading Performance: Deferring the download of images until they are near the viewport. loading="lazy" enables it natively. Applying it to the LCP image is one of the most common self-inflicted performance wounds. Read more: Lazy Loading Strategy: What to Defer, What to Prioritise, and Why →
LCP Core Web Vitals: Largest Contentful Paint. The time until the largest text block or image in the viewport has rendered. Good is under 2.5 seconds at the 75th percentile. Images are the LCP element on most content pages. Read more: The Complete Guide to Optimizing Largest Contentful Paint (LCP) →
Lossless Compression: Compression that reconstructs the original bit-for-bit. PNG, WebP lossless and GIF are lossless. Best for line art, screenshots, and anything that will be re-edited. Read more: Lossy vs Lossless: How Image Compression Actually Works →
Lossy Compression: Compression that discards detail judged hard to see in exchange for much smaller files. JPEG, WebP lossy and AVIF are lossy. Every re-encode discards a little more — the loss is cumulative. Read more: Lossy vs Lossless: How Image Compression Actually Works →

P

Preload Performance: A link tag that tells the browser to fetch a resource early, before the parser would find it. Useful for an LCP image referenced from CSS, where the preload scanner cannot see it. Read more: The Complete Guide to Optimizing Largest Contentful Paint (LCP) →
Preload scanner Performance: A lightweight secondary parser that scans ahead in the HTML for resources to start fetching while the main parser is blocked. It only sees markup — images set from JavaScript or CSS are invisible to it. Read more: The Complete Guide to Optimizing Largest Contentful Paint (LCP) →
Progressive JPEG Formats: A JPEG that renders as several increasingly sharp passes rather than top to bottom. Feels faster on slow connections, though it can slightly delay the moment LCP is officially recorded.

Q

Quantisation Compression: The step where an encoder divides frequency coefficients by a quality-dependent table and rounds the result, collapsing many distinct values to zero. This is the exact point at which information is lost, and where the quality slider acts. Read more: What Quality Setting Should You Actually Use? A Quality Ladder Test →

R

Responsive images Responsive: Serving different image files to different screens using srcset and sizes, so phones do not download desktop-sized files and retina screens do not get blurry ones. Read more: Responsive Images Done Right: Mastering srcset, sizes, and picture →
rootMargin JavaScript: An Intersection Observer option that grows or shrinks the region used to test visibility. A positive rootMargin starts loading images before they scroll into view, so they are ready on arrival. Read more: Lazy Loading Implementation: Intersection Observer, Step by Step →

S

sizes Responsive: The attribute that tells the browser how wide the image will be laid out, expressed in CSS units and media queries. srcset without an accurate sizes is the single most common responsive-image mistake; the browser assumes 100vw and over-downloads. Read more: Responsive Images Done Right: Mastering srcset, sizes, and picture →
srcset Responsive: An attribute listing several versions of the same image with their widths, letting the browser choose based on viewport and pixel density. Paired with sizes for fluid layouts. Read more: Responsive Images Done Right: Mastering srcset, sizes, and picture →
Structured data SEO: Machine-readable markup — usually JSON-LD using schema.org vocabulary — describing what a page contains. ImageObject markup can make images eligible for richer presentation in Google Images. Read more: Image SEO: Alt Text, File Names, and Structured Data That Actually Rank →

T

Tree shaking Build: Eliminating code that is never imported anywhere, at bundle time. Usually removes far more bytes than minification does, because it deletes whole modules rather than whitespace. Read more: Minifying CSS and JS Effectively →
TTFB Performance: Time To First Byte. How long the server takes to start responding. It sits underneath LCP: no amount of image optimization rescues a page whose HTML takes 1.5 seconds to begin arriving. Read more: The Complete Guide to Optimizing Largest Contentful Paint (LCP) →

V

Vary Delivery: A response header naming the request headers that change the response. Vary: Accept is required for correct WebP content negotiation, but on some CDNs it fragments the cache badly — a classic hit-ratio killer. Read more: Faster Image Delivery: A Practical Guide to CDNs and Browser Caching →
Viewport Layout: The visible region of the page. What is inside it at load determines your LCP candidate and which images should not be deferred. Read more: Lazy Loading Strategy: What to Defer, What to Prioritise, and Why →

W

WebP Formats: An image format from Google supporting lossy and lossless modes, alpha and animation. Usually 25–35% smaller than comparable JPEG on Google's own study, and considerably more on unoptimised sources. Supported everywhere that matters. Read more: WebP Browser Support in 2026 — and How to Ship a Fallback Anyway →
Width descriptor Responsive: The 800w-style entry in srcset, stating a candidate file's intrinsic pixel width. Combined with sizes, it lets the browser compute which file it needs before layout finishes. Read more: Responsive Images Done Right: Mastering srcset, sizes, and picture →

A

B

C

D

E

F

G

H

I

J

L

P

Q

R

S

T

V

W

Missing a term?