Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DrupalCamp Spain - Responsive Images Under Control

519 views

Published on

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. And, 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.

This session started with a quick introduction about the different existing solutions for responsive images to be sure we are all at the same page. I explained the difference between viewport sizing and Art Direction and how we are supposed to work with Drupal for each one, including demos. I also shares tips and contrib modules that can make the developer and the final user live easier.

Published in: Internet
  • Be the first to comment

DrupalCamp Spain - Responsive Images Under Control

  1. 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. 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. 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. 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. 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. 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. 7. T H E B A S I C S
  8. 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. 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. 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. 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. 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. 13. S C A L E D I M A G E S
  14. 14. A R T D I R E C T I O N
  15. 15. <picture> @ c h u m i l l a s # D r u p a l C a m p E S
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. I M A G E S T Y L E S P L A N 2 (min-width: 480px) (min-width: 830px)
  26. 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. 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. 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. 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
  30. 30. https://vimeo.com/204517230
  31. 31. https://vimeo.com/204517211
  32. 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
  33. 33. https://vimeo.com/204517271
  34. 34. A R T D I R E C T I O N
  35. 35. @ c h u m i l l a s # D r u p a l C a m p E S
  36. 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. 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
  38. 38. https://vimeo.com/204517111
  39. 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. 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. 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. 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. 43. W Y S I W Y G
  44. 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. 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. 46. T H A N K S ! @ c h u m i l l a s
  47. 47. Q U E S T I O N S

×