Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Business of Images

The Business of Images

A quick look at why we need images so much on modern websites and what considerations there are in order to deliver them without impacting the experience of the end user.

97e38d2c6636968957c178ae61d86184?s=128

Michael Gooding

June 30, 2015
Tweet

Transcript

  1. ©2015 AKAMAI | FASTER FORWARDTM 1999 2014 2009 2004 Source:

    https://archive.org/web/
  2. ©2015 AKAMAI | FASTER FORWARDTM Michael Gooding: Performance Evangelist 1.

    The images problem 2. Image Performance & trends 3. Designing an image strategy
  3. ©2015 AKAMAI | FASTER FORWARDTM 1. The images problem “we

    need images more than they need us!”
  4. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Goal: Drive Engagement
  5. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Goal: Deliver a good user experience
  6. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Image(s) is everything > 550 Images
  7. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. A picture speaks a thousand words
  8. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Boris Johnson’s relationship with the capital’s black cab trade has become further troubled after the Sun and Daily Mail newspapers released a video showing the mayor of London on his bicycle telling a taxi driver “to **** *** *** ***! and not in that order”.The exchange in Islington, north London, was caught on camera by a passerby. The driver, one of many black cab operators furious at the way Transport for London, overseen by the mayor, has allowed Uber drivers to undermine their trade shouted at Johnson: “You’re one of them mate. That’s what you are. One of them.” The footage shows Johnson replying: “Why don’t you **** *** *** ***! and not in that order.” The cabbie then drives away yelling: “Yeah ********, I hope you ***.” Johnson is easily identifiable wearing a distinctive yellow helmet with his trademark blonde hair poking out at the sides and a charcoal suit. A source close to the mayor said: “Boris has dozens of chance conversations with Londoners every week. Many are productive and friendly, some are colourful, I know most end happily. I believe this particular cabbie however is a serial heckler.” It is difficult to know if the exchange will confirm Johnson’s admired status as someone apart from mainstream politics or instead the sight of him hurling abuse in public will make voters think he lacks the gravitas and restraint to be prime minister. Johnson, now an MP, is clearly waiting to challenge for the leadership against the chancellor, George Osborne, when David Cameron resigns. The general secretary of LTDA (Licenced Taxi Drivers Association) laughed off news of the heated exchange that took place as Johnson was cycling down St John Street in Islington, north London, at just after 12.20am on Friday 5 June. Behind the row is a serious dispute between the black cabs and the Conservative party over the extent to which they are willing to let Uber take over the business of black cabs by undercutting their fares. The black cab trade claims Uber does not pay taxes and uses unlicensed drivers who come to London from outside the capital for three days and lack any knowledge of London’s streets, relying instead on satnavs to get them around the city. By contrast the black cab drivers say they have learned the knowledge over four years and provide a superior service. The black cab trade also says that the strategy of Uber is to undercut the prices of the licensed trade and then after destroying that trade raise its prices, with a monopoly and a lower level of service. The mayor was told last month that London’s black cab trade would die “on his watch” if he didn’t change the laws to block the smartphone app. At recent industry meeting he was accused of lacking “the guts” to stand up to Uber, which is blamed for putting hundreds of cabbies out of work in recent months. Boris Johnson’s relationship with the capital’s black cab trade has become further troubled after the Sun and Daily Mail newspapers released a video showing the mayor of London on his bicycle telling a taxi driver “to **** *** *** ***! and not in that order”.The exchange in Islington, north London, was caught on camera by a passerby. The driver, one of many black cab operators furious at the way Transport for London, overseen by the mayor, has allowed Uber drivers to undermine their trade shouted at Johnson: “You’re one of them mate. That’s what you are. One of them.” The footage shows Johnson replying: “Why don’t you **** *** *** ***! and not in that order.” The cabbie then drives away yelling: “Yeah ********, I hope you ***.” Johnson is easily identifiable wearing a distinctive yellow helmet with his trademark blonde hair poking out at the sides and a charcoal suit. A source close to the mayor said: “Boris has dozens of chance conversations with Londoners every week. Many are productive and friendly, some are colourful, I know most end happily. I believe this particular cabbie however is a serial heckler.” It is difficult to know if the exchange will confirm Johnson’s admired status as someone apart from mainstream politics or instead the sight of him hurling abuse in public will make voters think he lacks the gravitas and restraint to be prime minister. Johnson, now an MP, is clearly waiting to challenge for the leadership against the chancellor, George Osborne, when David Cameron resigns. The general secretary of LTDA (Licenced Taxi Drivers Association) laughed off news of the heated exchange that took place as Johnson was cycling down St John Street in Islington, north London, at just after 12.20am on Friday 5 June. Behind the row is a serious dispute between the black cabs and the Conservative party over the extent to which they are willing to let Uber take over the business of black cabs by undercutting their fares. The black cab trade claims Uber does not pay taxes and uses unlicensed drivers who come to London from outside the capital for three days and lack any knowledge of London’s streets, relying instead on satnavs to get them around the city. By contrast the black cab drivers say they have learned the knowledge over four years and provide a superior service. The black cab trade also says that the strategy of Uber is to undercut the prices of the licensed trade and then after destroying that trade raise its prices, with a monopoly and a lower level of service. The mayor was told last month that London’s black cab trade would die “on his watch” if he didn’t change the laws to block the smartphone app. At recent industry meeting he was accused of lacking “the guts” to stand up to Uber, which is blamed for putting hundreds of cabbies out of work in recent months. Boris Johnson’s relationship with the capital’s black cab trade has become further troubled after the Sun and Daily Mail newspapers released a video showing the mayor of London on his bicycle telling a taxi driver “to **** *** *** ***! and not in that order”.The exchange in Islington, north London, was caught on camera by a passerby. The driver, one of many black cab operators furious at the way Transport for London, overseen by the mayor, has allowed Uber drivers to undermine their trade shouted at Johnson: “You’re one of them mate. That’s what you are. One of them.” The footage shows Johnson replying: “Why don’t you **** *** *** ***! and not in that order.” The cabbie then drives away yelling: “Yeah ********, I hope you ***.” A picture speaks a thousand words 116KB = 3.6M words OR Story repeated x 6866 A picture speaks 3.6 million words
  9. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Goal: Ultimately to make money
  10. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Time is money
  11. ©2015 AKAMAI | FASTER FORWARDTM 1. The images problem Summary:

    we need nice images but we need good performance too!
  12. ©2015 AKAMAI | FASTER FORWARDTM 2. Image performance & trends

    “Akamai serves 750 billion + images a day”
  13. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Removing Images improves performance 30%
  14. ©2015 AKAMAI | FASTER FORWARDTM Trend #1: Sizes of images

    getting bigger 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 0 500 1000 1500 2000 2500 2010 2011 2012 2013 2014 Size in Kb Page size and image size trends from 2010 Page size Image size Size % 273% growth 290% growth Similar % of page Source: HTTP Archive
  15. ©2015 AKAMAI | FASTER FORWARDTM Trend #1: Number of requests

    staying the same 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100% 0 10 20 30 40 50 60 70 80 90 100 2010 2011 2012 2013 2014 Number of requests Page request and image request trends from 2010 Page Requests Image Requests Request % 23% growth 6% growth 9% decrease Source: HTTP Archive
  16. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Trend #2: Mobile has moved the goal posts Mobile Considerations 1. Device size 2. Network 3. Mobiles are not PC’s
  17. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. #1 Device size 0 100 200 300 400 500 600 700 Size in KB ~500 websites original images v’s resized to fit screen Original Resized Tim Kadlec: Why do we need Responsive Images? 72% less image weight
  18. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. #2 The network Source: OpenSignal 2013 2014 Average 4G Bandwidth UK
  19. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. #3 Mobiles are not PC’s 1.0s 2.0s 2.6s 334ms 1003ms 1180ms 222ms 494ms Decode times 0.7s 103ms
  20. ©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime

    by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Desktop Web • Pinch and Zoom • Flash content mDot (m.) • Whitespace web • Different URLs • Limited functionality Adaptive • Single URL • Hide mDot • Two apps underneath RWD • Single URL • Single App/Code • Future-Proof Trend #3: Evolution of Mobile Web Sites
  21. ©2015 AKAMAI | FASTER FORWARDTM Problem #1: Download & Shrink

  22. ©2015 AKAMAI | FASTER FORWARDTM Problem #1: Download & Shrink

    - Under the hood
  23. ©2015 AKAMAI | FASTER FORWARDTM Problem #1: Mobile actually has

    bigger images….
  24. ©2015 AKAMAI | FASTER FORWARDTM Problem #1: Download & Shrink

    - What it looks like
  25. ©2015 AKAMAI | FASTER FORWARDTM Problem #2 : Download &

    Hide - Desktop
  26. ©2015 AKAMAI | FASTER FORWARDTM Problem #2: Download & Hide

    - Mobile
  27. ©2015 AKAMAI | FASTER FORWARDTM 2. The images problem Summary:

    Mobile has made delivering fast images hard
  28. ©2015 AKAMAI | FASTER FORWARDTM 3. Develop an image strategy

    “Your kidding? I’ve only just implemented a mobile strategy!”
  29. ©2015 AKAMAI | FASTER FORWARDTM Who owns images where you

    work?
  30. ©2015 AKAMAI | FASTER FORWARDTM Image Strategy 101 1. Create

    lots of images 2. Deliver the images
  31. ©2015 AKAMAI | FASTER FORWARDTM 4 angles x 3 categories

    (main, zoom, thumbnail) x 4 formats (jpeg, WebP, GIF, PNG) X 2 aspect ratio x 3 qualities _____________ 288 images (files) per product * * This does not include art direction or HD images Did you say lots? ….. How many?
  32. ©2015 AKAMAI | FASTER FORWARDTM I have a day job,

    what should I focus on? 1. Size 2. Format 3. Quality
  33. ©2015 AKAMAI | FASTER FORWARDTM Case study: Watch this! Example:

    http://www.watches-of-switzerland.co.uk/17380894
  34. ©2015 AKAMAI | FASTER FORWARDTM #1 Size maters Size on

    screen: 315 x 420 900 x 1200 PNG 1.2MB Resized: 185KB 85% saving
  35. ©2015 AKAMAI | FASTER FORWARDTM #2 Right format Zoom image

    is on a transparent overlay Resized PNG : 185KB JPG Version: 81KB 56% saving But JPEG isn’t transparent? WebP Version: 42KB 77% saving Source: https://developers.google.com/speed/webp/gallery2
  36. ©2015 AKAMAI | FASTER FORWARDTM #3 Quality, Tell me more!

    0 50 100 150 200 250 300 350 400 450 10 20 30 40 50 60 70 80 90 100 File size in KB JPEG Quality Rating File size v’s Jpeg Quality Ratings 300x400 450x600 600x800 750x1000 900x1200 Large reduction between 100-90% After 60% limited returns
  37. ©2015 AKAMAI | FASTER FORWARDTM Marketing Department ….. Come on

    down!! Quality: 80 Size: 21KB Quality: 90 Size: 29KB Quality: 70 Size: 18KB Quality: 60 Size: 15KB Quality: 100 Size: 78KB http://bit.ly/1d67Zpq
  38. ©2015 AKAMAI | FASTER FORWARDTM Adapt quality based on network

    conditions Original Image Quality: 100% Size: 60KB Network Conditions Average Adapted Image Throughput: High Size: 54KB (90%) Throughput: Med Size: 40KB (67%) Throughput: Low Size: 24KB (40%)
  39. ©2015 AKAMAI | FASTER FORWARDTM Image Creation OR 1. Need

    to store them somewhere 2. Faster delivery 3. New versions a pain (watermarks, breakpoints etc) 4. Delay in go live process 1. Don’t generate/store what you don’t need 2. Slower delivery 3. Easy to add new versions
  40. ©2015 AKAMAI | FASTER FORWARDTM Delivery 1. Browser Solutions –

    Responsive images 2. Client side - JavaScript 3. Server side – Cookies & Headers 4. 3rd Party tools
  41. ©2015 AKAMAI | FASTER FORWARDTM Warnings 1. Don’t dilute the

    cache 2. Think about Image SEO & sharing
  42. ©2015 AKAMAI | FASTER FORWARDTM How do I know if

    I’m doing a good job?
  43. ©2015 AKAMAI | FASTER FORWARDTM 3. Develop an image strategy

    Summary: Find what works for you to Create & Deliver
  44. ©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast,

    personalized web experiences and manage complexity from peak demand, mobile devices and data collection.