O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Responsive
Images Are Here.
NowWhat?
Jason Grigsby • @grigs • cloudfour.com
Photo by http://www.gratisography.com/
Responsive
images have
landed
Also sprach Zarathustra
Shipped Development
https://www.flickr.com/photos/gwendalcentrifugue/7395256948
<picture>
<!-- 16:9 crop -->
<source
type="image/webp"
media="(min-width: 36em)"
srcset="quilt_2/detail/large.webp 1920w,
...
srcset="quilt_2/square/large.webp 822w,
quilt_2/square/medium.webp 640w,
quilt_2/square/small.webp 320w" />
<source
srcset...
”This is way too complex and heavy markup language.
Can you imagine yourselves doing that in 300 images in
a web site? Thi...
”Long story short, I don't think anyone should use images on the web.”
https://www.flickr.com/photos/zeldman/7727532846
”Long story short,
I don't think
anyone should
use images on
the web.”
https://www.flickr.com/photos/zeldman/7727532846
https://www.flickr.com/photos/zeldman/7727532846
background-image:
-webkit-linear-gradient(
45deg, rgba(255, 255, 255, .15) 25%,
transparent 25%, transparent 50%,
rgba(255...
transparent 75%,
transparent);
background-image:
linear-gradient(45deg,
rgba(255, 255, 255, .15) 25%,
transparent 25%, tra...
Images have always been difficult.
216Web Safe Colors
http://moodlightinghire.com/wp-content/uploads/2013/06/RGB_color_chart_by_ervis.jpg
1996
258pages
1997
447pages
1996
235pages
1997
238pages
1997
235pages
PNG compression
1,498 bytes 1,980 bytes 12,850 bytes
https://www.flickr.com/photos/jannem/3312115991
UseCases
https://www.flickr.com/photos/cgb_bbear/3082932860
https://www.flickr.com/photos/whitehouse/8491445521
Resolution Switching
Includes high-density (retina) images.
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
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
Not simply cropping
Art direction: Images with text
Art direction: Images with text
Art direction: Images with text
https://www.flickr.com/photos/lonelycoo/4393663498
<img>
is always required
<img>
Icon made by Daniel Bruce from www.flaticon.com is licensed under CC BY 3.0
<picture> <source>
srcset media
sizes ty...
<picture>
<source media="(min-width: 650px)"
srcset="kitten-large.png">
<source media="(min-width: 465px)"
srcset="kitten-...
<img>
do you need anything else?
Fixed width, single density
<img> is all you need.
Small difference in file
size or using SVG?
<img> is all you need.
High density
displays?
srcset
display density
comma-separated list
<img src="cat.jpg" alt="cat"
srcset="cat.jpg, cat-2X.jpg 2x">
Easy so far, right?
1849 × 749 – 256K
2x = 3698 × 1498 – 508K
We need more source files.
width of the image sources
Browser picks best source
<img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w,
cat-320.jpg 32...
Browser picks
best source
HOW?
https://www.flickr.com/
photos/ores2k/394359583
Image requested
HTML requested
CSS and JS requested
HTML parsing starts
Image requested
Image requested
Image requested
CSS evaluation beginning
CSS evaluation beginning
Images are downloaded before size is known
The only thing the lookahead pre-parser knows is the s...
<img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w,
cat-320.jpg 320w,
cat-640.jpg 640w,
cat-1280.jpg 1280w">
Images are nearly same
size as viewport
1540px
254px
Viewport
Tells Us
Little
Tug of war between
responsive images and the
lookahead pre-parser.
https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733
https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733
Lookahead
pre-parser
Kno...
The pre-parser is why we can’t solve responsive
images with CSS, JS or a magical new image format.
https://www.flickr.com/...
Lookahead Pre-parser Key to a FasterWeb
20% 19%
http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-page...
~43% of image fetches are initiated by the
speculative HTML scanner, which account for
~50% of transferred bytes.
—Ilya Gr...
sizes
https://www.flickr.com/photos/ashleyrosex/2861690380
<img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w,
cat-320.jpg 320w,
cat-640.jpg 640w,
cat-1280.jpg 1280w"
sizes=“max-...
media condition (subset of media queries)
length
viewport width unit
if there is no media condition,
then it is the defaul...
sizes="
(max-width: 480px) 100vw,
(max-width: 900px) 33vw,
254px"
sizes="
(max-width: 480px) 100vw,
(max-width: 900px) 33vw,
254px"
sizes="
(max-width: 480px) 100vw,
(max-width: 900px) 33vw,
254px"
What about separation of
content from style?
Sizes is a necessary compromise:

responsive images and speculative downloading
srcset and sizes
let browsers be smarthttps://www.flickr.com/photos/alicejamieson/3164148439
<picture?>
Art Direction
http://www.gratisography.com/
<picture>
<source media="(min-width: 900px)"
srcset="cat-vertical.jpg">
<source media="(min-width: 750px)"
srcset="cat-hor...
Shopify using <picture> for art direction
Shopify using <picture> for art direction
<picture>
<source srcset="homepage-person@desktop.png,
homepage-person@desktop-2...
another use for <picture>
https://www.flickr.com/photos/delete08/4869608487
declare different types of images
unless art direction, you
don’t need media attribute
<picture>
<source type="image/svg+xm...
New image formats present new possibilities
JPEG 2000 handles alpha channel images well
http://www.useragentman.com/blog/2...
JPEG 2000 19.2K
JPEG-XR 95.7K
PNG 325.7K
Web-P 56K
Alpha Channel
Dice Image
http://www.useragentman.com/blog/2015/01/14/us...
http://www.gratisography.com/
inline image tricks
https://www.flickr.com/photos/sk8mama/238533452
inline image tricks
https://www.flickr.com/photos/sk8mama/238533452
What about CSS?
https://www.flickr.com/photos/mauriz/4059476052
http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771
http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771
Art
Direction
Resolution
Switching
Resolution
Switching
image-set()
works for any CSS that takes
images (e.g., border-image)
display density =>
precursor to srcset,
similar syntax
does not, ...
Art Direction
http://www.gratisography.com/
media queries!
old style, webkit only
resolution media query,
max-resolution also valid dots per inch (dpi),
dots per centimeter (dpcm) o...
image breakpoints
http://www.gratisography.com/
Art direction may dictate image breakpoints
https://www.flickr.com/photos/photosdavidgabrielfischer/15706338457
Image breakpoints for resolution switching.
For responsive design breakpoints, resize the
browser until the page looks bad then…
BOOM!
you need a breakpoint.
2000 x 3010
761K
200 x 301
15K
How many image breakpoints?
2000 x 3010
761K
200 x 301
15K
Scaled down images don’t look bad.
2000 x 3010
250K
400 x 602
Actual size in page
800 x 1204
73K
2000 x 3010
250K
400 x 602
Actual size in page
800 x 1204
73K
600 x 903
42K
400 x 602
Actual size in page
800 x 1204
73K
600 x 903
42K
500 x 753
31K
450 x 678
27K
400 x 602
Actual size in page
400 x 602
Actual size in page
Is the only intrinsic information we have about image size.
In the responsive layouts I’ve worked on, content image sizes and their
breakpoints were chosen for completely different re...
What is a sensible jump in file size?
Images compress differently
Both images are 960x660 pixels
151K, JPEG 13K PNG
Responsive Images Performance Budget
Source image:
500x333
58K
What is the cost of flexible images?
Source image:
500x333
58K
What is the cost of flexible images?
Size in page:
300x200
24K
Making this
image
flexible
costs ...
What if we set a performance budget
of 20K per image for flexible images?
Width Height File Size
320 213 25K
453 302 44K
579 386 65K
687 458 85K
786 524 104K
885 590 124K
975 650 142K
990 660 151K...
Width Height File Size
320 213 9K
731 487 29K
990 660 40K
3 image breakpoints
https://www.flickr.com/photos/lyza/6210160407
7 image breakpoints
Width Height File Size
320 213 24K
471 314 43K
612 408 64K
728 485 84K
840 560 103K
944 629 122K
990 6...
Width Height File Size
990 660 13K
1 image breakpoint
Pick representative
images and test how
many breakpoints
you’ll need.
Image breakpoints are not a science yet.
https://www...
Humans
shouldn’t
be doing
this work.
https://www.flickr.com/photos/jdhancock/7801182534/
https://www.flickr.com/photos/lendingmemo/11747440176
Questions to ask about images
Where are the source files and what is the process for publishing?
Is there a big difference ...
Real life example: hero images
Hero images are
usually large
promo images
Full requirements for a hero image:
Full requirements for a hero image:
A box for marketing.
In an ideal world,
you build HTML5
hero images…
Instead,
maybe all
hero images
consist of
HTML text
placed on an
image.
And every
image you
use has spots
set aside just
for your text.
But that may
not be
practical for
your site.
Maybe just give them a box?
Image breakpoints FTL
Image Breakpoints
Name Width Height Max Width Min Width
Large 1080 360 n/a 781
Medium 780 320 780 541
Small 540 270 540 n/...
This worked for one project.
Your project will likely be different.
But surveying your images will help you figure it out.
https://www.flickr.com/photos/nate2009/13971372001
Image Description Format Size Markup Notes
Property logos
PNG8
(future SVG)
Regular,
Retina
<img>
Little variance between ...
Big Hope: Automation
https://www.flickr.com/photos/clement127/15631803492
http://scottjehl.github.io/picturefill/
Picturefill is
the polyfill.
https://www.drupal.org/project/picture
Drupal
Picture
Module
https://wordpress.org/plugins/ricg-responsive-images/
Wordpress
Responsive
Images
Plugin
Image
resizing
services
http://bit.ly/image-services
https://www.flickr.com/photos/mariachily/5250487136
Responsive images
can seem daunting…
https://www.flickr.com/photos/zeldman/14847023657
And you may
feel like
giving up…
Remember, you’re
not alone…
https://www.flickr.com/photos/max-design/3751402935
We will build tools to
make the climb easier…
We merely
need to
take the
first steps.
https://www.flickr.com/photos/akras/1477140536
https://flickr.com/photos/
ekosystem/4334671818
http://www.gratisography.com/
http://www.gratisography.com/
Special thanks to Simon
Pieters, Mat Marquis,
Eric Portis,YoavWeiss,
and the rest of the RIC...
Responsive images are here. Now what?
Responsive images are here. Now what?
Responsive images are here. Now what?
Responsive images are here. Now what?
Responsive images are here. Now what?
Responsive images are here. Now what?
Responsive images are here. Now what?
Responsive images are here. Now what?
Responsive images are here. Now what?
Responsive images are here. Now what?
Próximos SlideShares
Carregando em…5
×

0

Compartilhar

Baixar para ler offline

Responsive images are here. Now what?

Baixar para ler offline

It took nearly four years, four proposed standards, the formation of a community group, and a funding campaign to pay for development, but we finally got what we've been clamoring for—a solution for responsive images baked into browsers. Now the hard work begins. Learn how to use the new responsive image specifications, which ones are appropriate for which images, and how to tackle the riddle of responsive image breakpoints.

  • Seja a primeira pessoa a gostar disto

Responsive images are here. Now what?

  1. 1. Responsive Images Are Here. NowWhat? Jason Grigsby • @grigs • cloudfour.com Photo by http://www.gratisography.com/
  2. 2. Responsive images have landed Also sprach Zarathustra
  3. 3. Shipped Development
  4. 4. https://www.flickr.com/photos/gwendalcentrifugue/7395256948
  5. 5. <picture> <!-- 16:9 crop --> <source type="image/webp" media="(min-width: 36em)" srcset="quilt_2/detail/large.webp 1920w, quilt_2/detail/medium.webp 960w, quilt_2/detail/small.webp 480w" /> <source media="(min-width: 36em)" srcset="quilt_2/detail/large.jpg 1920w, quilt_2/detail/medium.jpg 960w, quilt_2/detail/small.jpg 480w" />
  6. 6. srcset="quilt_2/square/large.webp 822w, quilt_2/square/medium.webp 640w, quilt_2/square/small.webp 320w" /> <source srcset="quilt_2/square/large.jpg 822w, quilt_2/square/medium.jpg 640w, quilt_2/square/small.jpg 320w" /> <img src="quilt_2/detail/medium.jpg" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." /> </picture>
  7. 7. ”This is way too complex and heavy markup language. Can you imagine yourselves doing that in 300 images in a web site? This will be a nightmare to manage.” ”There are so many things wrong with these new responsive image systems.” “
  8. 8. ”Long story short, I don't think anyone should use images on the web.” https://www.flickr.com/photos/zeldman/7727532846
  9. 9. ”Long story short, I don't think anyone should use images on the web.” https://www.flickr.com/photos/zeldman/7727532846
  10. 10. https://www.flickr.com/photos/zeldman/7727532846
  11. 11. background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient( 45deg, rgba(255, 255, 255, .15) 25%,
  12. 12. transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); And that’s why no one uses gradients…
  13. 13. Images have always been difficult.
  14. 14. 216Web Safe Colors http://moodlightinghire.com/wp-content/uploads/2013/06/RGB_color_chart_by_ervis.jpg
  15. 15. 1996 258pages 1997 447pages 1996 235pages 1997 238pages 1997 235pages
  16. 16. PNG compression 1,498 bytes 1,980 bytes 12,850 bytes
  17. 17. https://www.flickr.com/photos/jannem/3312115991
  18. 18. UseCases https://www.flickr.com/photos/cgb_bbear/3082932860
  19. 19. https://www.flickr.com/photos/whitehouse/8491445521 Resolution Switching Includes high-density (retina) images.
  20. 20. Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/
  21. 21. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
  22. 22. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
  23. 23. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
  24. 24. http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction
  25. 25. Not simply cropping
  26. 26. Art direction: Images with text
  27. 27. Art direction: Images with text
  28. 28. Art direction: Images with text
  29. 29. https://www.flickr.com/photos/lonelycoo/4393663498
  30. 30. <img> is always required
  31. 31. <img> Icon made by Daniel Bruce from www.flaticon.com is licensed under CC BY 3.0 <picture> <source> srcset media sizes type
  32. 32. <picture> <source media="(min-width: 650px)" srcset="kitten-large.png"> <source media="(min-width: 465px)" srcset="kitten-medium.png"> <img src="kitten-small.png" alt="a cute kitten"> </picture> All rules are applied to <img> element Original Chrome Team Example: http://googlechrome.github.io/samples/picture-element/
  33. 33. <img> do you need anything else?
  34. 34. Fixed width, single density <img> is all you need.
  35. 35. Small difference in file size or using SVG? <img> is all you need.
  36. 36. High density displays?
  37. 37. srcset
  38. 38. display density comma-separated list <img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">
  39. 39. Easy so far, right?
  40. 40. 1849 × 749 – 256K 2x = 3698 × 1498 – 508K
  41. 41. We need more source files.
  42. 42. width of the image sources Browser picks best source <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">
  43. 43. Browser picks best source HOW? https://www.flickr.com/ photos/ores2k/394359583
  44. 44. Image requested HTML requested CSS and JS requested HTML parsing starts Image requested Image requested Image requested
  45. 45. CSS evaluation beginning
  46. 46. CSS evaluation beginning Images are downloaded before size is known The only thing the lookahead pre-parser knows is the size of the viewport.
  47. 47. <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">
  48. 48. Images are nearly same size as viewport
  49. 49. 1540px 254px Viewport Tells Us Little
  50. 50. Tug of war between responsive images and the lookahead pre-parser.
  51. 51. https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733
  52. 52. https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733 Lookahead pre-parser Know everything in advance. Start downloading immediately. Responsive images Wait until last minute. Know size of image after CSS / JS.
  53. 53. The pre-parser is why we can’t solve responsive images with CSS, JS or a magical new image format. https://www.flickr.com/photos/hamur0w0/6984884135
  54. 54. Lookahead Pre-parser Key to a FasterWeb 20% 19% http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/
  55. 55. ~43% of image fetches are initiated by the speculative HTML scanner, which account for ~50% of transferred bytes. —Ilya Grigorik “ http://bigqueri.es/t/who-initiates-image-downloads/568
  56. 56. sizes https://www.flickr.com/photos/ashleyrosex/2861690380
  57. 57. <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w" sizes=“max-width(480px) 100vw, max-width(900px) 33vw, 171px”> sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px" sizesisrequired wheneversrcsetuses widthdescriptors
  58. 58. media condition (subset of media queries) length viewport width unit if there is no media condition, then it is the default length length can be absolute, relative or even calc() sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
  59. 59. sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
  60. 60. sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
  61. 61. sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
  62. 62. What about separation of content from style?
  63. 63. Sizes is a necessary compromise:
 responsive images and speculative downloading
  64. 64. srcset and sizes let browsers be smarthttps://www.flickr.com/photos/alicejamieson/3164148439
  65. 65. <picture?>
  66. 66. Art Direction http://www.gratisography.com/
  67. 67. <picture> <source media="(min-width: 900px)" srcset="cat-vertical.jpg"> <source media="(min-width: 750px)" srcset="cat-horizontal.jpg"> <img src="cat.jpg" alt="cat"> </picture> media query full srcset multiple <source>s <img>required
  68. 68. Shopify using <picture> for art direction
  69. 69. Shopify using <picture> for art direction <picture> <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x" media="(min-width: 990px)"> <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" media="(min-width: 750px)"> <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" alt="Shopify Merchant, Corrine Anestopoulos"> </picture> Simplified markup
  70. 70. another use for <picture> https://www.flickr.com/photos/delete08/4869608487
  71. 71. declare different types of images unless art direction, you don’t need media attribute <picture> <source type="image/svg+xml" srcset="logo.xml"> <source type="image/webp" srcset="logo.webp"> <img src="logo.png" alt="ACME Corp"> </picture>
  72. 72. New image formats present new possibilities JPEG 2000 handles alpha channel images well http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/
  73. 73. JPEG 2000 19.2K JPEG-XR 95.7K PNG 325.7K Web-P 56K Alpha Channel Dice Image http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/
  74. 74. http://www.gratisography.com/
  75. 75. inline image tricks https://www.flickr.com/photos/sk8mama/238533452
  76. 76. inline image tricks https://www.flickr.com/photos/sk8mama/238533452
  77. 77. What about CSS? https://www.flickr.com/photos/mauriz/4059476052
  78. 78. http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771
  79. 79. http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771 Art Direction Resolution Switching
  80. 80. Resolution Switching
  81. 81. image-set()
  82. 82. works for any CSS that takes images (e.g., border-image) display density => precursor to srcset, similar syntax does not, yet, supportdeclaring image widths background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x);
  83. 83. Art Direction http://www.gratisography.com/
  84. 84. media queries!
  85. 85. old style, webkit only resolution media query, max-resolution also valid dots per inch (dpi), dots per centimeter (dpcm) or dots per px unit (dppx) Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi https://developer.mozilla.org/en-US/docs/Web/CSS/resolution @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* High density stuff here */ }
  86. 86. image breakpoints
  87. 87. http://www.gratisography.com/ Art direction may dictate image breakpoints
  88. 88. https://www.flickr.com/photos/photosdavidgabrielfischer/15706338457 Image breakpoints for resolution switching.
  89. 89. For responsive design breakpoints, resize the browser until the page looks bad then… BOOM! you need a breakpoint.
  90. 90. 2000 x 3010 761K 200 x 301 15K How many image breakpoints?
  91. 91. 2000 x 3010 761K 200 x 301 15K Scaled down images don’t look bad.
  92. 92. 2000 x 3010 250K 400 x 602 Actual size in page 800 x 1204 73K
  93. 93. 2000 x 3010 250K 400 x 602 Actual size in page 800 x 1204 73K 600 x 903 42K
  94. 94. 400 x 602 Actual size in page 800 x 1204 73K 600 x 903 42K 500 x 753 31K 450 x 678 27K
  95. 95. 400 x 602 Actual size in page
  96. 96. 400 x 602 Actual size in page Is the only intrinsic information we have about image size.
  97. 97. In the responsive layouts I’ve worked on, content image sizes and their breakpoints were chosen for completely different reasons than the design (CSS) breakpoints: the former for sensible jumps in file size to match screen dimension and/or density, and the latter for how content modules are visibly designed at given viewport dimensions. —Scott Jehl, Filament Group http://lists.w3.org/Archives/Public/public-whatwg-archive/2012May/0613.html “
  98. 98. What is a sensible jump in file size?
  99. 99. Images compress differently Both images are 960x660 pixels 151K, JPEG 13K PNG
  100. 100. Responsive Images Performance Budget
  101. 101. Source image: 500x333 58K What is the cost of flexible images?
  102. 102. Source image: 500x333 58K What is the cost of flexible images? Size in page: 300x200 24K Making this image flexible costs 34K.
  103. 103. What if we set a performance budget of 20K per image for flexible images?
  104. 104. Width Height File Size 320 213 25K 453 302 44K 579 386 65K 687 458 85K 786 524 104K 885 590 124K 975 650 142K 990 660 151K 8 image breakpoints https://www.flickr.com/photos/lyza/6733380533
  105. 105. Width Height File Size 320 213 9K 731 487 29K 990 660 40K 3 image breakpoints https://www.flickr.com/photos/lyza/6210160407
  106. 106. 7 image breakpoints Width Height File Size 320 213 24K 471 314 43K 612 408 64K 728 485 84K 840 560 103K 944 629 122K 990 660 131K https://www.flickr.com/photos/lyza/6167714218
  107. 107. Width Height File Size 990 660 13K 1 image breakpoint
  108. 108. Pick representative images and test how many breakpoints you’ll need. Image breakpoints are not a science yet. https://www.flickr.com/photos/ecstaticist/5465673165
  109. 109. Humans shouldn’t be doing this work. https://www.flickr.com/photos/jdhancock/7801182534/
  110. 110. https://www.flickr.com/photos/lendingmemo/11747440176
  111. 111. Questions to ask about images Where are the source files and what is the process for publishing? Is there a big difference between smallest and largest image size? Resolution switching or art direction? Can we use SVG? Are there representative images we can use to find sensible jumps in file sizes for our image breakpoints? Do we want to support multiple image formats?
  112. 112. Real life example: hero images
  113. 113. Hero images are usually large promo images
  114. 114. Full requirements for a hero image:
  115. 115. Full requirements for a hero image: A box for marketing.
  116. 116. In an ideal world, you build HTML5 hero images…
  117. 117. Instead, maybe all hero images consist of HTML text placed on an image.
  118. 118. And every image you use has spots set aside just for your text.
  119. 119. But that may not be practical for your site.
  120. 120. Maybe just give them a box? Image breakpoints FTL
  121. 121. Image Breakpoints Name Width Height Max Width Min Width Large 1080 360 n/a 781 Medium 780 320 780 541 Small 540 270 540 n/a Text readability dictated 3 image breakpoints Need to support 16 pt in this font? Requires 4 breakpoints.
  122. 122. This worked for one project. Your project will likely be different.
  123. 123. But surveying your images will help you figure it out. https://www.flickr.com/photos/nate2009/13971372001
  124. 124. Image Description Format Size Markup Notes Property logos PNG8 (future SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes. Partner logos PNG8 (future SVG) Regular, Retina <img> Little variance between the wide and small screen image sizes. Iconography SVG — <img> — Brand logos PNG8 (future SVG) regular, Retina <img> Assumes little variance between the wide and small screen image sizes. Property photography JPG 
 (conditionalWebP) Dynamically resized and compressed srcset and sizes Templates specify breakpoints. Promo images w/ text 
 (art direction) Whichever is appropriate As many sizes as needed. <picture> Content producer defines images and breakpoints in CMS. Example of images audit for a large site
  125. 125. Big Hope: Automation https://www.flickr.com/photos/clement127/15631803492
  126. 126. http://scottjehl.github.io/picturefill/ Picturefill is the polyfill.
  127. 127. https://www.drupal.org/project/picture Drupal Picture Module
  128. 128. https://wordpress.org/plugins/ricg-responsive-images/ Wordpress Responsive Images Plugin
  129. 129. Image resizing services http://bit.ly/image-services
  130. 130. https://www.flickr.com/photos/mariachily/5250487136 Responsive images can seem daunting…
  131. 131. https://www.flickr.com/photos/zeldman/14847023657 And you may feel like giving up…
  132. 132. Remember, you’re not alone… https://www.flickr.com/photos/max-design/3751402935
  133. 133. We will build tools to make the climb easier…
  134. 134. We merely need to take the first steps. https://www.flickr.com/photos/akras/1477140536
  135. 135. https://flickr.com/photos/ ekosystem/4334671818
  136. 136. http://www.gratisography.com/
  137. 137. http://www.gratisography.com/ Special thanks to Simon Pieters, Mat Marquis, Eric Portis,YoavWeiss, and the rest of the RICG. Shout out to all of the amazing photographers who share their work under creative commons.You rule!

It took nearly four years, four proposed standards, the formation of a community group, and a funding campaign to pay for development, but we finally got what we've been clamoring for—a solution for responsive images baked into browsers. Now the hard work begins. Learn how to use the new responsive image specifications, which ones are appropriate for which images, and how to tackle the riddle of responsive image breakpoints.

Vistos

Vistos totais

885

No Slideshare

0

De incorporações

0

Número de incorporações

47

Ações

Baixados

3

Compartilhados

0

Comentários

0

Curtir

0

×