Transcription
ComplimentsofHighPerformanceImagesSHRINK, LOAD, AND DELIVER IMAGES FOR SPEEDColin Bendell, Tim Kadlec, Yoav Weiss,Guy Podjarny, Nick Doyle & Mike McCall
E.RESPONSIVEDESIGNCHANGINGYOURVIEW ONIMAGES63% ofpageweightcomesfrom webimages.
This Preview Edition of High Performance Images is a work in progress. Thefinal book is currently scheduled for release in July 2016 and will be available atoreilly.com and other retailers once it is published.
High Performance ImagesShrink, Load, and Deliver Images for SpeedColin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny,Nick Doyle, and Mike McCallBeijingBoston Farnham SebastopolTokyo
High Performance Imagesby Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, and Mike McCallCopyright 2015 Akamai Technologies. All rights reserved.Printed in the United States of America.Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions arealso available for most titles (http://safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com.Editor: Brian AndersonThe O’Reilly logo is a registered trademark of O’Reilly Media, Inc. High Performance Images, the coverimage, and related trade dress are trademarks of O’Reilly Media, Inc.While the publisher and the authors have used good faith efforts to ensure that the information andinstructions contained in this work are accurate, the publisher and the authors disclaim all responsibilityfor errors or omissions, including without limitation responsibility for damages resulting from the use ofor reliance on this work. Use of the information and instructions contained in this work is at your ownrisk. If any code samples or other technology this work contains or describes is subject to open sourcelicenses or the intellectual property rights of others, it is your responsibility to ensure that your usethereof complies with such licenses and/or rights.978-1-491-93826-3[LSI]
Table of ContentsPreface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi1. The Case for Performance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1What about Mobile Apps?Speed MattersDo images impact speed of websites?Lingering Challenges4566Part I. Image Files and Formats2. The Theory Behind Digital Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11Digital image basicsSamplingImage Data RepresentationColor spacesAdditive vs. SubstractiveColor profilesAlphaFrequency domainImage FormatsWhy Image-Specific Compression?Raster vs. vectorLossy vs. Lossless FormatsLossy vs. Lossless CompressionPredictionEntropy encodingRelationship with Video Formats12121213141920202121222223232324iii
Comparing ImagesSummary24263. Lossless Image Formats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27GIF (It’s pronounced GIF)Block by blockUnderstanding palettesLZW or the rise and fall of the GIFThe PNG file formatUnderstanding the mechanics of the PNG formatPNG SignatureChunksInterlacingThere can be only one!Summary27272929303030313335354. JPEG. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37HistoryThe JPEG FormatContainersMarkersColor transformationsSubsamplingEntropy codingDCTProgressive JPEGsUnsupported modesJPEG 414346565858585960605. Browser Specific Formats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63WebPWebP Browser SupportWebP DetailsWebP ToolsJPEG XRJPEG XR Browser SupportJPEG XR DetailsJPEG XR Toolsiv Table of Contents6464656767686869
JPEG 2000JPEG 2000 Browser SupportJPEG 2000 DetailsJPEG 2000 Tools696970726. SVG and Vector Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75Part II. Image Loading7. Browser Image Loading. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79Referencing Images img tagCSS background-imageWhen Are Images DownloadedBuilding the Document Object Model (DOM)The PreloaderNetworking Constraints and PrioritizationHTTP/2 prioritizationCSSOM and Background Image DownloadService Workers and Image DecodingSummary79808183838587899090918. Lazy Loading. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93The 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 JSLQIP: Low Quality Image PlaceholdersCritical ImagesLazy Loading Summary969798991001011041041051081099. Image Processing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111DecodingMeasuring111112Table of Contents v959595
How slow can you go?Memory usageGPU DecodingTriggering GPU DecodingSummary11411511611811910. Image Consolidation (for Network & Cache Efficiencies). . . . . . . . . . . . . . . . . . . . . . . . 121The ProblemTCP Connections & Parallel RequestsSmall objects impact on the connection poolEfficient use of the connectionImpact on browser cache: metadata and small imagesSmall objects observedA comment about logographic pagesRaster ConsolidationCSS SpritingData URIsVector Image ConsolidationIcon FontsSVG 14715211. Responsive Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155How it startedEarly hacksUse casesFixed dimensions imagesVariable dimensions imagesArt directionArt Direction vs Resolution SwitchingImage formatsAvoiding “Download & 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 Algorithmsvi Table of 177178178179179
Srcset resource selection may changeFeature detectioncurrentSrcClient HintsAre Responsive Images “Done”?Background ImagesHeight descriptorsResponsive Image File FormatsProgressive JPEGJPEG 2000Responsive Image 18418418412. Client Hints. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185OverviewStep 1: Initiate the Client-Hints exchangeStep 2: Opt-in and subsequent requestsStep 3: Informed responseComponentsViewport-WidthDPR: (Density Pixel bile AppsLegacy Support & Device CharacteristicsFallback: “Precise Mode” with Device Characteristics CookiesFallback: good-enough approachSelecting the right image 619919920020320413. Image Delivery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205Image DimensionsImage Format selection: Accept-negotiation, WebP, JP2000, Jpeg XRImage QualityQuality and Image Byte SizeQuality Index and SSIMSelecting SSIM and Quality Use CasesCreating Consensus on Quality IndexTable of Contents205208211211213217218 vii
Quality Index ConclusionAchieving cache offload: Vary & Cache-ControlInforming the client with VaryMiddle boxes, Proxies with Cache-Control (and TLS)CDNs and Vary & Cache-ControlNear Future: KeySingle URL vs Multiple URLsFile Storage, Backup and Disaster-RecoverySize on DiskCost of MetatadataDomain Sharding & 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: Situational 23523623623723924114. Operationalizing Your Image Workflow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Some 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 ServerA Dynamic Image Server 615. Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267So .what do I do again?Optimize for the mobile experienceOptimize for the different “users”:Creating consensusviii Table of Contents267268268270
A. Raster Image Formats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271B. Common Tools. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273C. Evolution of IMG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Table of Contents ix
PrefaceColin BendellIt’s hard not to feel hoodwinked when you pick up a book about images. Rest assured,you will not be let down. Images are everywhere on the web. From user generatedcontent, to product advertisement, to journalism to security. Creating, design, layout,processing and delivery of images are no longer the exclusive domain of our creativeteams. Images on the web are everyone’s concern.This is a book that focuses on the essentials of what you need to deliver high perfor‐mance images on the internet. This is a very broad topic and covers many domains:from color theory, image formats, storage and management, operations delivery,browser and application behavior, responsive web and many topics in between. Withthis knowledge we hope that you can glean useful tips, tricks and practical theory thatwill help you grow your business as you deliver high performance images.Who Should Read This BookWe are software developers and wrote this book with developers in mind. Regardlessof your role, if you find yourself responsible for any part of the life cycle of images,this book will be useful for you. It is intended to go both broad and deep, to give youbackground and context while also providing practical advice that will benefit yourbusiness.What This Book Isn’tThere are a great number of things that this book will not cover. Specifically, it willavoid topics in the creative process and image editing. It is not about graphic design,image editing tools and the ways to optimize scratch memory and disk. In fact thisbook will likely be a disappointment if you are looking for any discussion aroundRAW formats or video editing. Perhaps that is an opportunity for another book.xi
Navigating This BookThere is a lot of ground to cover when talking about high performance images.Images are a complex topic and so we have organized the chapters into two majorsections: foundations and loading. In the foundation chapters we cover image theoryand how then how that applies to the different image formats. Each chapter isdesigned to stand on its own, so with a little background knowledge you can easilyjump from one section to another.Why We Wrote This BookThinking about images always reminds me of this one fishing trip where I met themost cantankerous marlin in fresh water lakes of Northern Canada. The catch was sobig that it took nearly 45 minutes of wrestling to bring the fish aboard my canoe. Attimes, I wondered if I was going to be dragged to the depths of the lake. It was awhopping 1.5m long and weighed 35Kg!Pictures! Or it never happened.If I were you, I’d be skeptical of my claims. To be honest, I don’t believe what I justwrote above. I’ve never been fishing in my life! Let alone the fact that Marlin live inthe warmer Pacific Ocean and not the spring fed lakes from the Atlantic Ocean. Youare probably more likely to find a 35Kg beaver than a fish that size.Images are at the core of storytelling, journalism and advertising. We are good at retelling stories, but it can easily change from person to person. Remember the child‐hood game of telephone where one kid whispers a phrase to the next person around acircle. The phrase High Performance Images would undoubtedly be transformed tobaby fart fart in a circle of 8yr old boys. But if we include a photograph, then the storygains fidelity and less likely to change. Images adds credibility to our stories.The challenge is always the effort to create and communicate imagery. The storyabove created an image in your mind using 369 characters. Gzipped that’s 292 Bytesfor a mental image. But that image was just words and not reliable.xii Preface
Figure P-1. 292 Bytes to create an image in your minds eyeFigure P-2. In contrast, the photograph is 2.4 MBytes which reveals my fraud (Not me,not Canada, somewhere warm)Words can send images fast but are very prone to corruption and is low fidelity. Youprobably have questions - in order to get more detail. Yet, unless you know anythingabout Marlins, or the geography of Northern Canada, or know anything of myangling expertise, you won’t really grasp how “fishy” my story sounds. To get thatdetail you have to ask questions, questions that take time to send. To get a high
This is a book that focuses on the essentials of what you need to deliver high perfor‐ mance images on the internet. This is a very broad topic and covers many
