Image glossary

Next-gen format after WebP (2019) — up to 50% smaller than WebP.

AV1 Image File Format, built on the AV1 video codec from the Alliance for Open Media. More efficient than WebP, with 12-bit color depth and HDR support. Browser support: Chrome 85+, Firefox 113+, Safari 16.4+.

Animation format from 1987, max 256 colors, binary transparency.

Graphics Interchange Format, developed by CompuServe. Outdated LZW compression and 8-bit color space make it markedly weaker for animation than animated WebP today — typically 3–4× larger.

Apple's default since iOS 11 — 30–50% smaller than JPG.

High Efficiency Image Container, based on the HEVC/H.265 video codec. Default on iPhones since 2017. Often incompatible outside the Apple ecosystem — Windows 10 needs a paid extension.

Lossy image format (1992), the photo standard on the web.

Joint Photographic Experts Group, 1992. Splits images into 8×8 blocks and applies Discrete Cosine Transform (DCT) plus quantization to drastically reduce file size at the cost of invisible detail. Web sweet-spot quality: 78. No alpha channel.

Lossless image format (1996) with alpha-channel transparency.

Portable Network Graphics, 1996, designed as a patent-free GIF successor. Lossless compression via Deflate, full 24-bit color, partial transparency. Ideal for logos, diagrams, screenshots, pixel art. For photos, three to ten times larger than JPG.

Vector image format — infinitely scalable, described in XML.

Scalable Vector Graphics. Defines images via paths and shapes instead of pixel rasters. Perfect for logos and icons (often under 5 KB), stylable via CSS, animatable, accessible. Not suitable for photos.

Modern image format by Google (2010) — 25–35% smaller than JPG.

Built on VP8 video codec technology. Supports lossy + lossless + animation + alpha channel in one format. Universal browser support since 2020.

The mathematical transform that makes JPG compression work.

Decomposes an 8×8 pixel block into 64 frequency coefficients — low frequencies in the center, high frequencies at the edge. JPG quantizes high frequencies more aggressively because the eye perceives them less.

Visible compression traces from overly aggressive JPG.

Block artifacts (8×8 squares), mosquito noise (ringing around edges) and banding (steps in gradients) appear when quality is set too low or when an image is re-encoded as JPG multiple times in a row (generation loss).

Pixels stay byte-exact, only storage becomes more efficient.

PNG, WebP-Lossless and AVIF-Lossless work losslessly — no pixel is altered. Achieved through entropy coding (Deflate, Huffman) and prediction models.

Deliberately discards information the eye perceives poorly.

Uses psychovisual models to reduce data the human eye barely registers. JPG, WebP-Lossy and AVIF work this way. Invisible at the right quality setting (78–82 for JPG).

Mozilla encoder that produces JPG files 5–15% smaller than libjpeg.

Open-source fork of libjpeg-turbo (2014). Adds trellis quantization, optimized Huffman tables and a better default quantization matrix — fully compatible with any JPG decoder.

Rounding of DCT coefficients — the actual loss in JPG.

Each frequency coefficient is divided by a quantization table and rounded to an integer. High frequencies are quantized aggressively; low frequencies stay nearly intact. This is where the irretrievable loss happens.

Fourth image channel storing per-pixel transparency (0–255).

RGB + A. 0 = fully transparent, 255 = fully opaque. PNG and WebP support alpha; JPG does not.

Stores color information at lower resolution than luminance.

The eye is more sensitive to luminance than color. Standard notation: 4:4:4 (full color), 4:2:2 (half horizontal color), 4:2:0 (half horizontal + vertical — web default).

Defines how RGB values translate to actual displayed colors.

International Color Consortium Profile. Web standard is sRGB. Adobe RGB and Display-P3 cover wider gamuts but are ignored by older software.

Print dots vs. screen pixels per inch.

DPI (Dots Per Inch) is a print metric, PPI (Pixels Per Inch) a screen metric. Often used interchangeably in web contexts; technically PPI is correct. Print standard quality: 300 DPI at final print size.

Displays with double (or higher) pixel density.

Apple's marketing term for displays with 2× or 3× DPR. For sharp rendering, a 600 px container must load a 1200 px image, otherwise the result looks soft.

Metadata block in images: camera, lens, exposure, GPS.

Exchangeable Image File Format, standardized in 1995 by the Japanese JEIDA. A modern smartphone camera embeds 100–500 KB of EXIF in every photo.

Adobe standard for extended image metadata in XML.

Extensible Metadata Platform, introduced 2001. Structured storage of editing history, licensing info, tags, copyright information.

Measures how much layout elements shift during loading.

Images without explicit `width`/`height` attributes cause layout shifts and worsen the CLS value. Google recommends CLS below 0.1.

Google's metric set for user experience — LCP, INP, CLS.

Official Google ranking factor since 2021. Images directly affect LCP (load time) and CLS (layout stability).

Load images only when they scroll into the viewport.

Natively supported via `loading="lazy"` since 2019. Saves initial bandwidth and improves LCP. Hero images should explicitly use `loading="eager"`.

Most important Core Web Vitals metric — time to largest visible element.

Measures the render time of the largest content element in the viewport. Target: under 2.5 seconds. Images often cause the LCP and need to be loaded with appropriate priority.

HTML attributes for serving correctly sized images per device.

With `srcset` you list image variants at different resolutions; the browser auto-picks the optimal one for viewport and DPR. `<picture>` adds format switching for AVIF/WebP fallbacks.

Encoding of binary data as ASCII text — 33% size overhead.

Standard method for embedding binary data in text formats like HTML, CSS, JSON. Three bytes become four ASCII characters. Worth it only for very small assets (under 5 KB).

Browser API for drawing and reading pixels in JavaScript.

Enables JNRT Pixel's client-side image processing: an image is drawn onto a `<canvas>`, manipulated and exported as a compressed blob — all in-browser, no server.

PWA icon with safe-zone padding for Android launcher masks.

Standard since Android 8 (2017). The icon fills the entire 108-dp canvas; the OS masks it round, square or squircle depending on the launcher.

Web app installable like a native application.

Coined by Alex Russell in 2015. Combines Service Workers (offline cache), Web App Manifest (icons + theme) and push notifications. JNRT Pixel is installable as a PWA.

Browser proxy between web app and network — enables offline.

Introduced from 2014. Intercepts network requests and can serve responses from cache. Prerequisite for PWA offline functionality.

Browser runtime for C/C++/Rust code at near-native speed.

Lets complex encoders like libwebp, Mozjpeg, libavif run in the browser at performance comparable to server tools. The WASM file loads once per session.