Responsive Images
and Video
Jason Grigsby • @grigs • cloudfour.com
Follow along at @grigs_talks

http://bit.ly/grigs-2013-10-13
The web has always been a balancing act…

http://www.flickr.com/photos/classblog/5136926303
with many competing priorities.

http://www.flickr.com/photos/tudor/4324056624/
Finding that balance is
more difficult…

http://www.flickr.com/photos/superfantastic/50088733/
as device diversity increases.
http://www.flickr.com/photos/lyza/7382235106
Responsive web design offers us

for a sensible way to deal with device diversity.
http://www.flickr.com/photos/darrentunnic...
And yet the one question I frequently ask myself is…
Can a one size fits all solution…

http://www.flickr.com/photos/sldghmmr/6041481069
compete with a
tailored experience?
http://www.flickr.com/photos/helloturkeytoe/4932748746/
Important question from many perspectives:
Search engine optimization
Context
Advertising
Performance
Search engine optimization
Search engine optimization
Search engine optimization
Search engine optimization
What about mobile context?

http://www.flickr.com/photos/brunauto/5062644167/
80% during misc downtime
76% while waiting in lines
86% while watching TV
69% for point of sale research

http://www.flickr...
TMI
39% use phone
on toilet
Advertising?

http://www.flickr.com/photos/sh1mmer/
2510487525
PERFORMANCE
People
demand
fast web
sites.
http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
Privacy and cookie policy

Log In

Subscribe

Subscribe

Slow sites
mean real
dollars
are lost.

Basket

Reports

Contact ...
Top ecommerce sites are 22% slower than last year

http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-s...
Mobile users don’t care that their network is slow.

http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_W...
Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
Many ways to navigate desktop web sites on mobile.

Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?...
There are no gestures that
can make a web site faster.

http://www.flickr.com/photos/stephenjohnbryde/384095768/
http://www.flickr.com/photos/nathaninsandiego/4829858186/
http://www.flickr.com/photos/wesbrowning/5316400258/
BBG: Before Boston Globe

http://www.flickr.com/photos/69797234@N06/7203485148/
Original

Resized

K Saved

% Saved

Original

Resized

K Saved

% Saved

34.7K

8.1K

26.6K

76.6%

43.4K

8.2K

35.2K

8...
Original

Resized

K Saved

% Saved

Original

Resized

K Saved

% Saved

34.7K

8.1K

26.6K

76.6%

43.4K

8.2K

35.2K

8...
Original

Resized

K Saved

% Saved

Original

Resized

K Saved

% Saved

34.7K

8.1K

26.6K

76.6%

43.4K

8.2K

35.2K

8...
The resounding answer from the community:

Mobile First Responsive Web Design
Mobile First Responsive Web Design

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
“Awesome. We’ll
devote a chapter to
Mobile First
Responsive Web
Design in our book.”
Famous last words.
Where are the Mobile First RWDs?
106 sites from mediaqueri.es tested
9%
4%

25%

21%
4%

Mobile is Larger
Same Size
Less t...
Guy Podjarny repeated the experiment
2013: 476 sites from mediaqueri.es tested

http://www.guypo.com/uncategorized/real-wo...
http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
http://www.flickr.com/photos/beautyredefined/2643858323/
http://www.flickr.com/photos/puuikibeach/3654517679
Most responsive web designs are…
Time to pen another fool’s gold post?
http://www.flickr.com/photos/myklroventine/3400040943/
“

Being Responsive from a layout perspective should
not preclude us from being responsive from a
performance and interact...
5

key techniques for
responsible
responsive design
#1

Build Mobile First
Responsive Designs

http://www.flickr.com/photos/auyongcheemeng/95769332/
Different than
Mobile First
Design Theory

http://www.flickr.com/photos/localcelebrity/4831362933/
Mobile First Responsive Web Design is a
technical approach for responsive designs.

http://bradfrostweb.com/blog/web/mobil...
Reorder media queries so cascade
goes from small to large screens
/* Wider viewports/higher resolutions (e.g. desktop)
@me...
“

The absence of support for media queries is in fact
the first media query.
—Bryan Rieger, Yiibu
IE8 and below don’t
support media queries.
What do you see if your browser doesn’t support media queries?

Desktop First Responsive Web Design =
Desktop Fallback
Mob...
IE conditional comments
<link rel="stylesheet" type="text/css" href="taps.css" />
<link rel="stylesheet" type="text/css" h...
IE conditional comments
<link rel="stylesheet" type="text/css" href="taps.css" />
<link rel="stylesheet" type="text/css" h...
#2
Keep CSS images
in their place
http://www.flickr.com/photos/lintmachine/2306383943/
Images with display:none are still downloaded
@media screen and (max-width:480px) {
[Other CSS rules are here]
.header {di...
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Images scoped within media queries
<div	
  id="test5"></div>
@media	
  all	
  and	
  (min-­‐width:	
  601px)	
  {
	
  	
  ...
display:none on parent element
<div	
  id="test3">
	
  	
  	
  	
  <div></div>
</div>
#test3	
  div	
  {
	
  	
  	
  	
  b...
Image override with a media query
<div	
  id="test4"></div>
#test4	
  {
	
  	
  	
  	
  background-­‐image:url('images/tes...
#3

Conditionally load JS based on
screen size and capabilities

http://www.flickr.com/photos/lyza/7382255242/
Hiding content with display:none does not
prevent it from downloading.
<iframe id="map" width="300" height="300" framebord...
In JS, use
matchMedia()
or a polyfill for
it to test a
media query

https://github.com/paulirish/matchMedia.js
AJAX Include Pattern
Use AJAX to bring more content into the page as the viewport width gets bigger

<a	
  href="articles/...
Behavioral Breakpoints
#4

Deliver different size <IMG>s
at different screen sizes

http://www.flickr.com/photos/kk/230544325/
One SRC to rule all images
n
r labels on the Og
There are 16 bee at use an img ta
ap Now page th the Bensons Bubbler.
T
e ...
Two most common use cases
https://www.flickr.com/photos/whitehouse/8491445521
Resolution Switching
Includes high-density (retina) images.

https://www.flickr.com/photos/whitehouse/8491445521
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction

http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction

http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction

http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction

http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction

http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction

http://www.flickr.com/photos/barackobamadotcom/5795228030/
Not simply cropping
Art direction: Images with text
Search

Features
New Arrivals
Show Off Tees
Backpacks
Tech Toys
2/$30 & 2/$40 PINK Favorit...
No good
solutions
Things are still moving forward on a standardsbased approach for responsive images.

http://www.flickr.com/photos/johnlamb/...
New proposed standards

<picture>

srcset
Too early to use any of them

src-n
Picturefill JavaScript Library
<div	
  data-­‐picture	
  data-­‐alt="A	
  giant	
  stone	
  face	
  at	
  The	
  Bayon	
  ...
#5

Handle high-density
images carefully
A single image on multiple screens
Image Resolution
2000000

1818x1024
1861632

1500000

1000000

960x541
519360

500000
320x181

909x512

iPhone Retina

Mac...
Image Resolution
2000000

1818x1024
1861632

er
g

1500000

4%
21
3,

1000000

ig
b

960x541
519360

500000
320x181

909x5...
Apple.com as an anti-pattern

Downloads both standard and retina images

The total size of the page
goes from 502.90K to
2...
If possible, use CSS for now
@media	
  screen	
  and	
  (-­‐webkit-­‐device-­‐pixel-­‐ratio:	
  1)	
  {
/*	
  Image	
  for...
Picturefill User Preference Branch

https://github.com/scottjehl/picturefill/tree/user-prefs
Compressive images?

http://blog.netvlies.nl/design-interactie/retina-revolution/
Responsive Video
How do you provide the right video codec?

http://www.longtailvideo.com/html5/
Multiple sources with Flash Fallback
<video	
  width="640"	
  height="360"	
  controls>
	
   <!-­‐-­‐	
  MP4	
  must	
  be...
How do you maintain the aspect ratio of video?
• This is mostly a problem if you’re embedding video from a third
party sit...
How do you send the right resolution and quality?
How do you send the right resolution and quality?

http://www.longtailvideo.com/html5/
You will need a video streaming service.
If I could dream up my ideal
solution for images…

http://www.flickr.com/photos/fuzzylittlemanpeach/4633972431/
Eights guidelines and one immutable rule
#1

Use vector-based images or
font icons whenever you can
Home

App

Icon Packs

Font CDN

Demo

Documentation

Blog

About

IcoMoon
Custom Built and Crisp Icon Fonts, Done Right

...
What Is This

Grumpicon.com based on Grunticon
/'
//
. //
|//7
/' " 
.
. .
| (

_ _ - -_
| '._ '
__ _/
'-'

_ __
// _/

|
...
#2

Encourage people to upload the
highest quality source possible
#3

Provide an automatic image
resizing and compression service
#4

Images can be resized to any size
with URL parameters

Example from Sencha IO SRC. Define height, width or both.
<img
...
“

“Save for the Web” should be a thing of the past.
—@adamdbradley
#5

Provide automated output of
PictureFill or alternative

<div	
  data-­‐picture	
  data-­‐alt="A	
  giant	
  stone	
  f...
Responsive Images Markup Function
templates contain breakpoint information
{
"source":"/source.jpg",
"breakpoints":	
  [
{...
#6

Provide a way to override resized
images for art direction needs
#7

Integrate image compression
best practices
jpegtran or jpegoptim
OptiPNG or PNGOUT
far future expires headers

learn f...
#8

Bonus: Detect support for
WebP image format and use it

The average WebP file size is 25% - 34% smaller compared to
JP...
#!

The only rule for your responsive
images implementation.

Plan for the fact that it will be deprecated.
Make it easy t...
It’s three years later. Let’s revisit the
my original question.
Can a one size fits all solution…

http://www.flickr.com/photos/theyoungthousands/4025421438
compete with
a tailored experience?
http://www.flickr.com/photos/fronx/2862975043
http://www.flickr.com/photos/haddadi/5971508861

Or will it always be TOO BIG?
Unlikely responsive design will
ever be as fast as something
crafted specifically for a device.

http://www.flickr.com/phot...
But web design is
a balancing act.

http://www.flickr.com/photos/kalexanderson/6266452817
And performance is
just one factor.
For most projects, responsive
design can be fast enough to
make sense…

Flickr: Uploaded February 11, 2007 by hawridger
if we do the extra work to
make mobile first
responsive designs.
Thank You!
Slides: http://bit.ly/grigs-2013-10-13

Special thanks to Scott Jehl, Guy Podjarny, and all of the
Flickr users...
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Responsive Images and Video
Upcoming SlideShare
Loading in...5
×

Responsive Images and Video

4,542

Published on

Presented at Velocity Conference NYC in October 2013

Most responsive designs are slow and bloated. The biggest issues are

Published in: Technology, Design
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,542
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
77
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Responsive Images and Video

  1. 1. Responsive Images and Video Jason Grigsby • @grigs • cloudfour.com
  2. 2. Follow along at @grigs_talks http://bit.ly/grigs-2013-10-13
  3. 3. The web has always been a balancing act… http://www.flickr.com/photos/classblog/5136926303
  4. 4. with many competing priorities. http://www.flickr.com/photos/tudor/4324056624/
  5. 5. Finding that balance is more difficult… http://www.flickr.com/photos/superfantastic/50088733/
  6. 6. as device diversity increases. http://www.flickr.com/photos/lyza/7382235106
  7. 7. Responsive web design offers us for a sensible way to deal with device diversity. http://www.flickr.com/photos/darrentunnicliff/4232232092/
  8. 8. And yet the one question I frequently ask myself is…
  9. 9. Can a one size fits all solution… http://www.flickr.com/photos/sldghmmr/6041481069
  10. 10. compete with a tailored experience? http://www.flickr.com/photos/helloturkeytoe/4932748746/
  11. 11. Important question from many perspectives: Search engine optimization Context Advertising Performance
  12. 12. Search engine optimization
  13. 13. Search engine optimization
  14. 14. Search engine optimization
  15. 15. Search engine optimization
  16. 16. What about mobile context? http://www.flickr.com/photos/brunauto/5062644167/
  17. 17. 80% during misc downtime 76% while waiting in lines 86% while watching TV 69% for point of sale research http://www.flickr.com/photos/carbonnyc/5140154965
  18. 18. TMI
  19. 19. 39% use phone on toilet
  20. 20. Advertising? http://www.flickr.com/photos/sh1mmer/ 2510487525
  21. 21. PERFORMANCE
  22. 22. People demand fast web sites. http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
  23. 23. Privacy and cookie policy Log In Subscribe Subscribe Slow sites mean real dollars are lost. Basket Reports Contact Us Training Events i am looking for... Jobs Blog More Browse by topic Home / Blog 67% of consumers cite slow websites as the main cause of basket abandonment by David Moth Tweet 236 06 December 2012 11:40 3 8 comments Like 14 Daily Pulse Newsletter Get our free Daily Pulse Newsletter to keep informed about the latest news and insights in Digital Marketing. Register for our free Daily Pulse Print Share 20 Everyone hates slow loading websites, and a new survey highlights just how damaging a slow site can be to the user experience. The study by Brand Perfect found that two thirds of UK consumers (67%) cite slow loading times as the main reason they would abandon an online purchase. It’s a topic we’ve looked at in more detail in our post 'Site speed: case studies, tips and tools for improving your conversion rate', with stats showing that slow loading websites are losing businesses up to £1.73bn a year. ADVERTISE HERE »
  24. 24. Top ecommerce sites are 22% slower than last year http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were-last-year/
  25. 25. Mobile users don’t care that their network is slow. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
  26. 26. Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
  27. 27. Many ways to navigate desktop web sites on mobile. Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071
  28. 28. There are no gestures that can make a web site faster. http://www.flickr.com/photos/stephenjohnbryde/384095768/
  29. 29. http://www.flickr.com/photos/nathaninsandiego/4829858186/
  30. 30. http://www.flickr.com/photos/wesbrowning/5316400258/
  31. 31. BBG: Before Boston Globe http://www.flickr.com/photos/69797234@N06/7203485148/
  32. 32. Original Resized K Saved % Saved Original Resized K Saved % Saved 34.7K 8.1K 26.6K 76.6% 43.4K 8.2K 35.2K 81.1% 39.0K 8.4K 30.6K 78.4% 26.0K 6.6K 19.4K 74.6% 30.5K 6.7K 23.8K 78.0% 34.7K 7.8K 26.9K 77.5%
  33. 33. Original Resized K Saved % Saved Original Resized K Saved % Saved 34.7K 8.1K 26.6K 76.6% 43.4K 8.2K 35.2K 81.1% 39.0K 8.4K 30.6K 78.4% 26.0K 6.6K 19.4K 74.6% 30.5K 6.7K 23.8K 78.0% 34.7K 7.8K 26.9K 77.5%
  34. 34. Original Resized K Saved % Saved Original Resized K Saved % Saved 34.7K 8.1K 26.6K 76.6% 43.4K 8.2K 35.2K 81.1% Original Resized K Saved % Saved 39.0K Total 30.5K 8.4K 30.6K 78.4% 6.7K 23.8K 78.0% 208.3K 45.8K 26.0K 6.6K 19.4K 74.6% 34.7K 7.8K 26.9K 77.5% 162.5K 78.0%
  35. 35. The resounding answer from the community: Mobile First Responsive Web Design
  36. 36. Mobile First Responsive Web Design http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  37. 37. “Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.”
  38. 38. “Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.” Famous last words.
  39. 39. Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested 9% 4% 25% 21% 4% Mobile is Larger Same Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savings 38% http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
  40. 40. Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es tested http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  41. 41. http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
  42. 42. http://www.flickr.com/photos/beautyredefined/2643858323/
  43. 43. http://www.flickr.com/photos/puuikibeach/3654517679
  44. 44. Most responsive web designs are…
  45. 45. Time to pen another fool’s gold post? http://www.flickr.com/photos/myklroventine/3400040943/
  46. 46. “ Being Responsive from a layout perspective should not preclude us from being responsive from a performance and interaction perspective. —Scott Jehl https://twitter.com/scottjehl/status/243025352069349377
  47. 47. 5 key techniques for responsible responsive design
  48. 48. #1 Build Mobile First Responsive Designs http://www.flickr.com/photos/auyongcheemeng/95769332/
  49. 49. Different than Mobile First Design Theory http://www.flickr.com/photos/localcelebrity/4831362933/
  50. 50. Mobile First Responsive Web Design is a technical approach for responsive designs. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  51. 51. Reorder media queries so cascade goes from small to large screens /* Wider viewports/higher resolutions (e.g. desktop) @media screen and (min-width:481px) { [Desktop layout rules here] } /* Mobile/lower-resolution devices */ @media screen and (max-width:480px) { [Mobile layout rules here] } */ e mobile media query block Move th e desktop media query. above th this, we’re making sure By doing he cascading effect of CSSiris t nsistent with our mobile f ostch. co ogressive enhancement appr a pr Keep basic styles outside of media queries.
  52. 52. “ The absence of support for media queries is in fact the first media query. —Bryan Rieger, Yiibu
  53. 53. IE8 and below don’t support media queries.
  54. 54. What do you see if your browser doesn’t support media queries? Desktop First Responsive Web Design = Desktop Fallback Mobile First Responsive Web Design = Mobile Fallback
  55. 55. IE conditional comments <link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all and (min-width: 481px)"> <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="layout.css" media="all" /> <![endif]--> The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file.
  56. 56. IE conditional comments <link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all and (min-width: 481px)"> <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="layout.css" media="all" /> <![endif]--> The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file. or use Respond.js (a media query polyfill for IE)
  57. 57. #2 Keep CSS images in their place http://www.flickr.com/photos/lintmachine/2306383943/
  58. 58. Images with display:none are still downloaded @media screen and (max-width:480px) { [Other CSS rules are here] .header {display:none;} } it s.jpg file is 440.7K making The tap . the largest file on the page
  59. 59. http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  60. 60. Images scoped within media queries <div  id="test5"></div> @media  all  and  (min-­‐width:  601px)  {        #test5  {                background-­‐image:url('images/test5-­‐desktop.png');                width:200px;                height:75px;        } } @media  all  and  (max-­‐width:  600px)  {        #test5  {                background-­‐image:url('images/test5-­‐mobile.png');                width:200px;                height:75px;        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  61. 61. display:none on parent element <div  id="test3">        <div></div> </div> #test3  div  {        background-­‐image:url('images/test3.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)  {        #test3  {                display:none;        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  62. 62. Image override with a media query <div  id="test4"></div> #test4  {        background-­‐image:url('images/test4-­‐desktop.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)  {        #test4  {                background-­‐image:url('images/test4-­‐mobile.png');        } } http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  63. 63. #3 Conditionally load JS based on screen size and capabilities http://www.flickr.com/photos/lyza/7382255242/
  64. 64. Hiding content with display:none does not prevent it from downloading. <iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe> This single iframe causes 47 files to be downloaded! Extremely long URL abbreviated @media screen and (max-width:480px) { . . . are many more rules There in the css file. #map {display:none;} } The iframe has an id of map. This rule hides the Google Maps iframe by setting the display to none.
  65. 65. In JS, use matchMedia() or a polyfill for it to test a media query https://github.com/paulirish/matchMedia.js
  66. 66. AJAX Include Pattern Use AJAX to bring more content into the page as the viewport width gets bigger <a  href="articles/latest/"            data-­‐append="articles/latest/fragment"            data-­‐media="(min-­‐width:  30em)">          Latest  Articles </a> https://github.com/filamentgroup/Ajax-Include-Pattern/
  67. 67. Behavioral Breakpoints
  68. 68. #4 Deliver different size <IMG>s at different screen sizes http://www.flickr.com/photos/kk/230544325/
  69. 69. One SRC to rule all images n r labels on the Og There are 16 bee at use an img ta ap Now page th the Bensons Bubbler. T e this one for lik Despite the need for multiple versions of this image depending on the screen size, HTML only allows one value for the src. <img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
  70. 70. Two most common use cases
  71. 71. https://www.flickr.com/photos/whitehouse/8491445521
  72. 72. Resolution Switching Includes high-density (retina) images. https://www.flickr.com/photos/whitehouse/8491445521
  73. 73. http://www.flickr.com/photos/barackobamadotcom/5795228030/
  74. 74. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  75. 75. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  76. 76. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  77. 77. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  78. 78. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  79. 79. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  80. 80. Not simply cropping
  81. 81. Art direction: Images with text Search Features New Arrivals Show Off Tees Backpacks Tech Toys 2/$30 & 2/$40 PINK Favorites Spin the Panty Wheel Tops All Tops Hoodies & Crews Tees & Tanks Bottoms All Bottoms Sweats Shorts Yoga PINK Loves Yoga Panties 5/$26 Styles 3/$33 Styles Shop by Style Bras All Bras Bandeaus & Bralettes 2/$42 Wear Everywhere Bras Bras 101 Swim Sign In Account Get Email Español Shopping Bag
  82. 82. No good solutions
  83. 83. Things are still moving forward on a standardsbased approach for responsive images. http://www.flickr.com/photos/johnlamb/2576062549/
  84. 84. New proposed standards <picture> srcset Too early to use any of them src-n
  85. 85. Picturefill JavaScript Library <div  data-­‐picture  data-­‐alt="A  giant  stone  face  at  The  Bayon  temple  in  Angkor  Thom,  Cambodia">        <div  data-­‐src="small.jpg"></div>        <div  data-­‐src="medium.jpg"  data-­‐media="(min-­‐width:  400px)"></div>        <div  data-­‐src="large.jpg"  data-­‐media="(min-­‐width:  800px)"></div>        <div  data-­‐src="extralarge.jpg"  data-­‐media="(min-­‐width:  1000px)"></div>                <!-­‐-­‐  Fallback  content  for  non-­‐JS  browsers.    -­‐-­‐>        <noscript>                <img  src="small.jpg"  alt="A  giant  stone  face  at  The  Bayon                  temple  in  Angkor  Thom,  Cambodia">        </noscript> </div> https://github.com/scottjehl/picturefill
  86. 86. #5 Handle high-density images carefully
  87. 87. A single image on multiple screens
  88. 88. Image Resolution 2000000 1818x1024 1861632 1500000 1000000 960x541 519360 500000 320x181 909x512 iPhone Retina Macbook 465408 480x271 130080 57920 0 Blackberry Curve iPhone Macbook Retina
  89. 89. Image Resolution 2000000 1818x1024 1861632 er g 1500000 4% 21 3, 1000000 ig b 960x541 519360 500000 320x181 909x512 iPhone Retina Macbook 465408 480x271 130080 57920 0 Blackberry Curve iPhone Macbook Retina
  90. 90. Apple.com as an anti-pattern Downloads both standard and retina images The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded. http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
  91. 91. If possible, use CSS for now @media  screen  and  (-­‐webkit-­‐device-­‐pixel-­‐ratio:  1)  { /*  Image  for  normal  displays.  */ #main  { background-­‐image:  url(dog.jpg); } } @media  screen  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  2)  { /*  Image  for  high  resolution  displays.  */ #main  { background-­‐image:  (dog-­‐hi-­‐res.jpg); } }
  92. 92. Picturefill User Preference Branch https://github.com/scottjehl/picturefill/tree/user-prefs
  93. 93. Compressive images? http://blog.netvlies.nl/design-interactie/retina-revolution/
  94. 94. Responsive Video
  95. 95. How do you provide the right video codec? http://www.longtailvideo.com/html5/
  96. 96. Multiple sources with Flash Fallback <video  width="640"  height="360"  controls>   <!-­‐-­‐  MP4  must  be  first  for  iPad!  -­‐-­‐>   <source  src="__VIDEO__.MP4"  type="video/mp4"  /><!-­‐-­‐  Safari  /  iOS  video        -­‐-­‐>   <source  src="__VIDEO__.OGV"  type="video/ogg"  /><!-­‐-­‐  Firefox  /  Opera  /  Chrome10   -­‐-­‐>   <!-­‐-­‐  fallback  to  Flash:  -­‐-­‐>   <object  width="640"  height="360"  type="application/x-­‐shockwave-­‐flash"   data="__FLASH__.SWF">     <param  name="movie"  value="__FLASH__.SWF"  />     <param  name="flashvars"   value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4"  />     <img  src="__VIDEO__.JPG"  width="640"  height="360"  alt="__TITLE__"              title="No  video  playback  capabilities,  please  download  the  video   below"  />   </object> </video> <p>   <strong>Download  Video:</strong>   Closed  Format:   <a  href="__VIDEO__.MP4">"MP4"</a>   Open  Format:   <a  href="__VIDEO__.OGV">"Ogg"</a> </p> http://camendesign.com/code/video_for_everybody
  97. 97. How do you maintain the aspect ratio of video? • This is mostly a problem if you’re embedding video from a third party site. If you are using your own video, it is not usually an issue. • For third party video, FitVid.js is a good place to start. • For your own video, the only trick is making sure you’re not changing the proportions of the video element as the page resizes.
  98. 98. How do you send the right resolution and quality?
  99. 99. How do you send the right resolution and quality? http://www.longtailvideo.com/html5/
  100. 100. You will need a video streaming service.
  101. 101. If I could dream up my ideal solution for images… http://www.flickr.com/photos/fuzzylittlemanpeach/4633972431/
  102. 102. Eights guidelines and one immutable rule
  103. 103. #1 Use vector-based images or font icons whenever you can
  104. 104. Home App Icon Packs Font CDN Demo Documentation Blog About IcoMoon Custom Built and Crisp Icon Fonts, Done Right IcoMoon App Premium Icons Font CDN Browse 3800+ Free Vector Icons 1200+ Vector Icons & Counting Serve Custom-Built Fonts Import Your Own Vectors to Make Fonts Handcrafted on a 16×16 grid Powered by Amazon Web Services Generate Custom & Crisp Icon Several Different Formats Optimized for Icon Fonts Easily Update Your Icon Fonts
  105. 105. What Is This Grumpicon.com based on Grunticon /' // . // |//7 /' " . . . | ( _ _ - -_ | '._ ' __ _/ '-' _ __ // _/ | | || | / / | / |VV ||--__________/-||-/| || || || || { } { } { }{ } Drag & Drop ur SVGs on the Grumpicon plz. Issues?
  106. 106. #2 Encourage people to upload the highest quality source possible
  107. 107. #3 Provide an automatic image resizing and compression service
  108. 108. #4 Images can be resized to any size with URL parameters Example from Sencha IO SRC. Define height, width or both. <img src="http://src.sencha.io/320/http://sencha.com/files/u.jpg" alt="My constrained image" />
  109. 109. “ “Save for the Web” should be a thing of the past. —@adamdbradley
  110. 110. #5 Provide automated output of PictureFill or alternative <div  data-­‐picture  data-­‐alt="A  giant  stone  face  at  The  Bayon  temple  in  Angkor  Thom,  Cambodia">        <div  data-­‐src="small.jpg"></div>        <div  data-­‐src="medium.jpg"  data-­‐media="(min-­‐width:  400px)"></div>        <div  data-­‐src="large.jpg"  data-­‐media="(min-­‐width:  800px)"></div>        <div  data-­‐src="extralarge.jpg"  data-­‐media="(min-­‐width:  1000px)"></div>                <!-­‐-­‐  Fallback  content  for  non-­‐JS  browsers.    -­‐-­‐>        <noscript>                <img  src="small.jpg"  alt="A  giant  stone  face  at  The  Bayon                  temple  in  Angkor  Thom,  Cambodia">        </noscript> </div>
  111. 111. Responsive Images Markup Function templates contain breakpoint information { "source":"/source.jpg", "breakpoints":  [ {  "max-­‐width":"30em","pixel-­‐density":1,"width":360px},   {  "max-­‐width":"30em","pixel-­‐density":2,"width":720px}, {  "max-­‐width":"30em","pixel-­‐density":1,"width":800px}, {  "max-­‐width":"30em","pixel-­‐density":2,"width":1600px}, {  "pixel-­‐density":1,"width":800px}, {  "pixel-­‐density":2,"width":1600px}, ] } Sample s yntax. Do n’t get hung up o n details . Responsive Images Markup Function Markup f or all ima ges can b changed e in one spo t. PictureFill  Markup
  112. 112. #6 Provide a way to override resized images for art direction needs
  113. 113. #7 Integrate image compression best practices jpegtran or jpegoptim OptiPNG or PNGOUT far future expires headers learn from mod_pagespeed or use it
  114. 114. #8 Bonus: Detect support for WebP image format and use it The average WebP file size is 25% - 34% smaller compared to JPEG file size. WebP compresses 34% better than libpng, and 26% better than pngout for loseless images.
  115. 115. #! The only rule for your responsive images implementation. Plan for the fact that it will be deprecated. Make it easy to change.
  116. 116. It’s three years later. Let’s revisit the my original question.
  117. 117. Can a one size fits all solution… http://www.flickr.com/photos/theyoungthousands/4025421438
  118. 118. compete with a tailored experience? http://www.flickr.com/photos/fronx/2862975043
  119. 119. http://www.flickr.com/photos/haddadi/5971508861 Or will it always be TOO BIG?
  120. 120. Unlikely responsive design will ever be as fast as something crafted specifically for a device. http://www.flickr.com/photos/quarenta/3256329577
  121. 121. But web design is a balancing act. http://www.flickr.com/photos/kalexanderson/6266452817
  122. 122. And performance is just one factor.
  123. 123. For most projects, responsive design can be fast enough to make sense… Flickr: Uploaded February 11, 2007 by hawridger
  124. 124. if we do the extra work to make mobile first responsive designs.
  125. 125. Thank You! Slides: http://bit.ly/grigs-2013-10-13 Special thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×