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.

of

DrupalCamp Spain - Responsive Images Under Control Slide 1 DrupalCamp Spain - Responsive Images Under Control Slide 2 DrupalCamp Spain - Responsive Images Under Control Slide 3 DrupalCamp Spain - Responsive Images Under Control Slide 4 DrupalCamp Spain - Responsive Images Under Control Slide 5 DrupalCamp Spain - Responsive Images Under Control Slide 6 DrupalCamp Spain - Responsive Images Under Control Slide 7 DrupalCamp Spain - Responsive Images Under Control Slide 8 DrupalCamp Spain - Responsive Images Under Control Slide 9 DrupalCamp Spain - Responsive Images Under Control Slide 10 DrupalCamp Spain - Responsive Images Under Control Slide 11 DrupalCamp Spain - Responsive Images Under Control Slide 12 DrupalCamp Spain - Responsive Images Under Control Slide 13 DrupalCamp Spain - Responsive Images Under Control Slide 14 DrupalCamp Spain - Responsive Images Under Control Slide 15 DrupalCamp Spain - Responsive Images Under Control Slide 16 DrupalCamp Spain - Responsive Images Under Control Slide 17 DrupalCamp Spain - Responsive Images Under Control Slide 18 DrupalCamp Spain - Responsive Images Under Control Slide 19 DrupalCamp Spain - Responsive Images Under Control Slide 20 DrupalCamp Spain - Responsive Images Under Control Slide 21 DrupalCamp Spain - Responsive Images Under Control Slide 22 DrupalCamp Spain - Responsive Images Under Control Slide 23 DrupalCamp Spain - Responsive Images Under Control Slide 24 DrupalCamp Spain - Responsive Images Under Control Slide 25 DrupalCamp Spain - Responsive Images Under Control Slide 26 DrupalCamp Spain - Responsive Images Under Control Slide 27 DrupalCamp Spain - Responsive Images Under Control Slide 28 DrupalCamp Spain - Responsive Images Under Control Slide 29 DrupalCamp Spain - Responsive Images Under Control Slide 30 DrupalCamp Spain - Responsive Images Under Control Slide 31 DrupalCamp Spain - Responsive Images Under Control Slide 32 DrupalCamp Spain - Responsive Images Under Control Slide 33 DrupalCamp Spain - Responsive Images Under Control Slide 34 DrupalCamp Spain - Responsive Images Under Control Slide 35 DrupalCamp Spain - Responsive Images Under Control Slide 36 DrupalCamp Spain - Responsive Images Under Control Slide 37 DrupalCamp Spain - Responsive Images Under Control Slide 38 DrupalCamp Spain - Responsive Images Under Control Slide 39 DrupalCamp Spain - Responsive Images Under Control Slide 40 DrupalCamp Spain - Responsive Images Under Control Slide 41 DrupalCamp Spain - Responsive Images Under Control Slide 42 DrupalCamp Spain - Responsive Images Under Control Slide 43 DrupalCamp Spain - Responsive Images Under Control Slide 44 DrupalCamp Spain - Responsive Images Under Control Slide 45 DrupalCamp Spain - Responsive Images Under Control Slide 46 DrupalCamp Spain - Responsive Images Under Control Slide 47
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

DrupalCamp Spain - Responsive Images Under Control

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • carloscamara

    Jul. 6, 2017

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.

Views

Total views

822

On Slideshare

0

From embeds

0

Number of embeds

37

Actions

Downloads

3

Shares

0

Comments

0

Likes

1

×