(slides from the O'Reilly webcast, see recording here: http://www.oreilly.com/pub/e/3425)
The web is becoming increasingly image rich. Between high-resolution mobile screens, Pinterest-style design and big background graphics, the average image payload has more than doubled in the last three years. While visually appealing, these images carry a substantial performance cost, and — if not optimized correctly — can make a web experience slow and painful, no matter how beautiful it is.
These slides discuss how you can provide the eye-pleasing experience you want without sacrificing your site's performance. You'll learn about the three primary aspects of image optimization:
Image Compression: How to best encode your images, delivering the same picture with the fewest bytes.
Image Loading: Once your files are as small as they can be, we'll cover the best ways to make them show up quickly in the browser.
Image Operations: Different tools and techniques for integrating image optimization on your site.
5. What Can you do?
Image
Compression
Choose The
Right Format
Control Quality
Image
Loading
Use Responsive
Images
Prioritize Critical
Content
Image
Operations
Encode Well
Transcode in Proxy
6. What Can you do?
Image
Compression
Choose The
Right Format
Control Quality
Image
Loading
Use Responsive
Images
Prioritize Critical
Content
Image
Operations
Encode Well
Transcode in Proxy
25. Using Custom Formats
Server Side, Single URL
GET /book.jpg GET /book.jpg
GET /book.jpg
Accept: image/webp
GET /book.webp
OriginCDN/Cache
26. Using Custom Formats
Server Side, Single URL
GET /book.jxr
GET /book.jpg GET /book.jpg
GET /book.jpg
Accept: image/webp
GET /book.webp
GET /book.jpg
User-Agent: MSIE 10
Accept: image/jxr*
OriginCDN/Cache
* Spartan
52. Which Breakpoints To Use?
How Big & Complex Are Your Images?
Source: Jason Grigsby, “Sensible Jumps In Responsive Image File Sizes”
Width Height File Size
1 320 213 25K
2 453 302 44K
3 579 386 65K
4 687 458 85K
5 786 524 104K
6 885 590 124K
7 975 650 142K
8 990 660 151K
53. Which Breakpoints To Use?
How Big & Complex Are Your Images?
Source: Jason Grigsby, “Sensible Jumps In Responsive Image File Sizes”
point # Width Height File Size
1 320 213 9.0K
2 731 487 29K
3 990 660 40K
82. Tip #5: Encode Well
Quality Curve is NOT a Standard
“Save For Web” is NOT just quality
Decoding Is Standard, Encoding Is Not
Notable Deltas: Chroma Subsampling, Per-Region
Quality, Lossy PNG, SSIM-Based Quality…
If you use one tool: ImageOptim (benchmark)
83. Tip #6: Image Management Service
5 breakpoints * 2 Pixel Ratios * 3 Views *
5 thumbnails * 100,000 Products/Articles…
And tomorrow?
/q75/w120/book.jpg GET /book.jpg
OriginTranscoder
<Big, High Res Img><Right-Sized Img>
84. Image
Compression
Choose The
Right Format
Control Quality
Image
Loading
Use Responsive
Images
Prioritize Critical
Content
Image
Operations
Encode Well
Transcode in Proxy
Enforce a Performance Budget
85. Thank You!
Guy Podjarny
@guypod
Guy Podjarny,
Tobias Baldauf & Mike McCall
High
Performance
Images
SHRINK, LOAD, AND DELIVER IMAGES FOR SPEED
Book Preview
(developer.akamai.com/stuff)