Responsive Images and Art Direction in Drupal 8

R E S P O N S I V E I M A G E S U N D E R C O N T R O L

C R I S T I N A D E S I G N E R & C H U M I L L A S D R U P A L F R O N T E N D @ chum i l l as c kri n a @chumillas #DrupalCampES

RESPONSIVE IMAGES THE BASICS R E S P O N S I V E I M AG E S I N D R U PA L ART DIRECTION WYSIWYG

A V E R A G E PAG E W E I G H T 20 1 6 20 1 5 20 1 4 @chumillas 2 , 48 Mb + 10 % 2,26 Mb + 16 % 1,95 Mb + 15 % #DrupalCampES

FACTS 61% web traffic @chumillas ASYNCHRONOUS reque st TOO BIG for th e d e v i ce #DrupalCampES

DELIVER THE HIGHEST QUALITY IMAGE SUPPORTED AND @chumillas NOTHING MORE. #DrupalCampES

T H E B A S I C S

SCALED IMAGE Variables known by: AUTHOR when she’s writing the code? BROWSER when it’s loading the page? viewport dimensions x YES image size relative to the viewport YES YES via sizes! screen density x YES source files’ dimensions YES YES via srcset! SOURCE https://ericportis.com/posts/2014/srcset-sizes

SCALED IMAGE <img srcset=“large.jpg medium.jpg small.jpg 1440w, 960w, 480w” sizes=“(min-width: 36em) 33.3vw, 100vw” src=“medium.jpg” alt=“A road”>

w WIDTH IN PIXELS <img srcset=“large.jpg medium.jpg small.jpg 1440w, (1440px) 960w, (960px) 480w” (480px)

sizes CSS MEDIA QUERIES <img srcset=“large.jpg medium.jpg small.jpg 1440w, 960w, 480w” sizes=“(min-width: 36em) 33.3vw, 100vw” image { width: 100vw; } @media (min-width: 36em) { width: 33.3vw; }

SCALED IMAGE <img srcset=“large.jpg medium.jpg small.jpg 1440w, 960w, 480w” sizes=“(min-width: 36em) 33.3vw, 100vw” src=“medium.jpg” alt=“A road”>

S C A L E D I M A G E S

A R T D I R E C T I O N

<picture> @chumillas #DrupalCampES

<picture> <source srcset=“ image-small.jpg 1x, image-small2x.jpg 2x” media=“(min-width: 0px) and (max-width: 29.99em)”> <source srcset=“image-big.jpg 1x, image-big2x.jpg 2x” media=”(min-width: 30em)”> sizes=”(min-width: 30em) 33vw”> <img </picture> src=“image-big.jpg 180w” />

B R O W S E R S U P P O R T P I C T U R E Same for srcret and sizes @chumillas #DrupalCampES

B R O W S E R S U P P O R T P I C T U R E F I L L http://scottjehl.github.io/picturefill/ A R E S @chumillas P O N S I V E I M A G E P O L Y F I L L #DrupalCampES

R E S P O N S I V E I M A G E S I N D R U P A L

D R U P A L 7 RESP_IMG > PICTURE BREAKPOINT COMMITERS: Jelle_S, attiks,… ADAPTIVE IMAGES AIS (ADAPTIVE IMAGE STYLES) C L I E N T- S I D E A D A P T I V E I M A G E @chumillas #DrupalCampES

M O D U L E S RESPONSIVE IMAGES (Picture) BREAKPOINT Image,File,Field @chumillas #DrupalCampES

P R O C E S S 1 Import/ create breakpoints @chumillas 2 3 4 Create Image styles Create Responsive Images Apply Responsive Images #DrupalCampES

W H E R E B R E A K P O I N T S THEMES @chumillas 1 MODULES #DrupalCampES

W H A T A R E B R E A K P O I N T S 1 @media all and (min-width:851px) {/CSS/} @chumillas #DrupalCampES

P L I M A G E ( mi n - wi d th: 480px ) A N S T Y L E S (min- w id t h: 8 3 0px ) 2

P L I M A G E A N S T Y L E S 8 3 0 px - 40 px marg in s - 20 px gut te r 7 70 px /2 i mages 3 8 5 px 2

P L I M A G E A N S T Y L E S 2 2 4 0 px +25% 3 0 0 px +25% 3 8 5 px +25% 4+25% 8 0 px 240 px 300 px 385 px 480 px 240 px 300 px 385 px 3 85 px 4 80 px By @marcdrummond https://www.youtube.com/watch?v=3BF5WE_NOIU

C R E A T R E S P O N S I V E E I M A G E S 3 3 1 Import/ create breakpoints @chumillas 2 Create Image styles SCALED IMG 3 PICTURE 4 Apply Responsive Images #DrupalCampES

SCALED IMAGE <img srcset=“large.jpg medium.jpg small.jpg 1440w, 960w, 480w” sizes=“(min-width: 36em) 33.3vw, 100vw” src=“medium.jpg” alt=“A road”> @chumillas #DrupalCampES

https://vimeo.com/204517230

https://vimeo.com/204517211

ART DIRECTION <picture> <source srcset=“image-big.jpg 1x, image-big2x.jpg 2x” media=”(min-width: 30em)”> sizes=”(min-width: 30em) 33vw”> <img </picture> src=“image-big.jpg 180w” />

https://vimeo.com/204517271

A R T D I R E C T I O N

@chumillas #DrupalCampES

R E S A R T P O N S I V E I M A G E S D I R E C T I O N https://www.drupal.org/project/crop @chumillas #DrupalCampES

F U I M A G E L L C O N T R O L W I D G E T C R O P https://www.drupal.org/project/image_widget_crop @chumillas #DrupalCampES

https://vimeo.com/204517111

G I F U L L V E S C O N T R O L R E Q U I R E S L O N G I M P L E M E N T A T I O N

A U T O F O C A L M A T E D P O I N T https://www.drupal.org/project/focal_point @chumillas #DrupalCampES

@chumillas #DrupalCampES https://vimeo.com/204517287

G I A R T V E S B A S I C D I R E C T I O N R E Q U I R E S L O W E F F O R T ( R E A L L Y )

W Y S I W Y G

R E S P O N S I N S I D E I V E I M A G E S W Y S I W Y G https://www.drupal.org/project/inline_responsive_images *https://www.drupal.org/node/2061377 @chumillas #DrupalCampES

C O N C L U S I O N S @chumillas • Plan your Responsive Images before implementing. • Use Focal Point if you don’t need full control. #DrupalCampES

T H A N K S ! @chumillas

Q U E S T I O N S