book

High Performance Images

by Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, Mike McCall

November 2016

Intermediate to advanced

354 pages

8h 39m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who Should Read This BookWhat This Book Isn’tNavigating This BookWhy We Wrote This BookAcknowledgmentsConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact Us
What About Mobile Apps?Speed MattersDo Images Impact the Speed of Websites?Lingering Challenges
Digital Image BasicsSamplingImage Data RepresentationColor SpacesAdditive Versus SubstractiveColor ProfilesAlpha ChannelFrequency DomainImage FormatsWhy Image-Specific Compression?Raster Versus VectorLossy Versus Lossless FormatsLossy Versus Lossless CompressionPredictionEntropy EncodingRelationship with Video FormatsComparing ImagesPSNR and MSESSIMButteraugliSummary
GIF (It’s Pronounced “GIF”)Block by BlockAnimationTransparency with GIFLZW, or the Rise and Fall of the GIFThe PNG File FormatUnderstanding the Mechanics of the PNG FormatPNG SignatureChunksFiltersInterlacingImage FormatsTransparency with PNGThere Can Be Only One!Summary
HistoryThe JPEG FormatContainersMarkersColor TransformationsSubsamplingEntropy CodingDCTProgressive JPEGsUnsupported ModesJPEG OptimizationsLossyLosslessMozJPEGSummary
WebPWebP Browser SupportWebP DetailsWebP ToolsJPEG XRJPEG XR Browser SupportJPEG XR DetailsJPEG XR ToolsJPEG 2000JPEG 2000 Browser SupportJPEG 2000 DetailsJPEG 2000 ToolsSummary
The Trouble with Raster FormatsWhat Is a Vector Image?SVG FundamentalsThe GridUnderstanding the CanvasviewBoxGetting into ShapeGrouping Shapes TogetherFiltersSVG OptimizationsEnabling GZip or BrotliReducing ComplexityConverting Text to OutlinesAutomating Optimization Through ToolingInstalling the SVGO Node ToolSVGOMG: The Better to See You With, My DearPick Your FlavorSummary
Referencing Images<img> tagCSS background-imageWhen Are Images Downloaded?Building the Document Object ModelThe PreloaderNetworking Constraints and PrioritizationHTTP/2 PrioritizationCSSOM and Background Image DownloadService Workers and Image DecodingSummary

The Digital FoldWasteful Image DownloadsWhy Aren’t Browsers Dealing with This?Loading Images with JavaScriptDeferred LoadingLazy Loading/Images On DemandIntersectionObserverWhen Are Images Loaded?The Preloader and ImagesLazy Loading VariationsBrowsers Without JSLow-Quality Image PlaceholdersCritical ImagesSummary
DecodingMeasuringHow Slow Can You Go?Memory FootprintGPU DecodingTriggering GPU DecodingSummary
The ProblemTCP Connections and Parallel RequestsSmall Objects Impact the Connection PoolEfficient Use of the ConnectionImpact on Browser Cache: Metadata and Small ImagesSmall Objects ObservedLogographic PagesRaster ConsolidationCSS SpritingData URIsVector Image ConsolidationIcon FontsSVG SpritesSummary
How RWD StartedEarly HacksUse CasesFixed-Dimensions ImagesVariable-Dimensions ImagesArt DirectionArt Direction Versus Resolution SwitchingImage FormatsAvoiding “Download and Hide”Use Cases Are Not Mutually ExclusiveStandard Responsive Imagessrcset x Descriptorsrcset w Descriptor<picture>Serving Different Image FormatsPractical AdviceTo Picturefill or Not to Picturefill, That Is the QuestionIntrinsic DimensionsSelection Algorithmssrcset Resource Selection May ChangeFeature DetectioncurrentSrcClient HintsAre Responsive Images “Done”?Background ImagesHeight DescriptorsResponsive Image File FormatsProgressive JPEGJPEG 2000Responsive Image ContainerFLIFSummary
OverviewStep 1: Initiate the Client Hints ExchangeStep 2: Opt-in and Subsequent RequestsStep 3: Informed ResponseClient Hint ComponentsViewport-WidthDevice Pixel RatioWidthDownlinkSave-DataAccept-CHContent-DPRMobile AppsLegacy Support and Device CharacteristicsFallback: “Precise Mode” with Device Characteristics + CookiesFallback: Good-Enough ApproachSelecting the Right Image WidthSummary
Image DimensionsImage Format Selection: Accept, WebP, JPEG 2000, and JPEG XRImage QualityQuality and Image Byte SizeQuality Index and SSIMSelecting SSIM and Quality Use CasesCreating Consensus on Quality IndexQuality Index ConclusionAchieving Cache Offload: Vary and Cache-ControlInforming the Client with VaryMiddle Boxes, Proxies with Cache-Control (and TLS)CDNs and Vary and Cache-ControlNear Future: KeySingle URL Versus Multiple URLsFile Storage, Backup, and Disaster RecoverySize on DiskCost of MetadataDomain Sharding and HTTP2How Do I Avoid Cache Busting and Redownloading?How Many Shards Should I Use?What Should I Do for HTTP/2?Best PracticesSecure Image DeliverySecure Transport of ImagesSecure Transformation of ImagesSecure Transformation: ArchitectureSummary
Some Use CasesThe e-Commerce SiteThe Social Media SiteThe News SiteBusiness Logic and WatermarkingHello, ImagesGetting Started with a Derivative Image WorkflowImageMagickA Simple Derivative Image Workflow Using BashAn Image Build SystemA Build System ChecklistHigh Volume, High Performance ImagesA Dynamic Image Server
So…What Do I Do Again?Optimize for the Mobile ExperienceOptimize for the Different “Users”Creating Consensus
PNG UtilitiesJPEG UtilitiesAnimated GIF UtilitiesGUI UtilitiesExif Utilities
1989: Inline Images, GIFs, and Patents1995: HTML 2.0 and <img lowsrc>2000: Dark Ages of Images—HTML 4.01, CSS, and the Status Quo2007: Mobile! Mobile! Mobile!2010: Responsive Web Design, Retina Displays, and Responsive Images2014 Responsive Images HTML SpecNew Image Formats2015: Client Hints and Accepts

Overview

High-quality images have an amazing power of attraction. Just add some stunning photos and graphics to your website or app and watch your user engagement and conversion numbers climb. It can be tricky, but with this practical guide, you’ll master the many facets of delivering high performance images on the internet—without adversely affecting site performance.

You’ll learn the nuts and bolts of color theory, image formats, storage and management, operations delivery, browser and application behavior, the responsive web, and many other topics. Ideal for developers, this book also provides useful tips, tricks, and practical theory for processing and displaying powerful images that won’t slow down your online product.