@chumillas.

Transcription

1 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

2 C R I S T I N A C H U M I L L A S D E S I G N E R & D R U P A L F R O N T E N

3 RESPONSIVE IMAGES THE BASICS RESPONSIVE IMAGES IN DRUPAL ART DIRECTION

4 A V E R A G E PAGE WEIGHT ,48Mb +10% ,26Mb +16% ,95Mb

5 FACTS 61% web traffic ASYNCHRONOUS request TOO BIG for the

6 DELIVER THE HIGHEST QUALITY IMAGE SUPPORTED AND NOTHING

7 T H E B A S I C S

8 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

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

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

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

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

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

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

15 @chumillas <picture>

16 <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 src= image-big.jpg 180w /> </picture>

17 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

18 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 A R E S P O N S I V E I M A G E P O L Y F I L

19 RESPONSIVE IMAGES IN D R U P A L

20 D R U P A L 7 RESP_IMG > PICTURE BREAKPOINT COMMITERS: Jelle_S, attiks, ADAPTIVE IMAGES AIS (ADAPTIVE IMAGE STYLES) CLIENT-SIDE ADAPTIVE

21 M O D U L E S RESPONSIVE IMAGES (Picture) BREAKPOINT

22 P R O C E S S Import/ create breakpoints Create Image styles Create Responsive Images Apply Responsive

23 W H E R E B R E A K P O I N T S 1 THEMES

24 W H A T A R E B R E A K P O I N T S all and (min-width:851px)

25 P L A N I M A G E S T Y L E S 2 (min-width: 480px) (min-width: 830px)

26 P L A N I M A G E S T Y L E S 2 830px -40px margins -20px gutter 770px/2 images 385px

27 P L A N I M A G E S T Y L E S 2 240px +25% 300px +25% 385px +25% 480px +25% 240px 300px 385px 480px 240px 300px 385px 385px 480px

28 P L A N I M A G E S T Y L E S 2 N A M I N G COMPONENT SIZE teaser_s (240x200) teaser_s teaser_s (300x250) teaser_m teaser_s (385x 310) teaser_l teaser_s (480x390) teaser_xl 240x x x x390

29 C R E A T E R E S P O N S I V E I M A G E S SCALED IMG 4 Import/ create breakpoints Create Image styles 3 PICTURE Apply Responsive

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

31

32

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

34

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

36 @chumillas

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

38 F U L L C O N T R O L I M A G E W I D G E T C R O P

39

40

41

42

43

44

45 G I V E S F U L L 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

46 A U T O M A T E D F O C A L P O I N T

47 @chumillas

48 G I V E S B A S I C A R T 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 )

49 W Y S I W Y G

50 R E S P O N S I V E I M A G E S I N S I D E W Y S I W Y G

51 C O N C L U S I O N S Plan your Responsive Images before implementing. Use Focal Point if you don t need full

52 T H A N K

53 JOIN US FOR CONTRIBUTION SPRINT Friday, September 29, 2017 Mentored Core Spint 9:00-18:00 Room: Stolz 2 First time Sprinter Workshop 9:00-12:00 Room: Lehgar 1 - Lehar 2 General sprint 9:00-18:00 Room: Mall #drupalsprints

54 WHAT DID YOU THINK? Locate this session at the DrupalCon Vienna website: Take the survey!

55 Q U E S T I O N S