Index
A
- above-the-fold debate, The Digital Fold
- Accept header (HTTP), Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- Accept-CH Client Hint, Accept-CH
- accessibility, Accessibility, Icon Fonts, Compatibility
- adaptive delivery, Compatibility
- additive color creation, Additive Versus Substractive
- Adobe Illustrator
- alpha channels, Alpha Channel, Transparency with GIF, Serving Different Image Formats
- alt attribute (HTML), <img> tag, Accessibility
- ancillary bits (PNG format), Ancillary and critical chunks-Ancillary and critical chunks
- animation
- application markers (JPEG format), Markers
- arithmetic encoding, Arithmetic encoding to the rescue!
- art direction, Art Direction-Art Direction Versus Resolution Switching, Standard Responsive Images, <picture>, ImageMagick
B
- background images
- backups, File Storage, Backup, and Disaster Recovery-Cost of Metadata
- bash scripts, A Simple Derivative Image Workflow Using Bash-A Simple Derivative Image Workflow Using Bash
- below-the-fold debate, The Digital Fold
- bit depth, Bit depth
- bitmaps, Image Data Representation
- Blink-based browsers, WebP Browser Support, Legacy Support and Device Characteristics
- bots, Client Hints
- BPG (Better Portable Graphics), Service Workers and Image Decoding
- breakpoints, Image Dimensions
- Brotli, Enabling GZip or Brotli
- browser image loading
- CSS Object Model (CSSOM), CSSOM and Background Image Download
- DOM creation, Building the Document Object Model
- DOM preloading, The Preloader, The Preloader and Images
- HTTP/2 prioritization, HTTP/2 Prioritization, Why Aren’t Browsers Dealing with This?, Image Consolidation (for Network and Cache Efficiencies)
- inconsistent handling, Networking Constraints and Prioritization
- networking constraints, Networking Constraints and Prioritization, Why Aren’t Browsers Dealing with This?
- referencing images, Referencing Images-Accessibility
- service workers and image decoding, Service Workers and Image Decoding
- browser-specific formats
- build systems, An Image Build System-A Build System Checklist
- business logic, Business Logic and Watermarking
- butteraugli, Butteraugli
C
- caches/caching
- canvas (SVG format), Understanding the Canvas
- canvas width/height (GIF format), Logical screen descriptor
- CDNs (content delivery networks), CDNs and Vary and Cache-Control
- CGI (computer-generated images), The Theory Behind Digital Images
- character mapping, Creating and using icon web fonts
- chroma subsampling, Subsampling, JPEG 2000 Details
- Chrome Dev Tools
- chunk data (PNG format), Chunks
- cjpeg, WebP Tools
- Client Hints Exchange
- concept of, Client Hints
- device characteristics, Legacy Support and Device Characteristics-Selecting the Right Image Width
- headers used, Client Hint Components-Mobile Apps
- informed responses, Step 3: Informed Response
- initiating, Step 1: Initiate the Client Hints Exchange
- legacy support, Legacy Support and Device Characteristics-Selecting the Right Image Width
- mobile apps and, Mobile Apps
- opting in and subsequent requests, Step 2: Opt-in and Subsequent Requests
- overview of, Overview
- responsive images using, Client Hints
- vs. responsive images, Client Hints
- selecting the right image, Selecting the Right Image Width
- CMS (content management systems), The e-Commerce Site
- CMYK (cyan, magenta, yellow, and key), CMYK (cyan, magenta, yellow, and key)
- codec (coder/decoder), Encoders and decoders
- color profiles, Color Profiles, ImageMagick
- color resolution (GIF format), Logical screen descriptor
- color spaces
- absence of color, Alpha Channel
- additive vs. subtractive color creation, Additive Versus Substractive
- CMYK (cyan, magenta, yellow, and key), CMYK (cyan, magenta, yellow, and key)
- color theory basics, Color Spaces
- RGB (red, green, blue), RGB (red, green, and blue)
- YCbCr model, YCbCr, Color Transformations, Lossy by nature, GPU Decoding
- YCgCo model, YCgCo, JPEG XR Details
- color-tables (GIF format), Logical screen descriptor
- Compass, Tools
- compression (see also DCT (Discrete-Cosine Transform); image consolidation)
- browser-specific formats, Browser-Specific Formats
- constraints and considerations for, Encoders and decoders, Compression levels
- encoders/decoders for, Encoders and decoders
- entropy encoding, Entropy Encoding
- generic algorithms for, Why Image-Specific Compression?
- image quality comparisons, Comparing Images-Butteraugli, Quality Index and SSIM
- image-specific, Why Image-Specific Compression?
- lossy vs. lossless, Lossy Versus Lossless Formats
- LZV (Lempel-Ziv-Welch), LZW, or the Rise and Fall of the GIF
- need for, History
- precompression filtering, Filters
- prediction and, Prediction
- of raster vs. vector images, Raster Versus Vector
- of video formats, Relationship with Video Formats
- compromised/contaminated images, Secure Transformation of Images
- CompuServe, LZW, or the Rise and Fall of the GIF
- cones, Color Spaces
- containers (JPEG format), Containers
- content negotiation, Image Formats, Client Hints, Client Hints, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- Content-DPR Client Hint, Content-DPR
- convert command (ImageMagick), ImageMagick
- cookies, Fallback: “Precise Mode” with Device Characteristics + Cookies
- copyright information, Business Logic and Watermarking
- CRC (Cyclic Redundancy Code), Chunks
- critical chunks (PNG format), Ancillary and critical chunks-Ancillary and critical chunks
- CSS
- currentSrc property (HTML), currentSrc
- custom web fonts, Icon Fonts
- CVE (Common Vulnerabilities and Exposures), Secure Transformation of Images
- cwebp, WebP Tools, An Image Build System
D
- DAMs (digital asset managers), The e-Commerce Site
- data URIs, Data URIs-Tools
- data-src attribute, Loading Images with JavaScript, Data URIs
- DCT (Discrete-Cosine Transform)
- compression levels, Compression levels
- DC and AC components, How does DCT do its magic?
- dequantization, Dequantization
- methodology, How does DCT work?
- minimal coding units, Minimal coding units
- one-dimensional, How does DCT do its magic?
- quantization, Quantization
- two-dimensional, How does DCT do its magic?
- WebP format, WebP Details
- zeroing out coefficients, Dropping zeros
- decoders
- decodeToYUV task, Chrome on mobile devices
- decoding
- deferred image loading, Deferred Loading
- defs element (SVG format), The defs element
- delta encoding (filtering), Filters
- density, srcset x Descriptor, Quality Index and SSIM
- dequantization, Dequantization
- derivative images, Operationalizing Your Image Workflow
- device detection, Feature Detection, Fallback: “Precise Mode” with Device Characteristics + Cookies, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- digital cameras, The Theory Behind Digital Images
- digital fold, The Digital Fold
- digital image formats
- basics of image data representation, Digital Image Basics-Frequency Domain
- browser-specific, Browser-Specific Formats-JPEG 2000 Tools
- compression techniques, Image Formats-Butteraugli
- JPEG, JPEG-Summary
- lossless, Lossless Image Formats-Summary
- raster, SVG and Vector Images, Raster Image Formats
- selecting for optimal delivery, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR-Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- SVG and vector images, SVG and Vector Images-Summary
- digital image loading
- digital image tools
- disaster recovery, File Storage, Backup, and Disaster Recovery-Cost of Metadata
- DNS resolutions, The Preloader
- DOCTYPE element, SVG Fundamentals
- documentComplete event, Lazy Loading
- DOM (Document Object Model)
- building, Building the Document Object Model
- CSS Object Model (CSSOM), CSSOM and Background Image Download
- HTTP/2 prioritization, HTTP/2 Prioritization, Why Aren’t Browsers Dealing with This?, Image Consolidation (for Network and Cache Efficiencies)
- inconsistent image handling, Networking Constraints and Prioritization
- loadImages function, When Are Images Loaded?
- networking constraints, Networking Constraints and Prioritization, Why Aren’t Browsers Dealing with This?
- preloading, The Preloader, The Preloader and Images
- service workers and image decoding, Service Workers and Image Decoding
- domain sharding, Networking Constraints and Prioritization, Domain Sharding and HTTP2-Best Practices
- Downlink Client Hint, Downlink
- "download and hide" scenario, Avoiding “Download and Hide”, <picture>
- "download and shrink" scenario, Variable-Dimensions Images
- DPCM (differential pulse code modulation), Lossless mode
- DPR (device pixel ratio)
- dwebp, WebP Tools
- DWT (Discrete Wavelet Transform), JPEG 2000 Details
- dynamic image servers, High Volume, High Performance Images-Encoding the derivative image
- dyslexic users, Icon Fonts
E
- e-commerce sites, The e-Commerce Site, ImageMagick
- encoders
- arithmetic, Arithmetic encoding to the rescue!
- defined, Encoders and decoders
- encoding process, Decoding
- Huffman, Entropy Coding-Arithmetic encoding to the rescue!, Progressive JPEGs
- image quality comparisons, Comparing Images-Butteraugli, Quality Index and SSIM
- JxrEncApp, JPEG XR Tools
- prediction and, Prediction, Lossless mode
- quantization matrices and, Compression levels
- entropy encoding, Entropy Encoding, Entropy Coding-Arithmetic encoding to the rescue!
- event-driven image loading, When Are Images Loaded?
- EXIF (Exchangeable Image File Format)
- EXT4 filesystem, Size on Disk
F
- Facebook
- FDCT (Forward Discrete-Cosine Transform), DCT
- feature detection, Feature Detection, Fallback: “Precise Mode” with Device Characteristics + Cookies, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- FFmpeg tool, Animation
- filtering (delta encoding), Filters
- filters (SVG format), Filters-The wrong way to do filters
- fixed-dimension images, Fixed-Dimensions Images
- FLIF (Free Lossless Image Format), Service Workers and Image Decoding, FLIF
- FOIT (Flash of Invisible Text), Icon Fonts, Compatibility
- foreground images, CSS background-image
- formats (see digital image formats)
- FOUT (Flash of Unstyled Text), Icon Fonts, Compatibility
- frequency domain, Frequency Domain, DCT (see also DCT (Discrete-Cosine Transform))
G
- <g> element (SVG format), The <g> element
- gamma correction, YCbCr, Bit depth
- gamut, definition of, RGB (red, green, and blue)
- GIF (Graphic Interchange Format)
- animated, Animation
- background color index, Logical screen descriptor
- color resolution, Logical screen descriptor
- converting to MP4 files, Animation
- data block composition of, Block by Block
- header blocks, Header block
- history of, GIF (It’s Pronounced “GIF”)
- interlacing feature, LZW, or the Rise and Fall of the GIF
- licensing issues surrounding, LZW, or the Rise and Fall of the GIF
- logical screen descriptors, Logical screen descriptor
- LZW compression, LZW, or the Rise and Fall of the GIF
- optional blocks, But wait, there’s more!
- pixel aspect ratio, Logical screen descriptor
- vs. PNGs, There Can Be Only One!
- sort flags, Logical screen descriptor
- trailer blocks (3B), But wait, there’s more!
- transparent, Transparency with GIF
- true color GIFs, Logical screen descriptor
- utilities for, Animated GIF Utilities
- GIF89a file format, Animation
- global color table flags (GIF format), Logical screen descriptor
- "good enough" approach, Fallback: Good-Enough Approach
- GPU (graphics processing unit), GPU Decoding
- grayscale PNGs, Image Formats
- grid (SVG format), The Grid
- GUI utilities, GUI Utilities
- Gulp tasks, An Image Build System
- GZip, Enabling GZip or Brotli
H
- Haystack, Cost of Metadata
- header blocks (GIF format), Header block
- height attribute
- hierarchical mode (JPEG format), Hierarchical mode
- high-contrast settings, Accessibility
- high-resolution screens, Fixed-Dimensions Images
- HTMLImageElement, Referencing Images
- HTTP/1.1
- HTTP/2 prioritization, HTTP/2 Prioritization, Why Aren’t Browsers Dealing with This?, Image Consolidation (for Network and Cache Efficiencies), Domain Sharding and HTTP2-Best Practices
- Huffman encoding, Entropy Coding-Arithmetic encoding to the rescue!, Progressive JPEGs
I
- I-frame encoding, Relationship with Video Formats
- ICC (International Color Consortium), Color Profiles
- icon fonts, Icon Fonts-Web font pros and cons
- IDAT chunk (PNG format), Ancillary and critical chunks
- IDCT (Inverse Discrete-Cosine Transform), DCT
- identify command (ImageMagick), ImageMagick
- IEND chunk (PNG format), Ancillary and critical chunks
- IHDR chunk (PNG format), Ancillary and critical chunks
- image breakpoints, Image Dimensions
- image build systems, An Image Build System-A Build System Checklist
- image consolidation
- image data representation
- image delivery optimization
- cache offload, Achieving Cache Offload: Vary and Cache-Control-Near Future: Key
- domain sharding, Domain Sharding and HTTP2-Best Practices
- file storage and recovery, File Storage, Backup, and Disaster Recovery-Cost of Metadata
- image dimensions, Image Dimensions-Image Dimensions
- image format selection, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR-Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- image quality selection, Image Quality-Achieving Cache Offload: Vary and Cache-Control
- overview of, Summary
- performance budget and breakpoints, Image Dimensions
- security and, Secure Image Delivery-Secure Transformation: Architecture
- single vs. multiple URLs, Single URL Versus Multiple URLs
- image density, srcset x Descriptor, Quality Index and SSIM
- image pooling, Memory Footprint
- image processing
- image rot, Automating to avoid image and link rot
- image rotation, ImageMagick
- image spriting, Memory Footprint, CSS Spriting-Drawbacks and shortcomings, SVG Sprites-Automating SVG consolidation and fallback
- image workflow optimization
- business logic and watermarking, Business Logic and Watermarking
- dynamic image servers, High Volume, High Performance Images-Encoding the derivative image
- for e-commerce sites, The e-Commerce Site
- for news sites, The News Site
- for social media sites, The Social Media Site
- getting started with, Getting Started with a Derivative Image Workflow
- image build systems, An Image Build System-A Build System Checklist
- master and derivative images, Operationalizing Your Image Workflow
- using bash scripts, A Simple Derivative Image Workflow Using Bash-A Simple Derivative Image Workflow Using Bash
- using ImageMagick, ImageMagick-ImageMagick
- image-related attacks, Secure Transformation of Images
- ImageMagick
- benefits of, WebP Tools, ImageMagick
- download and installation, ImageMagick
- format conversions in, ImageMagick
- identify command, ImageMagick
- interlace field, ImageMagick
- JPEG 2000 support in, JPEG 2000 Tools
- JPEG XR support, JPEG XR Tools
- manual compilation, ImageMagick
- profiles field, ImageMagick
- project directory creation, ImageMagick
- properties field, ImageMagick
- quality field, ImageMagick
- resolution field, ImageMagick
- images on demand, Lazy Loading/Images On Demand
- "imagetragic", Secure Transformation of Images
- <img defer> tag (HTML), Why Aren’t Browsers Dealing with This?
- <img> tag (HTML), <img> tag, Building the Document Object Model, Why Aren’t Browsers Dealing with This?, Evolution of <img>-2015: Client Hints and Accepts
- indexed PNGs, Image Formats
- inlining images, Data URIs-Tools
- interlacing feature
- IntersectionObserver, IntersectionObserver
- intrinsic dimensions, Intrinsic Dimensions
- invisible (offscreen) images, Lazy Loading
- IPC (Inter-Process-Communication), Impact on Browser Cache: Metadata and Small Images
- ITPC (International Press Telecommunications Council), Business Logic and Watermarking
- ITU T.81 standard, History
J
- Jailbreakme exploit, Secure Transformation of Images
- JavaScript
- JFIF (JPEG File Interchange Format), Containers
- Joint Photographic Experts Group, History
- JPEG 2000 format, JPEG 2000-JPEG 2000 Tools, JPEG 2000, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- JPEG format
- color transformations, Color Transformations
- containers, Containers
- DCT (Discrete-Cosine Transform), DCT-Lossy by nature
- decoding process, Decoding
- encoding process, Decoding
- entropy encoding, Entropy Coding
- file composition, The JPEG Format
- hierarchical mode, Hierarchical mode
- history of, History
- vs. JPEG XR format, JPEG XR Details
- lossless mode, Lossless mode
- lossless optimization, Lossless
- lossy optimization, Lossy
- malware attached to, The Social Media Site
- markers, Markers
- MozJPEG project, MozJPEG, An Image Build System
- progressive, Progressive JPEGs-Progressive JPEGs, Progressive JPEG
- quality loss with repeated quantization, Lossy by nature
- run-length-encoding, Dropping zeros
- subsampling, Subsampling
- ubiquitous nature of, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- utilities for, JPEG Utilities
- vs. WebP format, WebP Details
- JPEG XR format, JPEG XR-JPEG XR Tools, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- just-in-time images, Lazy Loading/Images On Demand
- JxrEncApp/JxrDecApp, JPEG XR Tools
- jxrlib, JPEG XR Tools
L
- lazy image loading
- <img> tag and, Why Aren’t Browsers Dealing with This?
- "above the fold" first, Deferred Loading
- browsers lacking JavaScript support, Browsers Without JS
- with data URIs, Data URIs
- determining critical image status, Critical Images
- digital fold and, The Digital Fold
- event-driven image loading, When Are Images Loaded?
- IntersectionObserver, IntersectionObserver
- with JavaScript, Loading Images with JavaScript-IntersectionObserver
- low-quality image placeholders, Low-Quality Image Placeholders
- on-demand images, Lazy Loading/Images On Demand
- overview of, Summary
- point of, Critical Images
- preloading images, The Preloader and Images
- wasteful image loading, Lazy Loading, Wasteful Image Downloads
- lazyload attribute, Why Aren’t Browsers Dealing with This?
- length field (PNG format), Chunks
- libwebp, WebP Tools
- ligatures, Overview
- loadImages function, When Are Images Loaded?
- loading (see digital image loading)
- local color tables (GIF format), Logical screen descriptor
- logical screen descriptors (GIF format), Logical screen descriptor
- logographic words, Logographic Pages
- look-ahead parsers, The Preloader
- lossless image formats
- lossless mode (JPEG format), Lossless mode
- lossy image formats
- LQIP (low-quality image placeholders), Low-Quality Image Placeholders
- LZV (Lempel-Ziv-Welch) compression, LZW, or the Rise and Fall of the GIF
M
- malware, Secure Transformation of Images, The Social Media Site
- man-in-the-middle attacks, Middle Boxes, Proxies with Cache-Control (and TLS), Secure Transport of Images
- mapped characters, Creating and using icon web fonts
- markers (JPEG format), Markers
- master images, Operationalizing Your Image Workflow
- MCUs (minimal coding units), Minimal coding units, Progressive JPEGs
- memory pools, Memory Footprint
- meta-viewport element, Triggering GPU Decoding
- metadata
- middle boxes, Middle Boxes, Proxies with Cache-Control (and TLS)
- mobile devices
- Modernizr, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- MozJPEG project, MozJPEG, An Image Build System
- MP4 files, Animation, There Can Be Only One!
- MSE (Mean-Square-Error), PSNR and MSE
- multithreaded browsers, Triggering GPU Decoding
P
- PageSpeed, Tools
- palette-based image formats, Logical screen descriptor, But wait, there’s more!, Ancillary and critical chunks
- parallel downloading, Networking Constraints and Prioritization, TCP Connections and Parallel Requests, Domain Sharding and HTTP2
- <path> element (SVG format), Getting into Shape
- PCT (Photo Core Transform), JPEG XR Details
- performance budgets, Image Dimensions
- photographic images, The Theory Behind Digital Images
- Photoshop
- <picture> tag (HTML), <picture>-<picture>, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- pixels
- placeholder images, When Are Images Loaded?, Low-Quality Image Placeholders
- PLTE chunk (PNG format), Ancillary and critical chunks
- PNG (Portable Network Graphics)
- alpha channel support, Serving Different Image Formats
- ancillary chunks, Ancillary and critical chunks
- ancillary vs. critical chunks, Ancillary and critical chunks
- components of, Understanding the Mechanics of the PNG Format-Interlacing
- creation of, The PNG File Format
- critical chunk types, Ancillary and critical chunks
- delta encoding (filtering), Filters
- vs. GIFs, There Can Be Only One!
- image formats, Image Formats
- interlacing feature, Interlacing
- PNG signatures, PNG Signature
- private bits, Ancillary and critical chunks
- reserved bits, Ancillary and critical chunks
- safe-to-copy bits, Ancillary and critical chunks
- transparent, Transparency with PNG
- utilities for, PNG Utilities
- posterization filters, Image Formats
- Precise Mode, Fallback: “Precise Mode” with Device Characteristics + Cookies
- precompression filtering, Filters
- prediction, Prediction, Lossless mode
- preload directive, CSSOM and Background Image Download
- preloading images, The Preloader, The Preloader and Images
- preparsers, The Preloader
- primary colors, Color Spaces
- prioritization, Networking Constraints and Prioritization, Networking Constraints and Prioritization, Why Aren’t Browsers Dealing with This?, Critical Images, Image Consolidation (for Network and Cache Efficiencies), Efficient Use of the Connection
- private bits (PNG format), Ancillary and critical chunks
- professional photography formats, The e-Commerce Site
- profiles, Color Profiles, ImageMagick
- progressive JPEGs, Progressive JPEGs-Progressive JPEGs, Progressive JPEG, Best Practices
- progressive loading, JPEG 2000 Details
- PSD format, The e-Commerce Site
- PSNR (Peak Signal-to-Noise Ratio), PSNR and MSE
Q
- quality
- balancing with user experience, Image Quality
- best practices for, Quality Index Conclusion
- comparing, Comparing Images-Butteraugli, Quality Index and SSIM
- gaining team consensus, Creating Consensus on Quality Index
- image byte size and, Quality and Image Byte Size
- loss with repeated quantization, Lossy by nature
- quality graph, Quality and Image Byte Size
- quality index, Quality and Image Byte Size, Creating Consensus on Quality Index
- quality index selection/application, Quality Index and SSIM
- use cases for, Selecting SSIM and Quality Use Cases
- quantization
R
- raster image format
- RAW format, The e-Commerce Site
- <rect> element (SVG format), Getting into Shape
- referencing images
- reflow, <img> tag
- remote code execution, Secure Transformation of Images
- render-blocking CSS, Networking Constraints and Prioritization
- reserved bits (PNG format), Ancillary and critical chunks
- resizing images, Memory Footprint
- resolution switching, Art Direction Versus Resolution Switching, Standard Responsive Images
- Resource Priorities, Why Aren’t Browsers Dealing with This?
- resource prioritization, Networking Constraints and Prioritization, Why Aren’t Browsers Dealing with This?, Image Consolidation (for Network and Cache Efficiencies)
- responsive images
- <picture> tag, <picture>-<picture>
- benefits and drawbacks of, Client Hints
- client hints, Client Hints, Client Hints
- (see also Client Hints Exchange)
- currentSrc property, currentSrc
- feature detection and, Feature Detection, Fallback: “Precise Mode” with Device Characteristics + Cookies
- file formats, Responsive Image File Formats
- future of, Are Responsive Images “Done”?-Height Descriptors
- history of, Early Hacks
- intrinsic dimensions and, Intrinsic Dimensions
- polyfills for, To Picturefill or Not to Picturefill, That Is the Question
- responsive image containers, Responsive Image Container
- Responsive Web Design (RWD), Responsive Images
- selection algorithms, Selection Algorithms
- serving different image formats, Serving Different Image Formats
- srcset w descriptor, srcset w Descriptor-srcset w Descriptor
- srcset x descriptor, srcset x Descriptor-srcset x Descriptor
- syntax mechanisms for, Standard Responsive Images
- use cases for, Use Cases-Use Cases Are Not Mutually Exclusive
- retina screens
- RGB (red, green, blue), RGB (red, green, and blue)
- RGBA (red, green, blue, alpha), Decoding, Memory Footprint
- rods, Color Spaces
- run-length-encoding, Dropping zeros
S
- safe-to-copy bits (PNG format), Ancillary and critical chunks
- sampling, Sampling
- Save-Data Client Hint, Save-Data
- scrapers, Client Hints
- screen readers, Accessibility, Icon Fonts
- <script> tags (HTML), Building the Document Object Model
- scroll bars, Lazy Loading, Wasteful Image Downloads
- scroll events handling, IntersectionObserver
- security, Secure Image Delivery-Secure Transformation: Architecture (see also TLS (transport layer security))
- sizes attribute (HTML), srcset w Descriptor
- small images
- blocking caused by, Efficient Use of the Connection
- consolidation overview, Summary
- CSS sprites and, CSS Spriting-Drawbacks and shortcomings
- delivery challenges, Image Consolidation (for Network and Cache Efficiencies)
- download frequency, Small Objects Observed
- impact on browser cache, Impact on Browser Cache: Metadata and Small Images
- impact on connection pool, Small Objects Impact the Connection Pool
- implementing in vector format, Vector Image Consolidation-Automating SVG consolidation and fallback
- logographic words, Logographic Pages
- TCP latency, TCP Connections and Parallel Requests
- social media sites, The Social Media Site
- SOF (Start of Frame) markers, Markers
- sort flags (GIF format), Logical screen descriptor
- spatial domain, Frequency Domain, DCT
- spectral selection (JPEG format), Progressive JPEGs
- speculative parsers, The Preloader
- sprites (see image spriting)
- spriting, Memory Footprint, CSS Spriting-Drawbacks and shortcomings, SVG Sprites-Automating SVG consolidation and fallback
- Sprity, Automating to avoid image and link rot
- src attribute, Loading Images with JavaScript
- srcset w descriptor (HTML), srcset w Descriptor-srcset w Descriptor
- srcset x descriptor (HTML), srcset x Descriptor-srcset x Descriptor
- sRGB color space, RGB (red, green, and blue), Color Profiles
- SSIM (Structural Similarity), SSIM, Quality Index and SSIM
- steganography, Secure Transformation of Images
- storage and recovery, File Storage, Backup, and Disaster Recovery-Cost of Metadata
- subsampling (JPEG format), Subsampling
- subtractive color creation, Additive Versus Substractive
- successive approximation (JPEG format), Progressive JPEGs
- SVG (Scalable Vector Graphics)
- <g> (group) element, The <g> element
- <path> element, Getting into Shape
- <rect> element, Getting into Shape
- <text> element, Converting Text to Outlines
- automating optimization, Automating Optimization Through Tooling-Pick Your Flavor
- basic shape creation, Getting into Shape
- CSS stylesheet consolidation, Fragment identifiers and viewBox
- in data URIs, Data URIs
- defs element, The defs element
- filters, Filters-The wrong way to do filters
- fundamentals of, SVG Fundamentals-viewBox
- grouping shapes together, Grouping Shapes Together-The symbol element
- optimizations for, SVG Optimizations-Converting Text to Outlines
- reducing complexity, Reducing Complexity
- sprites, SVG Sprites-Automating SVG consolidation and fallback
- stack consolidation, Fragment identifiers and viewBox
- symbol element, The symbol element
- use element, The use element
- vector image composition, What Is a Vector Image?
- web font creation, Creating and using icon web fonts
- SVGO (SVG Optimizer), Automating Optimization Through Tooling-Pick Your Flavor
- SW (service workers), Service Workers and Image Decoding
- symbol element (SVG format), The symbol element
T
- T.81 standard, History
- task runners, An Image Build System
- TCP (transmission control protocol)
- text
- TIFF (Tagged Image File Format), The e-Commerce Site
- TinySRGB, ImageMagick
- TLS (transport layer security)
- tokenization, CSSOM and Background Image Download
- tools (see digital image tools)
- traces, Chrome
- trailer blocks (GIF format), But wait, there’s more!
- transformation engines, Secure Transformation of Images
- transparency
- true color GIFs, Logical screen descriptor
- truecolor PNGs, Image Formats
- 256-color palette, Logical screen descriptor
- type attribute, Serving Different Image Formats
- type field (PNG format), Chunks
- typographic ligatures, Overview
V
- variable-dimensions images, Variable-Dimensions Images
- Vary header (HTTP), Achieving Cache Offload: Vary and Cache-Control-Near Future: Key
- vector images (see also SVG (Scalable Vector Graphics))
- video formats, Relationship with Video Formats
- viewBox attribute (SVG format), viewBox
- Viewport-Width header, Viewport-Width
- visual comparison metrics, Comparing Images-Butteraugli, Quality Index and SSIM
- visually impaired users, Accessibility, Icon Fonts
- voice-based actions, Accessibility
- VP8 video codec, WebP
W
- watermarking, Business Logic and Watermarking
- web fonts, Icon Fonts
- WebP format, WebP-WebP Tools, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR, Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR, An Image Build System
- width attribute
- Width Client Hint, Width
..................Content has been hidden....................
You can't read the all page of ebook, please click
here login for view all page.