A Picture Costs A Thousand Words

©2013 Akamai Faster ForwardTM

A PICTURE COSTS A THOUSAND WORDS

Guy Podjarny (@guypod) CTO, Web Experience, Akamai


YOU HAVE AN IMAGE PROBLEM


The Good (Performance-wise)

-  Images are pre-compressed -  No need to gzip them, can’t forget to do so

-  Images don’t block rendering -  Images don’t block downloading other resources

-  Including other images

-  Images don’t modify the DOM -  Images are often rendered by the GPU -  Images are STATIC


The Bad (Performance-wise)

-  Images contend (with other resources) for bandwidth -  Images contend for CPU/GPU -  Images contend for TCP connections -  Images are visually significant on a page -  Pages contain A LOT OF images -  Images are HEAVY


Images make up 61% of Page Bytes

h"p://h"parchive.org/interes2ng.php#bytesperpage


Images make up 69% of Page Bytes on Mobile

h"p://mobile.h"parchive.org/interes2ng.php#bytesperpage


Image Bytes grew 19% in past 8 months

h"p://h"parchive.org/trends.php?s=All&minlabel=Oct+1+2012&maxlabel=May+15+2013#bytesImg&reqImg


What is there to optimize with images?

-  Optimizing image formats

-  Optimizing image delivery

-  Optimizing image loading process

-  Optimizing images for mobile


OPTIMIZING IMAGE FORMATS


GIF – Graphics Interchange Format

-  26 Years Old (1987) -  256 Colors -  “Simple” Transparency

-  No partial (Alpha) transparency

-  Supported Everywhere -  Supports Animation -  Previously Patented

-  Patents expired by now


PNG – Portable Network Graphics

-  17 Years Old (1996) -  Supports 8-32 bit color palettes

-  PNG8 and PNG24 Most Common

-  Supports Alpha Transparency -  Good browser support

-  Certain issues in IE 6-8

-  Non-patented -  Supports Animation (MNG)!

-  No browser support


Lossless PNG Compression

-  Delta-Filter Encoding -  Write pixels as delta from neighbors

-  Compress using LZ77 -  Reference past sequences

-  Compress using Huffman code -  Identify repeating sequences -  Code popular ones with fewer bytes

= 1,2,3,4,5, 0x20

= 1x25

= 1,2,3,4,5, (-‐5,5)x5

Up Delta

LeL Delta


Lossless PNG Optimization

-  Delta Filter Optimization -  Per row, choose comparison target: None, Left, Up, Average, Paeth

-  Convert from PNG 24 -> 8 -  Possibly using multiple PNG 8 layers

-  Tune LZ77 distance/length parameters -  Tune Huffman buffer size -  Trade “Alpha” transparency with simple (100%) transparency -  PNG Optimization Tools: PNGCrush, OptiPNG


JPEG – Joint Photographic Experts Group

-  21 years old (1992) -  Supports RGB Colors (24 bit)

-  Supports custom color palettes

-  No Transparency Support -  Doable with HTML5 Canvas Hacks

-  No Animation Support -  Not impressed…

-  It’s a Lossy Format


JPEG Compression - Simplified

1.  Divide image into 8x8 pixel blocks



1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance

Y Cb Cr



1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance 3.  Write pixels as ~delta from average •  and round (DCT + Quantization)

Y Cb Cr



1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance 3.  Write pixels as ~delta from average

and round (DCT + Quantization) 4.  Write as line, compress (Huffman)

= -‐9,-‐1,0(x62)



1.  Divide image into 8x8 pixel blocks 2.  Split Luminance & Chrominance 3.  Write pixels as delta from average

and round (DCT + Quantization) 4.  Write as line, compress (Huffman) Q=10 Q=50 Original


Original PNG: 574 KB JPEG, Q=90: 105 KB


Lossy Compression – Not for Everyone

GIF, 11 KB

JPEG, Q=80, 8 KB

JPEG, Q=30, 4 KB

Average Color not representa2ve

PNG, 7 KB


JPEG Optimization

-  Control Quality -  75-85 tops, try to go lower -  Quality level is not a percentage

-  Tune Huffman Buffer Size -  Low Adoption: Use Arithmetic Encoding instead of Huffman -  Tools: jpegtran, ImageMagick

0

50

100

150

200

250

300

350

0 20 40 60 80 100 120

Quality vs File Size


JPEG Metadata

120KB Thumbnail


JPEG Optimization

-  Control Quality -  75-85 tops, try to go lower

-  Tune Huffman Buffer Size -  Low Adoption: Use Arithmetic Encoding instead of Huffman -  Remove Metadata -  Tools: jpegtran, ImageMagick


JPEG Baseline vs. Progressive

Baseline

Progressive h"p://www.bookofspeed.com/chapter5.html

Pro-‐Tip: Configure how blocks are “interlaced” (The “Coefficient”) -‐  Controls minimum quality level -‐  Affects Size


Baseline vs Progressive – Visual Progress Baseline

Progressive

Patrick Meenan: “… Looking at the Speed Index, we saw median improvements of 7% on Cable and 15% on DSL …”

Loading…


JPEG Baseline vs. Progressive

Baseline

Progressive h"p://www.bookofspeed.com/chapter5.html

1 2

0 0

1 0

0 0

3 -‐1

0 0

1 2 0 0 1 0 0 0 3 -‐1 0 0

1 1 3 2 0 -‐1 0 0 0 0 0 0

1 1 3 2 0 -‐1 EOB

Mo’ zeros, Mo’ compression


Baseline vs Progressive – File Size

Baseline – Progressive Size for 100,000 JPEGs Stoyan Stefanov: Images of size 10K+ likely smaller as Progressive. Median delta is 3%, Up to 10% common, 250KB gap extreme.


Progressive vs Baseline – Current Reality

Ann Robson: “… In a thousand-‐image sample, 92.6% are baseline …”

Patrick Meenan: “… I crawled all 7 million JPEG images that were served by the top 300k websites in the May 1st HTTP Archive crawl and came out with....wait for it.... s_ll only 7% …”


Progressive PNG & GIF

-  GIF & PNG Have “Interlacing” modes -  Similar “Progressive” effect

-  Fixed at 4 (GIF) or 7 (PNG) interlacing levels -  PNG’s technique, Adam7, a bit more sophisticated

-  Progressive PNG/GIF are BIGGER -  Interlacing interferes with compression algorithms -  Files often 20%-30% bigger

-  Still benefit from earlier visual -  So consider for bigger images

h"p://www.codinghorror.com/blog/ 2005/12/progressive-‐image-‐rendering.html


Lossless JPEG Optimization


-  Tune Huffman Buffer Size -  Low Adoption: Use Arithmetic Encoding instead of Huffman -  Remove Metadata -  Consider (and default to) Progressive over Baseline -  Tune Progressive Scan coefficients -  Tools: jpegtran, ImageMagick, jpegrescan


Retina Images

bg_header_retina.png – 56 KB

bg_header.png – 14KB

1 2

4 3

•  Marketing-speak for 2x pixel ratio •  1 CSS pixel = 4 real pixels

•  Other ratios are possible (1.5x common) 3X


JPEG Retina Trick: Double the Size, Lower Quality

-  Retina images are HEAVY (often ~3x file size) -  Regular images are “fuzzy” on Retina -  Alternative: Double image size, Aggressively reduce Quality

-  Discovered by Netvlies & Thomas Fuchs, popularized by Filament Group -  Works on 1x-1.5x too -  Maintain HTML size!

-  Sharper Image, Smaller File

-  Known Downside: Higher Memory Use


Lossless JPEG Optimization


-  Tune Huffman Buffer Size -  Low Adoption: Use Arithmetic Encoding instead of Huffman -  Remove Metadata -  Consider (and default to) Progressive over Baseline -  Tune Progressive Scan coefficients -  Consider Retina Double-Size-Low-Quality Trick -  Tools: jpegtran, ImageMagick, jpegrescan


Got Through JPEG!


WebP – Web Picture?

-  2 Years Old (2011) -  Pronounced “Weppy” -  Supports Lossless & Lossy Modes -  Very well documented

-  See: https://developers.google.com/speed/webp/

-  Related VP8 Google Patents “released” by Google -  Other patents licensed by Patent for global use -  Nokia still claiming related Patents


WebP vs PNG

Google: Lossless WebP 26%-‐34% Smaller than PNG

Yoav Weiss: Lossless WebP 33%-‐42% Smaller than PNG


WebP vs JPEG

Google: Lossy WebP 25%-‐ 34% Smaller than JPEG

Yoav Weiss: Lossy WebP 37% Smaller than PNG


WebP’s Magic Formula Highlights

-  Spatial Predictive Encoding -  Choose best next step “guess”

-  Arithmetic Entropy Encoder -  Better than Huffman Code

-  Adaptive Block Quantization -  Per-region quality setting


WebP’s Magic Formula Highlights

-  Spatial Predictive Encoding -  Choose best next step “guess”

-  Arithmetic Entropy Encoder -  Better than Huffman Code

-  Adaptive Block Quantization -  Per-region quality setting

-  Color Cache Coding -  Update color palette over time

-  Optimization built into encoder


WebP Encode/Decode Times


WebP – Impressed Yet?

-  26% - 42% Smaller than PNG -  25% - 37% Smaller than JPEG -  Supports Alpha Transparency -  Supports Animation! -  Why did waste time talking

about the other formats?!


VERY Limited Browser Support

Supported by: -  Chrome 9+ -  Android 4+ -  Opera 12+ -  Opera Mobile 11.1+

~26% WebP Client Support (35% by some numbers)

Ilya Grigorik: Deploying new image formats on the Web is HARD (but doable)


JPEGXR vs WebP

-  4 Years Old (2009) -  JPEG eXtended Range

-  JPEG XR / JXR

-  ~Matches WebP sizes -  Support: IE 9+

-  Including Windows Phone 8

-  Patented by Microsoft -  Under “Open Spec Promise” -  Jxrlib has BSD License


WebP + JPEG XR Coverage

Supported by: -  IE 9+ -  Chrome 9+ -  Android 4+ -  Opera 12+ -  Opera Mobile 11.1+

WebP –or– JPEG XR Supported on ~ 50% of clients

Chrome, 19.5

Android Webkit, 5.4

Opera Mini, 1 Chrome

Mobile, 0.7 Opera, 0.3

IE 9, 13.2

IE 8, 10.2 IE 10, 9.7

IE 7, 6.2

Other, 0.9

IE, 40.2


Image Format support is complicated…

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(graphics)#Image_format_support


When to use which format?

-  For tiny images (e.g. 1x1 pixel) use GIF -  PNG-8 practically always smaller

-  For most small images, use PNG -  Where possible, prefer JPEG to PNG -  Use WebP/JPEGXR where possible

-  Serve only to supporting clients

-  For Animation, use GIF -  Always optimize your images


OPTIMIZING IMAGE DELIVERY


Delivering Static Files – Basics

•  Use a cookieless domain •  Usually requires new top level domain

•  Cache images with a CDN •  Ideally, use Akamai ;)

•  Leverage browser cache •  Cache long term •  Use Versioning

100ms


To Shard or not to Shard?

h"p://worlddomina2onsummit.com/

5.5s: Start Images Download

17s: End Images Download

-‐  11.5 secs, ~750 images, 1.8 MB -‐  Most of the 2me “Green” (TTFB) -‐  Queued across 6 connec2ons


Domain Sharding

-  Split images across domain “aliases” (1.foo.com, 2.foo.com…) -  Tricks browser into opening more connections -  Cons: DNS queries, can cause network congestion, router

overload risk, hinders SPDY/HTTP2…


To Shard or not to Shard? 89 Parallel Reqs h"p://wn.com/

-‐  10 Shards -‐  8 seconds to download top 22KB image


To Shard or not to Shard?

-  It Depends… On your site. -  Excessive Sharding is bad

-  You NEVER need 10 shards

-  No Sharding is often bad -  Plus hinders “cookieless domain” optimization

-  Good default is 2 shards -  Measure your own site -  Keep Bandwidth Contention in mind


Delivering WebP

-  To Deliver WebP, we must detect WebP Support

Ilya Grigorik: Please go ahead!

Me: Ilya, can I shamelessly reuse your Google I/O WebP Slides?

Client-side detection •  Use modernizr, or use the 1 line WebP detect function...

<script src="modernizr.min.js"></script> <script> if (Modernizr.webp) { var webpImg = document.createElement("img");

webpImg.setAttribute('src', '/awesome.webp'); webpImg.setAttribute('alt', 'na'); document.body.appendChild(webpImg);

} else { // Fallback to non-‐webp, or load a JS decoder: // webpjs-‐0.0.2.min.js / webpjs-‐0.0.2.swf } </script>

+ Bullet proof, custom URLs for .webp files (cache friendly), easy fallback for all clients - Must wait for JS execution to schedule image downloads

http://webpjs.appspot.com/

Server-side User-Agent detection Serve different HTML based on User-Agent header

<html> ... <img src="awesome.webp"> ... <html>

<html> ... <img src="awesome.jpg"> ... <html>

Cache-‐Control: private

Or inject a polyfill library!

Deploying new image formats on the web

+ No extra latency overhead, automated by the server - Returned HTML should be marked with "Cache-Control: private"

Dealing with interoperability ...

•  Link sharing: send a link to a .webp image to a friend running IE ... sad face.

•  Save As: save .webp file locally; no way to open it? o  Fixed: Chrome is now a file handler for .webp! o  Provide an explicit 'Download' option, and link to JPEG / PNG.

http://news.cnet.com/8301-1023_3-57580664-93/facebook-tries-googles-webp-image-format-users-squawk/

Client-Server Accept negotiation

Serve different Image based on Accept header...

Deploying WebP via Accept negotiation

Accept: im

age/webp

Accept: image/png

+ No extra latency overhead + Fully transparent to your existing application!

Only works on Opera…

(today)

UA Detection on Images also valid


WebP Delivery & Akamai

Define paths that may return WebP Images

Accept Header Nego2a2on (UA Matching Just as Easy)

(Near) Future: Use Device Characteris2c

Changes path to /webp/images/… (also updates cache key)

Mark downstream cache as private


OPTIMIZING IMAGE LOADING ORDER


Lazy Loading Images

•  Most Images are “below the fold”

•  Below-the-fold images: •  Must Delay Onload •  May delay higher images

•  Bandwidth Contention •  May block higher images

•  Connection Contention •  Likely not seen by most users


Loading Images with Scripts – Core Concept

Warning: Over Simplified!!!

Full Example Here

-‐  Manual: -‐  DIY -‐  jQuery Plugin -‐  WP Plugin -‐  None are great -‐  Func2onal, not fast

-‐  Automated: -‐  Akamai FEO -‐  PageSpeed -‐  …

Based on Y axis, somewhat tricky


Speculative Parsing & Scripted Image Loader

-  Speculative Parser doesn’t “see” the image -  Image tag only created when script actually executes

-  Implication #1: No predictive DNS prefetch & TCP connects -  Implication #2: No early download

-  On most websites, images are blocked by CSS & Scripts anyway

-  Implication #3: In SPDY case, no early request -  When SPDY is used, images are far less likely to be blocked

-  My Experience: Still worth doing -  Costs are low compared to gains


Low Quality Image Placeholders - LQIP

-  Load low quality images first -  Smaller, e.g. 20KB/img

-  Wait for page to complete loading

-  Load high quality image -  Bigger, e.g. 80KB/img -  Doesn’t delay anything

20KB

80KB


LQIP Pros & Cons

-  Pros -  Smaller images loaded quickly, page more visually complete & usable -  Images seen and optimized by speculative parser -  Can control if/when to download higher quality images

-  Cons -  Page downloads more bytes overall -  Lower quality image loaded

-  Can be combined with Lazy Loading -  Spares initial downloading of below-the-fold images


Proposal: IMG defer/lazy

-  Format: <img src=“a.jpg” defer> (or “lazy”) -  Images with “defer”:

-  Must not be downloaded if hidden (display:none) -  Must not delay the load event -  Must download if they’re in the page and not hidden -  Implied: May be deferred to onload or loaded on demand

-  Note: To determine if hidden, parsers need to wait for CSS -  Means speculative parsing is more limited

-  Details still tbd… -  “Waiting for implementor interest”


RESPONSIVE IMAGES


Download and Shrink

Smaller Screen, Same Size Image

h"p://img.2meinc.net/2me/daily/2013/1305/485_nat_oklahoma_recovery_0523.jpg


Responsive Images – Is It Worth it?

128px, 2.9 KB 240px, 6.8 KB

320px, 10.6 KB

480px, 21.3 KB

Full Res, 50.1 KB

Site: lonelyplanet.com Device: iPhone 4 Before: 867 KB Acer: 570 KB


Simply serve small images to mobile?


Responsive Images over 471 Websites

Tim Kadlec: Why do we need Responsive Images?

72% less image weight


Retina Fun

ipad_hero.jpg

113 KB Served to iPad 2

ipad_hero_2x.jpg

360 KB Served to iPad 3

Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d Safari/8536.25


Responsive Web Design (RWD) One URL, Adapt to screen size


Option #1: Script Loader of Responsive Images


Full Details Here

Pros: -‐  Flexible -‐  Can mix with lazy loading

Cons: -‐  Hinders pre-‐parser -‐  May be slow to load

Combine with LQIP? -‐  Always load low res -‐  Lazy-‐load high res

+ “?” + window.innerWidth


Option #2: Use CSS for Images

Pros: -‐  No need for JavaScript -‐  Non-‐MQ browsers load

“default” image (IE8…) Cons: -‐  Verbose -‐  Verbose-‐er with Re2na -‐  Not equal to <img>


Full Details Here

Tim Kadlec: This technique will double-‐download on Android. There are beher (carefully craced) CSS/HTML structures.


Option #3: Use SVG

Pros: -  Rich Vector Graphics Format

-  Always “perfectly” painted -  Supports media queries!

Cons: -  Textual, no “smart” compression

-  Can be gzipped, but often bigger -  Not supported by older browsers

-  IE 8 & older, Android 2.3 & older


Standardizing Responsive Images

@srcset

<picture>

h"ps://github.com/sco"jehl/picturefill


Stay Up To Date: http://responsiveimages.org/


SUMMARY


Summary

-  Images are not as simple as they seem… -  Optimizing images is worth your while!

-  Choose the right image format and optimize your images -  Optimize Image Delivery (CDN, caching, sharding…) -  Leverage WebP/JPEG-XR, but do so with care -  Use LQIP and/or lazy loading of images -  Use Responsive Images

-  Sit back and reap the rewards…


A PICTURE COSTS A THOUSAND WORDS

Guy Podjarny (@guypod) CTO, Web Experience, Akamai

Thank You! Ques2ons?

A Picture Costs A Thousand Words

Technology

Transcript of A Picture Costs A Thousand Words