Responsive Images and Art Direction in Drupal 8

A presentation at DrupalCon Vienna 2017 in September 2017 in Vienna, Austria by Cristina Chumillas

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

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; }

<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

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” />

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

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 )

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

Cristina Chumillas
@ckrina

1 / 47

Optimizing images can drastically decrease the page load time because, on average, 60% of a website’s page weight is made up of them. Responsive Web Design has changed how the web is built and that includes images too, because the aim is to deliver the highest quality image supported and nothing more. So today we have new standard elements and attributes to work with images widely supported by browsers (and polyfills for the rest) and Drupal has incorporated them.

In Drupal 8 the Responsive Image module is in core and is prepared to solve a wide range of needs. But, do we really know how and when should we use the different options given? For example, do we know when should we use the “img” tag for responsive images instead of “picture”? Also, as usually happens in Drupal, there are several contributed modules that help us to improve the basic needs or to solve the special ones, like Art Direction.

I’ll start this session with a quick introduction about the different existing solutions for responsive images to be sure we are all at the same page. I’ll explain the difference between viewport sizing and Art Direction and how we are supposed to work with Drupal for each one, including demos. I’ll share tips and contrib modules that can make the developer and the final user lives easier.

When you leave this session you’ll have an idea about the options offered by Drupal and enough knowledge to choose the correct one for your project.

Responsive Images and Art Direction in Drupal 8

Link for this presentation:

HTML code for embedding:

Share on social media: