Aspect Ratio
The proportional relationship between an image's width and height, expressed as W:H (e.g., 16:9, 4:3, 1:1). Maintaining aspect ratio when resizing prevents image distortion. A 16:9 image at 1920×1080px has the same aspect ratio as one at 1280×720px.
Alpha Channel
The fourth color channel (in addition to Red, Green, Blue) that controls pixel transparency on a scale of 0 (fully transparent) to 255 (fully opaque). Only PNG, WEBP, and GIF support alpha channels. JPEG does not, which is why transparent backgrounds become white when converting to JPEG.
Artifacts
Visible distortions in a compressed image caused by aggressive lossy compression. JPEG artifacts typically appear as blocky patterns around high-contrast edges (called 'blocking') and color smearing. Visible at quality settings below 60% JPEG quality.
AVIF
AV1 Image File Format — a next-generation image format based on the AV1 video codec. Achieves 40–50% smaller files than JPEG at equivalent quality. Supports HDR and wide color gamut. Browser support is growing but not yet universal (Chrome yes, Safari 16+, Firefox yes). Slower to encode than WEBP.
Bit Depth
The number of bits used to represent the color of each pixel. 8-bit per channel (24-bit total for RGB) is standard for web images and supports 16.7 million colors. 16-bit is used for professional photography. Higher bit depth means more subtle color gradations but larger file sizes.
Blob URL
A temporary browser-local URL (format: blob:https://...) that references data stored in browser memory. PixelTools uses Blob URLs to let you download processed images without uploading them to any server. Blob URLs are revoked when the browser tab closes.
Canvas API
A browser-native JavaScript API that allows drawing and manipulating 2D graphics in real time. Used by PixelTools to process all images locally. Key methods: drawImage() for rendering images, toBlob() for exporting, getImageData()/putImageData() for pixel-level manipulation.
Chroma Subsampling
A JPEG compression technique that reduces color (chroma) information more aggressively than brightness (luma) information, exploiting the human eye's lower sensitivity to color detail. The most common setting is 4:2:0, which stores chroma at half the resolution. Responsible for some JPEG compression efficiency.
CLS (Cumulative Layout Shift)
A Google Core Web Vitals metric measuring how much visible page content unexpectedly shifts during loading. Images without explicit width/height attributes are a primary cause of CLS. Good score: under 0.1. Fix: always specify width and height on img elements.
Color Profile (ICC)
Embedded metadata that describes how an image's colors should be displayed, ensuring consistent color reproduction across different devices and monitors. Common profiles: sRGB (standard web), Adobe RGB (photography), Display P3 (wide gamut). Most web images should use sRGB.
Compression Ratio
The ratio of the original uncompressed file size to the compressed file size. A compression ratio of 10:1 means the compressed file is 10 times smaller than the original. JPEG at 80% quality typically achieves 10:1 to 20:1 compression ratios for photographs.
Core Web Vitals
Google's set of three performance metrics used as ranking factors: LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift). Images directly impact all three. Poor Core Web Vitals can significantly reduce Google search rankings.
DCT (Discrete Cosine Transform)
The mathematical transform at the heart of JPEG compression. Converts 8×8 pixel blocks from spatial domain (pixel values) to frequency domain (amplitudes of sine waves). Low-frequency components (overall tone) are preserved; high-frequency components (fine detail) are quantized away. This is what makes JPEG 'lossy'.
DPI (Dots Per Inch)
A print resolution measure specifying how many dots of ink fit in one inch. Standard print resolution: 300 DPI. Screen resolution: 72–96 DPI (screen DPI is misleading — what matters for screens is pixel dimensions, not DPI). Changing an image's DPI in metadata does not change its actual pixel dimensions or quality.
EXIF Data
Exchangeable Image File Format — metadata embedded in image files by cameras and phones. Contains: GPS coordinates, camera make/model, lens info, shutter speed, aperture, ISO, date/time, software used. A privacy risk when sharing photos publicly. PixelTools' EXIF Remover strips all EXIF data.
Fallback Image
A backup image served to browsers that don't support the primary format. Common pattern: serve WEBP as primary, JPEG as fallback using the HTML <picture> element with multiple <source> elements. Ensures all browsers see an optimized image.
FileReader API
A browser API that allows JavaScript to read the content of local files. PixelTools uses FileReader to load uploaded images into browser memory without uploading them to any server. The file data is read as a Data URL, then passed to the Canvas API for processing.
GIF (Graphics Interchange Format)
A lossless image format from 1987 that supports animation and transparency. Limited to 256 colors, making it poor for photographs but acceptable for simple graphics and animations. Largely obsoleted by WEBP (better quality, smaller size). Still widely used for memes and simple animations due to universal support.
Grayscale
An image mode where each pixel is represented by a single luminance value (0=black, 255=white) rather than RGB color values. Grayscale images are inherently smaller than color images. Converting to grayscale can reduce file size by ~65% vs. equivalent color PNG.
Hero Image
The primary, large banner image at the top of a webpage — usually the first large visual element users see. Typically the LCP element, making it the most performance-critical image on any page. Hero images should be aggressively optimized: under 150KB, correct dimensions, WEBP format, high priority loading.
ICC Profile
See Color Profile (ICC).
Image Optimization
The process of reducing image file size while maintaining acceptable visual quality for the intended use case. Encompasses: format selection, compression, dimension resizing, and metadata removal. A well-optimized image is served at the exact required dimensions, in the most efficient format, at the minimum quality that looks acceptable.
JPEG (Joint Photographic Experts Group)
The most widely supported photographic image format, using lossy compression via Discrete Cosine Transform. Recommended quality range for web: 75–82%. Files use .jpg or .jpeg extension (identical). Does not support transparency. Re-saving a JPEG as JPEG introduces additional quality loss each time.
Lazy Loading
A technique where images below the visible viewport are not loaded until the user scrolls near them. Implemented with loading='lazy' attribute on img elements. Reduces initial page load time and bandwidth usage. Should not be applied to above-the-fold images (especially the LCP element).
LCP (Largest Contentful Paint)
A Google Core Web Vitals metric measuring how quickly the largest visible content element (usually a hero image) loads. Good: under 2.5 seconds. Poor: over 4.0 seconds. The single most important image performance metric for Google rankings. Uncompressed hero images are the #1 cause of poor LCP scores.
Lossy Compression
A compression method that permanently discards some image data to achieve smaller file sizes. Used by JPEG and lossy WEBP. The discarded data is carefully chosen to minimize visible quality loss, exploiting limitations of human perception. Contrast with lossless compression.
Lossless Compression
A compression method that reduces file size without discarding any data. The original image can be perfectly reconstructed. Used by PNG, GIF, and lossless WEBP. Achieves smaller reductions than lossy compression. Ideal for logos, text, screenshots, and images that will be edited further.
Metadata
Data embedded within an image file that describes the image itself rather than its visual content. Includes: EXIF data (GPS, camera info), IPTC data (copyright, description), XMP data (extended metadata), color profiles. Can add 100KB+ to image files. Removing metadata reduces file size and protects privacy.
Object-Fit
A CSS property controlling how an image fills its container. object-fit: cover fills the container while maintaining aspect ratio (may crop). object-fit: contain fits entirely within the container (may show empty space). object-fit: fill stretches to fill (distorts). Using the correct value prevents visual distortion.
PageSpeed Insights
Google's free tool (pagespeed.web.dev) for analyzing webpage performance. Provides Core Web Vitals scores, specific image optimization recommendations, and estimated time savings from optimizations. Run it before and after image optimization to measure improvement.
Pixel Density (PPI)
Pixels per inch — the density of pixels on a display. Retina/HiDPI displays (2x pixel density) require 2x the pixel dimensions to appear sharp. An image displayed at 400px wide on a Retina display needs to be served at 800px wide to avoid appearing blurry.
PNG (Portable Network Graphics)
A lossless image format supporting transparency (alpha channel) and millions of colors. Ideal for logos, icons, screenshots, and images requiring transparency. File sizes are significantly larger than JPEG for photographic content. PNG was created to replace GIF (without GIF's 256-color limitation).
Progressive JPEG
A JPEG encoding that loads in multiple passes, each pass adding more detail. Appears blurry initially then sharpens progressively. Better perceived loading experience than baseline JPEG (which loads top-to-bottom). Typically 2–8% smaller than baseline JPEG.
Quantization
The step in JPEG compression where frequency coefficients are divided by a quantization matrix, discarding fine detail. This is the 'lossy' part of JPEG. The quality setting controls the quantization matrix — high quality = small divisors = more data preserved. Low quality = large divisors = more data discarded.
Raster Image
An image made of a fixed grid of pixels. JPEG, PNG, WEBP, and GIF are all raster formats. Raster images become pixelated when enlarged beyond their original dimensions. Contrast with vector images (SVG), which can be scaled infinitely without quality loss.
Resolution
Ambiguous term — can mean pixel dimensions (1920×1080 pixels), pixel density (300 DPI for print), or display resolution (4K = 3840×2160). For web images, 'resolution' usually refers to pixel dimensions. High resolution means large pixel dimensions, not high DPI.
Responsive Images
A technique for serving different image sizes based on device viewport and pixel density. Implemented using srcset and sizes attributes on img elements, or the <picture> element. Ensures mobile users don't download desktop-sized images.
sRGB
Standard Red Green Blue — the standard color space for web images and consumer displays. Images not in sRGB may appear color-shifted on web browsers. Best practice: convert images to sRGB before publishing online. Most cameras can be configured to shoot sRGB.
Thumbnail
A small preview version of an image, typically 100–300px wide. Used in product listings, blog post previews, and image galleries. Target file size: under 30KB. Can use more aggressive compression (65–70% JPEG quality) than full-size images since viewers only see them at small sizes.
Transparency
The ability of image pixels to be partially or fully see-through. Essential for logos placed on colored backgrounds, icons, and overlays. Supported by PNG (full alpha channel), WEBP (alpha channel), and GIF (1-bit binary transparency). Not supported by JPEG.
Vector Image (SVG)
An image defined by mathematical paths and shapes rather than pixels. Can be scaled to any size without quality loss. Ideal for logos, icons, and simple illustrations. SVG files are XML text and can be very small. Not suitable for photographs. Supported natively by all modern browsers.
WEBP
A modern image format developed by Google, supporting both lossy and lossless compression plus transparency and animation. 25–35% smaller than JPEG at equivalent quality. Supported by all modern browsers (Chrome, Firefox, Safari 14+, Edge). The recommended format for web images in 2026.
XMP Data
Extensible Metadata Platform — an Adobe-developed metadata standard embedded in image files. Stores extended information like copyright, author, descriptions, and editing history. Like EXIF, XMP data should be removed before sharing images publicly for privacy.
YCbCr Color Space
A color space used internally by JPEG compression that separates luma (Y, brightness) from chroma (Cb, Cr, color). Human eyes are more sensitive to brightness than color, so JPEG can reduce chroma data more aggressively. JPEG images are stored in YCbCr but converted to RGB for display.
Put These Concepts Into Practice
18 free image tools — compression, resizing, format conversion, and more. No account, no upload, instant results.