High Performance Images. Shrink, Load, and Deliver Images for Speed - Helion

ebook

Autor: Colin Bendell, Tim Kadlec, Yoav Weiss
ISBN: 978-14-919-2665-9
stron: 354, Format: ebook
Data wydania: 2016-11-03
Księgarnia: Helion

Cena książki: 109,65 zł (poprzednio: 127,50 zł)
Oszczędzasz: 14% (-17,85 zł)

Osoby, które kupiły tę książkę, wybierały także »

Tagi: Tworzenie stron WWW | Web Design

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.

Explore digital image theory and the different formats available
Dive into JPEGs, SVG and vector images, lossless compression, and other formats
Use techniques for downloading and rendering images in a browser, and for loading images on mobile devices and cellular networks
Examine specific rendering techniques, such as lazy loading, image processing, image consolidation, and responsive images
Take responsive images to the next level by using content negotiation between browser and server with the Client Hints HTTP standard
Learn how to operationalize your image workflow

Contributors include Colin Bendell, Tim Kadlec, Yoav Weiss, Guy Podjarny, Nick Doyle, and Mike McCall from Akamai Technologies.

Osoby które kupowały "High Performance Images. Shrink, Load, and Deliver Images for Speed", wybierały także:

HTML5. Kurs video. Poziom pierwszy. Programowanie dla początkujących webmasterów 89,00 zł, (26,70 zł -70%)
Baw się kodem! Twoja własna gra. CoderDojo Nano 24,69 zł, (7,90 zł -68%)
Flask. Kurs video. Od pierwszej linijki kodu do praktycznego zastosowania 119,00 zł, (47,60 zł -60%)
Node.js i TypeScript. Kurs video. Tworzenie skalowalnych mikroserwisów 169,00 zł, (67,60 zł -60%)
PHP 7.3. Kurs video. Tworzenie bezpiecznej strony typu e-commerce 119,00 zł, (53,55 zł -55%)

Spis treści

High Performance Images. Shrink, Load, and Deliver Images for Speed eBook -- spis treści

Preface
- Who Should Read This Book
- What This Book Isnt
- Navigating This Book
- Why We Wrote This Book
- Acknowledgments
- Conventions Used in This Book
- Using Code Examples
- Safari Books Online
- How to Contact Us
1. The Case for Performance
- What About Mobile Apps?
- Speed Matters
- Do Images Impact the Speed of Websites?
- Lingering Challenges
I. Image Files and Formats
2. The Theory Behind Digital Images
- Digital Image Basics
  - Sampling
  - Image Data Representation
  - Color Spaces
  - Additive Versus Substractive
    - RGB (red, green, and blue)
    - CMYK (cyan, magenta, yellow, and key)
    - YCbCr
    - YCgCo
    - Bit depth
    - Encoders and decoders
  - Color Profiles
  - Alpha Channel
  - Frequency Domain
- Image Formats
  - Why Image-Specific Compression?
  - Raster Versus Vector
  - Lossy Versus Lossless Formats
  - Lossy Versus Lossless Compression
  - Prediction
  - Entropy Encoding
  - Relationship with Video Formats
- Comparing Images
  - PSNR and MSE
  - SSIM
  - Butteraugli
- Summary
3. Lossless Image Formats
- GIF (Its Pronounced GIF)
  - Block by Block
    - Header block
    - Logical screen descriptor
    - But wait, theres more!
- Animation
- Transparency with GIF
- LZW, or the Rise and Fall of the GIF
- The PNG File Format
- Understanding the Mechanics of the PNG Format
  - PNG Signature
  - Chunks
    - Ancillary and critical chunks
  - Filters
  - Interlacing
- Image Formats
- Transparency with PNG
- There Can Be Only One!
- Summary
4. JPEG
- History
- The JPEG Format
  - Containers
  - Markers
  - Color Transformations
  - Subsampling
  - Entropy Coding
    - Arithmetic encoding to the rescue!
  - DCT
    - How does DCT work?
    - How does DCT do its magic?
    - Minimal coding units
    - Quantization
    - Compression levels
    - Dropping zeros
    - Dequantization
    - Lossy by nature
  - Progressive JPEGs
  - Unsupported Modes
    - Hierarchical mode
    - Lossless mode
- JPEG Optimizations
  - Lossy
  - Lossless
- MozJPEG
- Summary
5. Browser-Specific Formats
- WebP
  - WebP Browser Support
  - WebP Details
  - WebP Tools
- JPEG XR
  - JPEG XR Browser Support
  - JPEG XR Details
  - JPEG XR Tools
- JPEG 2000
  - JPEG 2000 Browser Support
  - JPEG 2000 Details
  - JPEG 2000 Tools
- Summary
6. SVG and Vector Images
- The Trouble with Raster Formats
- What Is a Vector Image?
- SVG Fundamentals
  - The Grid
  - Understanding the Canvas
  - viewBox
- Getting into Shape
  - Grouping Shapes Together
    - The <g> element
    - The use element
    - The defs element
    - The symbol element
  - Filters
    - Applying filters
    - Performance concerns
    - The wrong way to do filters
- SVG Optimizations
  - Enabling GZip or Brotli
  - Reducing Complexity
  - Converting Text to Outlines
- Automating Optimization Through Tooling
  - Installing the SVGO Node Tool
  - SVGOMG: The Better to See You With, My Dear
  - Pick Your Flavor
- Summary
II. Image Loading
7. Browser Image Loading
- Referencing Images
  - <img> tag
  - CSS background-image
    - File structure
    - Accessibility
- When Are Images Downloaded?
  - Building the Document Object Model
  - The Preloader
  - Networking Constraints and Prioritization
  - HTTP/2 Prioritization
  - CSSOM and Background Image Download
  - Service Workers and Image Decoding
- Summary
8. Lazy Loading
- The Digital Fold
- Wasteful Image Downloads
- Why Arent Browsers Dealing with This?
- Loading Images with JavaScript
  - Deferred Loading
  - Lazy Loading/Images On Demand
  - IntersectionObserver
- When Are Images Loaded?
  - The Preloader and Images
- Lazy Loading Variations
  - Browsers Without JS
  - Low-Quality Image Placeholders
  - Critical Images
- Summary
9. Image Processing
- Decoding
  - Measuring
    - Chrome
    - Chrome on mobile devices
    - Edge
    - Firefox and Safari
  - How Slow Can You Go?
  - Memory Footprint
- GPU Decoding
  - Triggering GPU Decoding
- Summary
10. Image Consolidation (for Network and Cache Efficiencies)
- The Problem
  - TCP Connections and Parallel Requests
  - Small Objects Impact the Connection Pool
  - Efficient Use of the Connection
  - Impact on Browser Cache: Metadata and Small Images
  - Small Objects Observed
  - Logographic Pages
- Raster Consolidation
  - CSS Spriting
    - Creating CSS sprites
    - Merging images
    - Creating CSS styles
    - Adding HTML markup
    - Automating to avoid image and link rot
    - Drawbacks and shortcomings
  - Data URIs
    - Considerations
    - Better: Deferred data URI stylesheet
    - Tools
- Vector Image Consolidation
  - Icon Fonts
    - Overview
    - Creating and using icon web fonts
    - Compatibility
    - Web font pros and cons
  - SVG Sprites
    - SVG fragment identifier links
    - Fragment identifiers and viewBox
    - Automating SVG consolidation and fallback
- Summary
11. Responsive Images
- How RWD Started
- Early Hacks
- Use Cases
  - Fixed-Dimensions Images
  - Variable-Dimensions Images
  - Art Direction
  - Art Direction Versus Resolution Switching
  - Image Formats
  - Avoiding Download and Hide
  - Use Cases Are Not Mutually Exclusive
- Standard Responsive Images
  - srcset x Descriptor
  - srcset w Descriptor
  - <picture>
  - Serving Different Image Formats
- Practical Advice
  - To Picturefill or Not to Picturefill, That Is the Question
  - Intrinsic Dimensions
  - Selection Algorithms
  - srcset Resource Selection May Change
  - Feature Detection
  - currentSrc
- Client Hints
- Are Responsive Images Done?
  - Background Images
  - Height Descriptors
- Responsive Image File Formats
  - Progressive JPEG
  - JPEG 2000
  - Responsive Image Container
  - FLIF
- Summary
12. Client Hints
- Overview
  - Step 1: Initiate the Client Hints Exchange
  - Step 2: Opt-in and Subsequent Requests
  - Step 3: Informed Response
- Client Hint Components
  - Viewport-Width
  - Device Pixel Ratio
  - Width
  - Downlink
  - Save-Data
  - Accept-CH
  - Content-DPR
- Mobile Apps
- Legacy Support and Device Characteristics
  - Fallback: Precise Mode with Device Characteristics + Cookies
  - Fallback: Good-Enough Approach
  - Selecting the Right Image Width
- Summary
13. Image Delivery
- Image Dimensions
- Image Format Selection: Accept, WebP, JPEG 2000, and JPEG XR
- Image Quality
  - Quality and Image Byte Size
  - Quality Index and SSIM
  - Selecting SSIM and Quality Use Cases
  - Creating Consensus on Quality Index
  - Quality Index Conclusion
- Achieving Cache Offload: Vary and Cache-Control
  - Informing the Client with Vary
  - Middle Boxes, Proxies with Cache-Control (and TLS)
  - CDNs and Vary and Cache-Control
  - Near Future: Key
- Single URL Versus Multiple URLs
- File Storage, Backup, and Disaster Recovery
  - Size on Disk
  - Cost of Metadata
- Domain Sharding and HTTP2
  - How Do I Avoid Cache Busting and Redownloading?
  - How Many Shards Should I Use?
  - What Should I Do for HTTP/2?
  - Best Practices
- Secure Image Delivery
  - Secure Transport of Images
  - Secure Transformation of Images
  - Secure Transformation: Architecture
- Summary
14. Operationalizing Your Image Workflow
- Some Use Cases
  - The e-Commerce Site
  - The Social Media Site
  - The News Site
- Business Logic and Watermarking
- Hello, Images
  - Getting Started with a Derivative Image Workflow
  - ImageMagick
  - A Simple Derivative Image Workflow Using Bash
  - An Image Build System
  - A Build System Checklist
- High Volume, High Performance Images
  - A Dynamic Image Server
    - Parsing the request
    - Downloading the master image
    - Decoding the master image
    - Transform!
    - Encoding the derivative image
15. Summary
- SoWhat Do I Do Again?
- Optimize for the Mobile Experience
- Optimize for the Different Users
- Creating Consensus
A. Raster Image Formats
B. Common Tools
- PNG Utilities
- JPEG Utilities
- Animated GIF Utilities
- GUI Utilities
- Exif Utilities
C. Evolution of <img>
- 1989: Inline Images, GIFs, and Patents
- 1995: HTML 2.0 and <img lowsrc>
- 2000: Dark Ages of ImagesHTML 4.01, CSS, and the Status Quo
- 2007: Mobile! Mobile! Mobile!
- 2010: Responsive Web Design, Retina Displays, and Responsive Images
- 2014 Responsive Images HTML Spec
- New Image Formats
- 2015: Client Hints and Accepts
Index