Image optimization pipeline

Slide 1

Slide 1 text

IMAGE OPTIMIZATION PIPELINE BEFORE AFTER

Slide 2

Slide 2 text

SERGEY CHERNYSHEV • Work at truTV/Turner • Organize NY Meetup • Developed ShowSlow and a few other tools @SergeyChe, @PerfPlanet

Slide 3

Slide 3 text

WHY FASTER? http://blog.kissmetrics.com/loading-time/

Slide 4

Slide 4 text

websiteoptimization.com

Slide 5

Slide 5 text

WHY IMAGES? • Largest Payload (63%) • Grew 21% in size in 2011 • Main connection blocker • The visual indicator • We will only get more of them 598K

Slide 6

Slide 6 text

AUTOMATE • Extra step in photo editor's workﬂow • Not obvious to photo editors, they shouldn't care • User Generated Content can't be manually processed

Slide 7

Slide 7 text

WHERE TO AUTOMATE? • PhotoShop scripting • CMS hooks • Version control commit hooks • Application logic (especially for UGC) • File system monitors

Slide 8

Slide 8 text

SMUSHING (lossless compression) • Removes meta-data • Preserves quality • Saves more then you think! • Kudos to Stoyan & Nicole META-DATA

Slide 9

Slide 9 text

LOSSY COMPRESSION 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% Increase compression until quality visibly degrades

Slide 10

Slide 10 text

LOSSY COMPRESSION 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% But it heavily depends on size and content of an image

Slide 11

Slide 11 text

LOSSY COMPRESSION AUTOMATION ImgMin

Slide 12

Slide 12 text

CSS SPRITES • Games are cool! • Reduces latency cost • SpriteMe.org • Don't overdo it • We need automation for this!

Slide 13

Slide 13 text

RESIZE TO SIZE Responsive Design http://blog.braintrafﬁc.com/2012/01/content-strategy-and-responsive-design/

Slide 14

Slide 14 text

RESIZE TO SIZE • Thumbnails! • Never resize in the browser • Create a map of sizes for each image type • Changing proportions is hard • Do not resize on the ﬂy Preserving Proportions Changing Proportions

Slide 15

Slide 15 text

LOAD LATER

Slide 16

Slide 16 text

LOAD LATER

Slide 17

Slide 17 text

LOAD LATER AWESOME PIC

Slide 18

Slide 18 text

REWRITE URLS • Enabling/disabling and moving CDNs (including SSL) • Domain sharding • Different setups in DEV/QA/PROD AWESOME PIC

• Caching forever • Data URIs?

Slide 19

Slide 19 text

CACHE FOREVER "POINTLESS 304S"

Slide 20

Slide 20 text

CACHE FOREVER Far-future Expires and Cache-Control headers

Slide 21

Slide 21 text

CACHE FOREVER Far-future Expires and Cache-Control headers Finger-print the URL with hash of the content