SlideShare a Scribd company logo
1 of 47
Download to read offline
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 h u m i l l a s # D r u p a l C a m p E S
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 D
@chumillas
ckrina
T H E B A S I C S
R E S P O N S I V E I M A G E S I N D R U PA L
A R T D I R E C T I O N
W Y S I W Y G
R E S P O N S I V E I M A G E S
@ c h u m i l l a s # D r u p a l C a m p E S
P A G E W E I G H T
A V E R A G E
2016
2015
2014
2,26Mb
1,95Mb
2,48Mb
+16%
+15%
+10%
@ c h u m i l l a s # D r u p a l C a m p E S
6 1 %
web traffic
A S Y N C H R O N O U S
request
T O O B I G
for the device
F A C T S
@ c h u m i l l a s # D r u p a l C a m p E S
D E L I V E R T H E
H I G H E S T Q U A L I T Y
I M A G E S U P P O R T E D
A N D N O T H I N G M O R E .
T H E B A S I C S
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
S C A L E D I M A G E
srcset=“large.jpg 1440w,

medium.jpg 960w,

small.jpg 480w”
sizes=“(min-width: 36em) 33.3vw,





src=“medium.jpg”
alt=“A road”>
100vw”
<img
S C A L E D I M A G E
srcset=“large.jpg 1440w,

medium.jpg 960w,

small.jpg 480w”
W I D T H I N P I X E L Sw
(1440px)

(960px)

(480px)
<img
sizes=“(min-width: 36em) 33.3vw,
100vw”
image {

width: 100vw;

}

@media (min-width: 36em) {

width: 33.3vw;

}
srcset=“large.jpg 1440w,

medium.jpg 960w,

small.jpg 480w”
<img
C S S M E D I A Q U E R I E Ssizes
srcset=“large.jpg 1440w,

medium.jpg 960w,

small.jpg 480w”
sizes=“(min-width: 36em) 33.3vw,





src=“medium.jpg”
alt=“A road”>
100vw”
<img
S C A L E D I M A G E
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>
@ c h u m i l l a s # D r u p a l C a m p E S
<source srcset=“image-small.jpg 1x,

image-small2x.jpg 2x”
<img src=“image-big.jpg 180w” />
media=“(min-width: 0px) and
(max-width: 29.99em)”>
<source srcset=“image-big.jpg 1x,
media=”(min-width: 30em)”>
image-big2x.jpg 2x”
</picture>
sizes=”(min-width: 30em) 33vw”>
<picture>
@ c h u m i l l a s
# D r u p a l C a m p E S
P I C T U R E
B R O W S E R S U P P O R T
Same for srcret and sizes
@ c h u m i l l a s
# D r u p a l C a m p E S
P I C T U R E F I L L
B R O W S E R S U P P O R T
A R E S P O N S I V E I M A G E P O L Y F I L L
http://scottjehl.github.io/picturefill/
D R U P A L
R E S P O N S I V E I M A G E S I N
@ c h u m i l l a s
# D r u p a l C a m p E S
R E S P _ I M G > P I C T U R E
B R E A K P O I N T
D R U P A L 7
A D A P T I V E I M A G E S
A I S ( A D A P T I V E I M A G E S T Y L E S )
C L I E N T- S I D E A D A P T I V E I M A G E
C O M M I T E R S : J e l l e _ S , a t t i k s , …
@ c h u m i l l a s
# D r u p a l C a m p E S
R E S P O N S I V E I M A G E S ( P i c t u r e )
B R E A K P O I N T
Image,File,Field
M O D U L E S
@ c h u m i l l a s # D r u p a l C a m p E S
Import/
create

breakpoints
Create

Image styles
Create

Responsive

Images
Apply

Responsive

Images
1 2 3 4
P R O C E S S
@ c h u m i l l a s # D r u p a l C a m p E S
1
W H E R E
T H E M E S M O D U L E S
B R E A K P O I N T S
@ c h u m i l l a s # D r u p a l C a m p E S
@media all and (min-width:851px)
{/*CSS*/}
1
B R E A K P O I N T S
W H A T A R E
I M A G E S T Y L E S
P L A N
2
(min-width: 480px) (min-width: 830px)
I M A G E S T Y L E S
P L A N
2
830px
-40px margins
-20px gutter
770px/2 images
385px
I M A G E S T Y L E S
By @marcdrummond https://www.youtube.com/watch?v=3BF5WE_NOIU
P L A N
385px
480px
+25%
+25%
300px
385px
480px
240px
300px
+25%
300px
240px
+25%
240px
385px
2
480px
385px
@ c h u m i l l a s # D r u p a l C a m p E S
Import/
create

breakpoints
Create

Image styles
Apply

Responsive

Images
1 2
3
4
3
SCALED IMG
PICTURE
R E S P O N S I V E I M A G E S
C R E A T E
3
@ c h u m i l l a s
# D r u p a l C a m p E S
srcset=“large.jpg 1440w,

medium.jpg 960w,

small.jpg 480w”
sizes=“(min-width: 36em) 33.3vw,





src=“medium.jpg”
alt=“A road”>
100vw”
<img
S C A L E D I M A G E
https://vimeo.com/204517230
https://vimeo.com/204517211
<img src=“image-big.jpg 180w” />
<source srcset=“image-big.jpg 1x,
media=”(min-width: 30em)”>
image-big2x.jpg 2x”
</picture>
sizes=”(min-width: 30em) 33vw”>
<picture>
A R T D I R E C T I O N
https://vimeo.com/204517271
A R T
D I R E C T I O N
@ c h u m i l l a s # D r u p a l C a m p E S
@ c h u m i l l a s # D r u p a l C a m p E S
A R T D I R E C T I O N
R E S P O N S I V E I M A G E S
https://www.drupal.org/project/crop
@ c h u m i l l a s # D r u p a l C a m p E S
I M A G E W I D G E T C R O P
https://www.drupal.org/project/image_widget_crop
F U L L C O N T R O L
https://vimeo.com/204517111
F U L L C O N T R O L
L O N G
I M P L E M E N T A T I O N
G I V E S
R E Q U I R E S
@ c h u m i l l a s # D r u p a l C a m p E S
https://www.drupal.org/project/focal_point
F O C A L P O I N T
A U T O M A T E D
@ c h u m i l l a s # D r u p a l C a m p E S
https://vimeo.com/204517287
B A S I C 

A R T D I R E C T I O N
L O W E F F O R T
G I V E S
R E Q U I R E S
( R E A L L Y )
W Y S I W Y G
@ c h u m i l l a s # D r u p a l C a m p E S
I N S I D E W Y S I W Y G
R E S P O N S I V E I M A G E S
https://www.drupal.org/project/inline_responsive_images
*https://www.drupal.org/node/2061377
@ c h u m i l l a s # D r u p a l C a m p E S
• Plan your Responsive Images before
implementing.
• Use Focal Point if you don’t need full
control.
C O N C L U S I O N S
T H A N K S !
@ c h u m i l l a s
Q U E S T I O N S

More Related Content

DrupalCamp Spain - Responsive Images Under Control

  • 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 h u m i l l a s # D r u p a l C a m p E S 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 D @chumillas ckrina
  • 3. T H E B A S I C S R E S P O N S I V E I M A G E S I N D R U PA L A R T D I R E C T I O N W Y S I W Y G R E S P O N S I V E I M A G E S
  • 4. @ c h u m i l l a s # D r u p a l C a m p E S P A G E W E I G H T A V E R A G E 2016 2015 2014 2,26Mb 1,95Mb 2,48Mb +16% +15% +10%
  • 5. @ c h u m i l l a s # D r u p a l C a m p E S 6 1 % web traffic A S Y N C H R O N O U S request T O O B I G for the device F A C T S
  • 6. @ c h u m i l l a s # D r u p a l C a m p E S D E L I V E R T H E H I G H E S T Q U A L I T Y I M A G E S U P P O R T E D A N D N O T H I N G M O R E .
  • 7. T H E B A S I C S
  • 8. 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 S C A L E D I M A G E
  • 9. srcset=“large.jpg 1440w,
 medium.jpg 960w,
 small.jpg 480w” sizes=“(min-width: 36em) 33.3vw,
 
 
 src=“medium.jpg” alt=“A road”> 100vw” <img S C A L E D I M A G E
  • 10. srcset=“large.jpg 1440w,
 medium.jpg 960w,
 small.jpg 480w” W I D T H I N P I X E L Sw (1440px)
 (960px)
 (480px) <img
  • 11. sizes=“(min-width: 36em) 33.3vw, 100vw” image {
 width: 100vw;
 }
 @media (min-width: 36em) {
 width: 33.3vw;
 } srcset=“large.jpg 1440w,
 medium.jpg 960w,
 small.jpg 480w” <img C S S M E D I A Q U E R I E Ssizes
  • 12. srcset=“large.jpg 1440w,
 medium.jpg 960w,
 small.jpg 480w” sizes=“(min-width: 36em) 33.3vw,
 
 
 src=“medium.jpg” alt=“A road”> 100vw” <img S C A L E D I M A G E
  • 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. <picture> @ c h u m i l l a s # D r u p a l C a m p E S
  • 16. <source srcset=“image-small.jpg 1x,
 image-small2x.jpg 2x” <img src=“image-big.jpg 180w” /> media=“(min-width: 0px) and (max-width: 29.99em)”> <source srcset=“image-big.jpg 1x, media=”(min-width: 30em)”> image-big2x.jpg 2x” </picture> sizes=”(min-width: 30em) 33vw”> <picture>
  • 17. @ c h u m i l l a s # D r u p a l C a m p E S P I C T U R E B R O W S E R S U P P O R T Same for srcret and sizes
  • 18. @ c h u m i l l a s # D r u p a l C a m p E S P I C T U R E F I L L B R O W S E R S U P P O R T A R E S P O N S I V E I M A G E P O L Y F I L L http://scottjehl.github.io/picturefill/
  • 19. D R U P A L R E S P O N S I V E I M A G E S I N
  • 20. @ c h u m i l l a s # D r u p a l C a m p E S R E S P _ I M G > P I C T U R E B R E A K P O I N T D R U P A L 7 A D A P T I V E I M A G E S A I S ( A D A P T I V E I M A G E S T Y L E S ) C L I E N T- S I D E A D A P T I V E I M A G E C O M M I T E R S : J e l l e _ S , a t t i k s , …
  • 21. @ c h u m i l l a s # D r u p a l C a m p E S R E S P O N S I V E I M A G E S ( P i c t u r e ) B R E A K P O I N T Image,File,Field M O D U L E S
  • 22. @ c h u m i l l a s # D r u p a l C a m p E S Import/ create
 breakpoints Create
 Image styles Create
 Responsive
 Images Apply
 Responsive
 Images 1 2 3 4 P R O C E S S
  • 23. @ c h u m i l l a s # D r u p a l C a m p E S 1 W H E R E T H E M E S M O D U L E S B R E A K P O I N T S
  • 24. @ c h u m i l l a s # D r u p a l C a m p E S @media all and (min-width:851px) {/*CSS*/} 1 B R E A K P O I N T S W H A T A R E
  • 25. I M A G E S T Y L E S P L A N 2 (min-width: 480px) (min-width: 830px)
  • 26. I M A G E S T Y L E S P L A N 2 830px -40px margins -20px gutter 770px/2 images 385px
  • 27. I M A G E S T Y L E S By @marcdrummond https://www.youtube.com/watch?v=3BF5WE_NOIU P L A N 385px 480px +25% +25% 300px 385px 480px 240px 300px +25% 300px 240px +25% 240px 385px 2 480px 385px
  • 28. @ c h u m i l l a s # D r u p a l C a m p E S Import/ create
 breakpoints Create
 Image styles Apply
 Responsive
 Images 1 2 3 4 3 SCALED IMG PICTURE R E S P O N S I V E I M A G E S C R E A T E 3
  • 29. @ c h u m i l l a s # D r u p a l C a m p E S srcset=“large.jpg 1440w,
 medium.jpg 960w,
 small.jpg 480w” sizes=“(min-width: 36em) 33.3vw,
 
 
 src=“medium.jpg” alt=“A road”> 100vw” <img S C A L E D I M A G E
  • 32. <img src=“image-big.jpg 180w” /> <source srcset=“image-big.jpg 1x, media=”(min-width: 30em)”> image-big2x.jpg 2x” </picture> sizes=”(min-width: 30em) 33vw”> <picture> A R T D I R E C T I O N
  • 34. A R T D I R E C T I O N
  • 35. @ c h u m i l l a s # D r u p a l C a m p E S
  • 36. @ c h u m i l l a s # D r u p a l C a m p E S A R T D I R E C T I O N R E S P O N S I V E I M A G E S https://www.drupal.org/project/crop
  • 37. @ c h u m i l l a s # D r u p a l C a m p E S I M A G E W I D G E T C R O P https://www.drupal.org/project/image_widget_crop F U L L C O N T R O L
  • 39. F U L L C O N T R O L L O N G I M P L E M E N T A T I O N G I V E S R E Q U I R E S
  • 40. @ c h u m i l l a s # D r u p a l C a m p E S https://www.drupal.org/project/focal_point F O C A L P O I N T A U T O M A T E D
  • 41. @ c h u m i l l a s # D r u p a l C a m p E S https://vimeo.com/204517287
  • 42. B A S I C 
 A R T D I R E C T I O N L O W E F F O R T G I V E S R E Q U I R E S ( R E A L L Y )
  • 43. W Y S I W Y G
  • 44. @ c h u m i l l a s # D r u p a l C a m p E S I N S I D E W Y S I W Y G R E S P O N S I V E I M A G E S https://www.drupal.org/project/inline_responsive_images *https://www.drupal.org/node/2061377
  • 45. @ c h u m i l l a s # D r u p a l C a m p E S • Plan your Responsive Images before implementing. • Use Focal Point if you don’t need full control. C O N C L U S I O N S
  • 46. T H A N K S ! @ c h u m i l l a s
  • 47. Q U E S T I O N S