sizing up responsive images - drupalcon · 2016. 1. 28. · use responsive images in older...
TRANSCRIPT
![Page 1: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/1.jpg)
MARC DRUMMOND
TALK
DATE SPEAKERJUNE 26, 2015
SIZING UP RESPONSIVE IMAGESMAKE A PLAN BEFORE YOU DRUPAL
Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons
![Page 2: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/2.jpg)
Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons
Marc Drummond
@MarcDrummond
mdrummondIRC, drupal.org
marcdrummond.com
Front-end Developer, Lullabot
![Page 3: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/3.jpg)
CERN, WE HAVE A PROBLEMAND IT INVOLVES CATS
![Page 4: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/4.jpg)
Photo credit: Mr Thinktank, “SDC19276”, Flickr Creative Commons
![Page 5: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/5.jpg)
Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
![Page 6: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/6.jpg)
Photo credit: [paumelia], “so happy smiling cat”, Flickr Creative Commons
![Page 7: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/7.jpg)
Photo credit: Pete Teoh, “Aston Loves Andy”, Flickr Creative Commons
![Page 8: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/8.jpg)
Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
![Page 9: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/9.jpg)
Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
![Page 10: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/10.jpg)
Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
![Page 11: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/11.jpg)
Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
![Page 12: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/12.jpg)
Photo credit: Guyon Moree, “Angry Tiger”, Flickr Creative Commons
![Page 13: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/13.jpg)
Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
![Page 14: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/14.jpg)
Photo credit: [paumelia], “so happy smiling cat”, Flickr Creative Commons
![Page 15: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/15.jpg)
Photo credit: Mr Thinktank, “SDC19276”, Flickr Creative Commons
![Page 16: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/16.jpg)
Photo credit: Doug Woods, “Midge Our Cute New Kitten Cat”, Flickr Creative Commons
![Page 17: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/17.jpg)
Photo credit: Guyon Moree, “Angry Tiger”, Flickr Creative Commons
![Page 18: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/18.jpg)
SMALL SCREEN LARGE SCREEN
SMALL PHOTO
LARGE PHOTO
![Page 19: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/19.jpg)
Photo credit: Tina Lawson, “Heidi”, Flickr Creative Commons
What if we…… provide different image files…
… for different screen sizes?
Woh.
![Page 20: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/20.jpg)
Photo credit: Gonzolo G Useta, “La Ultima Vida”, Flickr Creative Commons
… browsers are fastExcept…
![Page 21: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/21.jpg)
Photo credit: Tina Lawson, “Heidi”, Flickr Creative Commons
What if we…… give browsers layout info…
… in our HTML?
Woh.
![Page 22: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/22.jpg)
![Page 23: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/23.jpg)
<picture> <source media="(min-‐width: 40em)" srcset="big.jpg 1x, big-‐hd.jpg 2x"> <source srcset="small.jpg 1x, small-‐hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>
PICTURE ELEMENT
![Page 24: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/24.jpg)
ART DIRECTIONDIFFERENT IMAGE CROPS PER MEDIA QUERY
![Page 25: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/25.jpg)
ART DIRECTIONDIFFERENT ASPECT RATIOS PER MEDIA QUERY
![Page 26: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/26.jpg)
IMAGE TYPES.WEBP CAN FALLBACK TO .JPG
![Page 27: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/27.jpg)
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-‐width: 36em) 33.3vw, 100vw" alt="A rad wolf">
SIZES + SRCSET ATTRIBUTES
![Page 28: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/28.jpg)
PICTUREFILLUSE RESPONSIVE IMAGES IN OLDER BROWSERS
![Page 29: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/29.jpg)
DRUPAL 7PICTURE AND BREAKPOINTS MODULES
![Page 30: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/30.jpg)
DRUPAL 8RESPONSIVE IMAGE AND BREAKPOINT MODULES (IN CORE!)
![Page 31: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/31.jpg)
LET’S MAKE A PLAN.
![Page 32: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/32.jpg)
RESPONSIVE LAYOUTS ARE FLUIDIMAGE FILES ARE NOT
Photo credit: CelloPics, “Cat Only Loves Fresh Water”, Flickr Creative Commons
![Page 33: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/33.jpg)
TARGET / CONTEXT = RESULTWIDTH %
![Page 34: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/34.jpg)
RASTER IMAGESMEASURED IN PX, NOT %
![Page 35: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/35.jpg)
ANALYZEHOW DOES THIS TYPE OF IMAGE FIT INTO THE SITE LAYOUT?
Photo credit: Jenny Lee Silver, “Photo A Day: June 2006”, Flickr Creative Commons
![Page 36: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/36.jpg)
Tiger sunbathing in a boxI am unable to envision anything quite as adorable as my cat Tiger lounging in the sun, cuddled in his precious little box.
He has been a fan of this box since he was just a kitten, and we have preserved it ever since. When Tiger was just nine months old, we almost threw out this little half box. He mauled a couch that day. The next day, we brought in the box from the recycling, and he has been a happy cat ever since.
I have taken many photos over the years of Tiger cuddled in this box, but I love how the light looks in this particular picture.
You can feel the warmth of the sun, Tiger purring, and envision him slowly closing his eyes and yawning. There are few moments more tender than those of a sunbathing cat.
Tiger cuddles in his box, basking in the sun.
Photo credits: Clare, “I Am Not Too Big For This Box” and “Does This Box Make Me Look Fat?”, Flickr Creative Commons
![Page 37: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/37.jpg)
Tiger sunbathing in a boxI am unable to envision anything quite as adorable as my cat Tiger lounging in the sun, cuddled in his precious little box.
He has been a fan of this box since he was just a kitten, and we have preserved it ever since. When Tiger was just nine months old, we almost threw out this little half box. He mauled a couch that day. The next day, we brought in the box from the recycling, and he has been a happy cat ever
![Page 38: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/38.jpg)
this box, but I love how the light looks in this particular picture.
You can feel the warmth of the sun, Tiger purring, and envision him slowly closing his eyes and yawning. There are few moments more tender than those of a sunbathing cat.
![Page 39: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/39.jpg)
Tiger sunbathing in a boxI am unable to envision anything quite as adorable as my cat Tiger lounging in the sun, cuddled in his precious little box.
He has been a fan of this box since he was just a kitten, and we have preserved it ever since. When Tiger was just nine months old, we almost threw out this little half box. He mauled a couch that day. The next day, we brought in the box from the recycling, and he has been a happy cat ever since.
I have taken many photos over the years of Tiger cuddled in this box, but I love how the light looks in this particular picture.
You can feel the warmth of the sun, Tiger purring, and envision him slowly closing his eyes and yawning. There are few moments more tender than those of a sunbathing cat.
Tiger cuddles in his box, basking in the sun.
HERO IMAGE
SIDE IMAGE
![Page 40: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/40.jpg)
<article class="post"> <figure class="post__hero-‐image"><img src="images/suncat.jpg" alt="Golden sunbeams warm a cut curled up in a box." /></figure> <div class="post__inner"> <main class="post__body" role="main"> <h1 class="post__title">Tiger sunbathing in a box</h1> <p>I am unable to envision … sunbathing cat.</p> </main> <aside class="post__aside" role="complementary"> <figure class="post__aside-‐image"> <img src="images/suncat.jpg" alt="Golden sunbeams warm a cut curled up in a box." /> <figcaption class="post__aside-‐image-‐caption">Tiger cuddles in his box, basking in the sun.</figcaption> </figure> </aside> </div> </article>
![Page 41: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/41.jpg)
HERO IMAGE.post > .post__hero-image > img
![Page 42: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/42.jpg)
.post { @media (min-‐width: 100em) { left: 50%; position: relative; transform: translate(-‐50%, 0); width: 100rem; } }
.POST RULES
IMAGE RULESimg { height: auto; width: 100%; }
![Page 43: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/43.jpg)
HERO IMAGEBreakpoints .post .post__hero-image Final width
Default 100% 100% 100%
(min-width: 100em) 100rem 100% 100rem
![Page 44: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/44.jpg)
SIDE IMAGE.post > .post__inner > .post__aside > .post__aside-image > img
![Page 45: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/45.jpg)
.post__aside { padding: 5%; width: 100%;
@media (min-‐width: 37.5em) { float: left; padding: 2%; width: 40%; }
@media (min-‐width: 75em) { padding: 1.5rem; } }
.POST__ASIDE RULES
![Page 46: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/46.jpg)
SIDE IMAGEBreakpoints .post .post__aside Final width
Default 100% 100% - 5% x 2 90%(min-width: 37.5em) 100% 40% - 2% x 2 36%
(min-width: 75em) 100% 40% - 1.5rem x 2 40% - 48px
(min-width: 100em) 100rem 40% - 1.5rem x 2 640px - 48px
![Page 47: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/47.jpg)
BALLPARK FIGURESDETERMINE INITIAL SOURCE FILE WIDTHS
Photo credit: Fuzzy Gerdes, “Parker Loooves the Cubs”, Flickr Creative Commons
![Page 48: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/48.jpg)
HERO IMAGEBreakpoints Width Min px Max px
Default 100% 320 1599
(min-width: 100em) 100rem 1600 1600
Min size: 320pxMax size: 1600px
![Page 49: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/49.jpg)
RULE OF 25%WIDTH X 1.25 HEIGHT X 1.25 PIXELS X 1.5625
56.25% MORE PIXELS
![Page 50: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/50.jpg)
HERO: RULE OF 25%320400500625781.25976.56251,220.7031251,525.87890631,907.3486329
![Page 51: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/51.jpg)
SIDE IMAGEBreakpoints Width Min px Max px
Default 90% 288 540(min-width: 37.5em) 36% 216 432(min-width: 75em) 40% - 48px 432 592
(min-width: 100em) 640px - 48px 592 592
Min size: 288pxMax size: 592px
![Page 52: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/52.jpg)
SIDE: RULE OF 25%288360450562.5703.125
![Page 53: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/53.jpg)
SIDE: -25% FROM TOP303.104378.88473.6592
![Page 54: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/54.jpg)
TWICE AS NICESCREEN RESOLUTION DENSITIES
Photo credit: Mrs eNil, “Bed cuddles”, Flickr Creative Commons
![Page 55: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/55.jpg)
HERO: 2X SCREEN DENSITIES320400500625781.25976.56251,220.7031251,525.87890631,907.3486329
640800100012501562.51953.1252441.406253,051.75781253814.6972656
![Page 56: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/56.jpg)
SIDE: 2X SCREEN DENSITIES303.104378.88473.6592
606.208757.76947.21184
![Page 57: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/57.jpg)
TIDY UPSENSIBLE SOURCE FILE WIDTHS
Photo credit: Sandra Forbes, “Clean Kitty”, Flickr Creative Commons
![Page 58: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/58.jpg)
HERO: TIDY NUMBERS320400500625781.25976.56251,220.7031251,525.87890631,907.3486329
320400500625800100012501600
![Page 59: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/59.jpg)
HERO: TIDY NUMBERS320400500625800100012501600
25%
25%
25%
28%
25%
25%
28%
![Page 60: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/60.jpg)
HERO: TIDY 2X320400500625800100012501600
640800100012501600200025003200
![Page 61: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/61.jpg)
HERO: MORE TIDY 2X320400500640800100012801600
640800100012801600200025603200
![Page 62: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/62.jpg)
HERO: MORE TIDY 2X320400500640800100012801600
640800100012801600200025603200
![Page 63: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/63.jpg)
HERO: FINAL SOURCE WIDTHS320400500640800100012801600200025603200
25%
25%
25%28%
25%
25%
28%
25%
25.6%25%
![Page 64: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/64.jpg)
HERO: FINAL SOURCE WIDTHS320400500640800100012801600200025603200
11 source widths
vs.
18 source widths
![Page 65: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/65.jpg)
SIDE: TIDY NUMBERS303.104378.88473.6592
300375470600
![Page 66: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/66.jpg)
SIDE: TIDY NUMBERS300375470600
25%
27%
27.7%
![Page 67: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/67.jpg)
SIDE: TIDY 2X300375470600
6007509401200
![Page 68: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/68.jpg)
SIDE: MORE TIDY 2X300375470600
6007509401200
![Page 69: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/69.jpg)
SIDE: FINAL SOURCE WIDTHS3003754706007509401200
25%
27%
25%
27.7%
25.33%
27.7%
![Page 70: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/70.jpg)
SIDE: FINAL SOURCE WIDTHS3003754706007509401200
7 source widths
vs.
8 source widths
![Page 71: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/71.jpg)
SIZES ATTRIBUTEQUICK ACCESS LAYOUT INFO
Photo credit: London Looks, “Kittens!”, Flickr Creative Commons
![Page 72: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/72.jpg)
HERO: SIZES
<img sizes="(min-‐width: 100em) 100rem, 100vw">
Breakpoints Final width Sizes width
Default 100% 100vw
(min-width: 100em) 100rem 100rem
![Page 73: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/73.jpg)
SIDE: SIZES
<img sizes="(min-‐width: 100em) 37rem, (min-‐width: 75em) calc(40vw -‐ 3rem), (min-‐width: 37.5em) 36vw, 90vw">
Breakpoints Final width Sizes widthDefault 90% 90vw
(min-width: 37.5em) 36% 36vw(min-width: 75em) 40% - 48px calc(40vw - 3rem)(min-width: 100em) 640px - 48px 37rem
![Page 74: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/74.jpg)
SRCSET ATTRIBUTELIST IMAGE SOURCE FILES WITH WIDTHS
Photo credit: Mathias Erhart, “kittens”, Flickr Creative Commons
![Page 75: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/75.jpg)
HERO: SRCSET
320400500640800100012801600200025603200
<img srcset=" hero320.jpg 320w, hero400.jpg 400w, hero500.jpg 500w, hero640.jpg 640w, hero800.jpg 800w, hero1000.jpg 1000w, hero1280.jpg 1280w, hero1600.jpg 1600w, hero2000.jpg 2000w, hero2560.jpg 2560w, hero3200.jpg 3200w">
![Page 76: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/76.jpg)
SIDE: SRCSET
3003754706007509401200
<img srcset=" side300.jpg 300w, side375.jpg 375w, side470.jpg 470w, side600.jpg 600w, side750.jpg 750w, side940.jpg 940w, side1200.jpg 1200w">
![Page 77: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/77.jpg)
THIS SOUNDS LIKE A JOB FOR…
ROBOTS!
Photo credit: theresa21, “Daxie’s no match for the punching robots”, Flickr Creative Commons
![Page 78: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/78.jpg)
CSS RULESMAKE IMAGES FLUID
Photo credit: Kevin Pelrine, “Leroy the Ruler”, Flickr Creative Commons
![Page 79: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/79.jpg)
IMAGE RULES
img { height: auto; width: 100%; }
![Page 80: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/80.jpg)
WIDTH: 100%
![Page 81: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/81.jpg)
MAX-WIDTH: 100% (MAYBE)
![Page 82: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/82.jpg)
HOLD UP. TIME TO DRUPAL.
![Page 83: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/83.jpg)
BREAK DANCINGBREAKPOINTS AND BREAKPOINT GROUPS
Photo credit: Trish Hamme, “Ta-Da !!!!”, Flickr Creative Commons
![Page 84: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/84.jpg)
Empty srcset is all we need
![Page 85: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/85.jpg)
Add breakpoint group: Sizes
Select Empty srcset []
![Page 86: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/86.jpg)
Export to theme .info file? Optional.
![Page 87: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/87.jpg)
THEME.empty: label: Empty mediaQuery: '' weight: 1
DRUPAL 8 BREAKPOINTS.YML
![Page 88: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/88.jpg)
SEND IN THE ROBOTSIMAGE STYLES
Photo credit: Andy Miicone, “Miisa”, Flickr Creative Commons
![Page 89: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/89.jpg)
HERO: FILE WIDTHS320400500640800100012801600200025603200
![Page 90: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/90.jpg)
SIDE: FILE WIDTHS3003754706007509401200
![Page 91: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/91.jpg)
Image styles: Add style
![Page 92: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/92.jpg)
Name style: width_X
rectangle_WxH square_WxH
![Page 93: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/93.jpg)
![Page 94: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/94.jpg)
Add width Allow upscaling
![Page 95: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/95.jpg)
LET’S MAP THIS OUTPICTURE MAPPINGS AND FALLBACK STYLES
Photo credit: Little Dog Laughed, “Geography Cat”, Flickr Creative Commons
![Page 96: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/96.jpg)
Add mapping
![Page 97: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/97.jpg)
Select breakpoint group
![Page 98: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/98.jpg)
Mapping name Select sizes
![Page 99: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/99.jpg)
Add responsive image style
Drupal 8!
![Page 100: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/100.jpg)
D8: Set fallback image style
![Page 101: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/101.jpg)
SIDE: SIZES<img sizes="(min-‐width: 100em) 37em, (min-‐width: 75em) calc(40vw -‐ 3em), (min-‐width: 37.5em) 36vw, 90vw">
![Page 102: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/102.jpg)
Enter sizes Select styles
![Page 103: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/103.jpg)
CHECK IT BEFORE YOU WRECK ITIMAGE QUALITY MATTERS
Photo credit: Woodleyworks, “Lucky was inexorably drawn to the mirror”, Flickr Creative Commons
![Page 104: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/104.jpg)
Image quality
![Page 105: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/105.jpg)
Try lower: 60?
![Page 106: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/106.jpg)
STYLE SELECTIONS VIA UIFIELD FORMATTERS AND YOU
Photo credit: George Pavlov, “I’m pretty kitty, right?”, Flickr Creative Commons
![Page 107: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/107.jpg)
Field display
![Page 108: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/108.jpg)
Change format to Picture
![Page 109: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/109.jpg)
Select mapping, fallback
![Page 110: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/110.jpg)
STYLE SELECTIONS VIA CODETHEME PREPROCESSING FUNCTIONS AND MORE
Photo credit: Brian Dailey, “Cat + Code + Snow”, Flickr Creative Commons
![Page 111: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/111.jpg)
function THEME_preprocess_node(&$variables) { if ($variables['type'] == 'blog') { $fallback_style = 'width_400'; if ($account = user_load($node-‐>uid)) { if (isset($account-‐>picture-‐>uri) && ($mapping = picture_mapping_load('author_image')) && ($breakpoints = picture_get_mapping_breakpoints($mapping, $fallback_style))) { $image_options = array( 'uri' => $account-‐>picture-‐>uri, 'alt' => '', 'breakpoints' => $breakpoints, 'style_name' => $fallback_style, ); $variables['user_picture'] = theme('picture', $image_options); } } } }
![Page 112: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/112.jpg)
$content['side_image_responsive'] = array( '#type' => 'responsive_image', '#uri' => 'public://side-‐image.png', '#attributes' => array( 'alt' => t('Hero image'), 'title' => t('Hero image title'), ), '#responsive_image_style_id' => 'hero', );
Simpler in D8!
![Page 113: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/113.jpg)
MAKE THE WEB BETTERBeautiful photos + Fast loading photos
![Page 114: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/114.jpg)
Photo credit: Pete Markham, “Domino the Cat, Week 2”, Flickr Creative Commons
![Page 115: SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint](https://reader031.vdocuments.site/reader031/viewer/2022011915/5fc5a5132c97ca79e2448c52/html5/thumbnails/115.jpg)
Photo credit: Dave Emerson, “Trouble”, Flickr Creative Commons
Marc Drummond
@MarcDrummond
mdrummondIRC, drupal.org
marcdrummond.com
Front-end Developer, Lullabot