SIZING UP RESPONSIVE IMAGES TALK MAKE A PLAN BEFORE YOU DRUPAL - PowerPoint PPT Presentation

RULE OF 25% WIDTH X 1.25 HEIGHT X 1.25 PIXELS X 1.5625 56.25% MORE PIXELS

HERO: RULE OF 25% 320 400 500 625 781.25 976.5625 1,220.703125 1,525.8789063 1,907.3486329

SIDE IMAGE Breakpoints 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: 288px Max size: 592px

SIDE: RULE OF 25% 288 360 450 562.5 703.125

SIDE: -25% FROM TOP 303.104 378.88 473.6 592

TWICE AS NICE SCREEN RESOLUTION DENSITIES Photo credit: Mrs eNil, “Bed cuddles”, Flickr Creative Commons

HERO: 2X SCREEN DENSITIES 320 640 400 800 500 1000 625 1250 781.25 1562.5 976.5625 1953.125 1,220.703125 2441.40625 1,525.8789063 3,051.7578125 1,907.3486329 3814.6972656

SIDE: 2X SCREEN DENSITIES 303.104 606.208 378.88 757.76 473.6 947.2 592 1184

TIDY UP SENSIBLE SOURCE FILE WIDTHS Photo credit: Sandra Forbes, “Clean Kitty”, Flickr Creative Commons

HERO: TIDY NUMBERS 320 320 400 400 500 500 625 625 781.25 800 976.5625 1000 1,220.703125 1250 1,525.8789063 1600 1,907.3486329

HERO: TIDY NUMBERS 320 400 25% 500 25% 625 25% 800 28% 1000 25% 1250 25% 1600 28%

HERO: TIDY 2X 320 640 400 800 500 1000 625 1250 800 1600 1000 2000 1250 2500 1600 3200

HERO: MORE TIDY 2X 320 640 400 800 500 1000 640 1280 800 1600 1000 2000 1280 2560 1600 3200

HERO: MORE TIDY 2X 320 640 400 800 500 1000 640 1280 800 1600 1000 2000 1280 2560 1600 3200

HERO: FINAL SOURCE WIDTHS 320 400 25% 500 25% 640 28% 800 25% 1000 25% 1280 28% 1600 25% 2000 25% 2560 25.6% 3200 25%

HERO: FINAL SOURCE WIDTHS 320 400 11 source widths 500 640 800 vs. 1000 1280 18 source widths 1600 2000 2560 3200

SIDE: TIDY NUMBERS 303.104 300 378.88 375 473.6 470 592 600

SIDE: TIDY NUMBERS 300 375 25% 470 27% 600 27.7%

SIDE: TIDY 2X 300 600 375 750 470 940 600 1200

SIDE: MORE TIDY 2X 300 600 375 750 470 940 600 1200

SIDE: FINAL SOURCE WIDTHS 300 375 25% 470 27% 600 27.7% 750 25% 940 25.33% 1200 27.7%

SIDE: FINAL SOURCE WIDTHS 300 7 source widths 375 470 vs. 600 750 8 source widths 940 1200

SIZES ATTRIBUTE QUICK ACCESS LAYOUT INFO Photo credit: London Looks, “Kittens!”, Flickr Creative Commons

HERO: SIZES Breakpoints Final width Sizes width Default 100% 100vw (min-width: 100em) 100rem 100rem <img ¡sizes="(min-­‑width: ¡100em) ¡100rem, ¡ 100vw"> ¡

SIDE: SIZES Breakpoints Final width Sizes width Default 90% 90vw (min-width: 37.5em) 36% 36vw (min-width: 75em) 40% - 48px calc(40vw - 3rem) (min-width: 100em) 640px - 48px 37rem <img ¡sizes="(min-­‑width: ¡100em) ¡ ¡37rem, ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡(min-­‑width: ¡75em) ¡ ¡ ¡calc(40vw ¡-­‑ ¡3rem), ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡(min-­‑width: ¡37.5em) ¡36vw, ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡90vw"> ¡

SRCSET ATTRIBUTE LIST IMAGE SOURCE FILES WITH WIDTHS Photo credit: Mathias Erhart, “kittens”, Flickr Creative Commons

HERO: SRCSET <img ¡srcset=" ¡ 320 ¡ ¡hero320.jpg ¡ ¡320w, ¡ ¡ 400 ¡ ¡hero400.jpg ¡ ¡400w, ¡ ¡ 500 ¡ ¡hero500.jpg ¡ ¡500w, ¡ 640 ¡ ¡hero640.jpg ¡ ¡640w, ¡ 800 ¡ ¡hero800.jpg ¡ ¡800w, ¡ 1000 ¡ ¡hero1000.jpg ¡1000w, ¡ 1280 ¡ ¡hero1280.jpg ¡1280w, ¡ 1600 ¡ ¡hero1600.jpg ¡1600w, ¡ 2000 ¡ ¡hero2000.jpg ¡2000w, ¡ 2560 ¡ ¡hero2560.jpg ¡2560w, ¡ 3200 ¡ ¡hero3200.jpg ¡3200w"> ¡

SIDE: SRCSET <img ¡srcset=" ¡ 300 ¡ ¡side300.jpg ¡ ¡300w, ¡ ¡ 375 ¡ ¡side375.jpg ¡ ¡375w, ¡ ¡ 470 ¡ ¡side470.jpg ¡ ¡470w, ¡ 600 ¡ ¡side600.jpg ¡ ¡600w, ¡ 750 ¡ ¡side750.jpg ¡ ¡750w, ¡ 940 ¡ ¡side940.jpg ¡ ¡940w, ¡ 1200 ¡ ¡side1200.jpg ¡1200w"> ¡

THIS SOUNDS LIKE A JOB FOR… ROBOTS! Photo credit: theresa21, “Daxie’s no match for the punching robots”, Flickr Creative Commons

CSS RULES MAKE IMAGES FLUID Photo credit: Kevin Pelrine, “Leroy the Ruler”, Flickr Creative Commons

IMAGE RULES img ¡{ ¡ ¡ ¡height: ¡auto; ¡ ¡ ¡width: ¡100%; ¡ }

WIDTH: 100%

MAX-WIDTH: 100% (MAYBE)

HOLD UP. TIME TO DRUPAL.

BREAK DANCING BREAKPOINTS AND BREAKPOINT GROUPS Photo credit: Trish Hamme, “Ta-Da !!!!”, Flickr Creative Commons

Empty srcset is all we need

Add breakpoint group: Sizes Select Empty srcset []

Export to theme .info file? Optional.

DRUPAL 8 BREAKPOINTS.YML THEME.empty: ¡ ¡ ¡label: ¡Empty ¡ ¡ ¡mediaQuery: ¡'' ¡ ¡ ¡weight: ¡1

SEND IN THE ROBOTS IMAGE STYLES Photo credit: Andy Miicone, “Miisa”, Flickr Creative Commons

HERO: FILE WIDTHS 320 400 500 640 800 1000 1280 1600 2000 2560 3200

SIDE: FILE WIDTHS 300 375 470 600 750 940 1200

Image styles: Add style

Name style: width_X rectangle_WxH square_WxH

Add width Allow upscaling

LET’S MAP THIS OUT PICTURE MAPPINGS AND FALLBACK STYLES Photo credit: Little Dog Laughed, “Geography Cat”, Flickr Creative Commons

Add mapping

Select breakpoint group

Mapping name Select sizes

Drupal 8! Add responsive image style

D8: Set fallback image style