SlideShare a Scribd company logo

Managing Images In Large Scale Drupal 8 & 9 Websites

•
•
Mediacurrent
Mediacurrent

Images are a critical part of most websites. They enhance the user experience and make your website more engaging and visually appealing. However, if not handled properly, images can jeopardize your website’s performance and push visitors away if your site takes too long to load. Knowing how to properly configure your site to handle images in the most effective way possible can make a big difference in converting leads, getting more sales and/or getting more visitors on your site.

Related slideshows

Rain + GatsbyJS: Fast-Tracking to Drupal
Rain + GatsbyJS: Fast-Tracking to Drupal Rain + GatsbyJS: Fast-Tracking to Drupal
Rain + GatsbyJS: Fast-Tracking to Drupal
 
Prepare Your Drupal 9 Action Plan
Prepare Your Drupal 9 Action Plan Prepare Your Drupal 9 Action Plan
Prepare Your Drupal 9 Action Plan
 
Drupal Security: What You Need to Know
Drupal Security: What You Need to KnowDrupal Security: What You Need to Know
Drupal Security: What You Need to Know
 
1 of 41
Download to read offline
Managing Images in Large Scale Drupal Websites
Today’s Agenda 1. Taking Inventory of Images 2. Planning images usage 3. Art Direction is the exception 4. <picture> tag 5. Image Styles & Responsive Image Styles 6. Demo 7. Q & A
About Mediacurrent
Who We Are Our people our impelled to constantly improve technology for our clients.
Our Mission To bring together the most talented team members to provide world-class solutions for the web.
● Over 10 years of Drupal and Front-End Experience ● Trainer and Speaker ● Co-Host of Mediacurrent’s Open Waters Podcast Mario Hernandez Head of Learning marioRHernandez iMarioHernandez
This Session is For | 7 Site Builders Developers Content Managers Who want an improved Content Editing experience Who want to have a better understanding on what technique to use per each use case. Who need the flexibility to provide the best images at any breakpoint
Learn how to serve the right image at all times and to all devices. Learn the two ways in which images are served on a website. How to effectively manage image styles and responsive image styles. Goals of the Session | 8
| 9 Taking Inventory of Images
| 10
| 11
| 12
| 13 Image Styles
| 14 Images Styles: Best Practices ● Take full stock of entire site image requirements (if possible) ● Avoid creating image styles before fully understanding the images requirements ● Whenever possible build reusable image styles (no one offs) ● Aspect ratios are your friend ● Use descriptive names but not directly associated to a specific image or pages on the site ● Use multipliers (i.e. 2x)
| 15 Images Styles: Naming Conventions Bad name Homepage Article Image homepage_article_image ● Too vague ● Lacks dimensions or aspect ratio info ● Too restrictive Good name 16:9 Max 720px 16_9_max_720 ● Can be used across entire site where aspect ratio and dimensions are met ● Not associated with specific page or image ● Reusable
| 16 Images Styles: Naming Conventions Bad name Home Image Thumb Wide home_image_thumb_wide ● Restricted to only one image type ● Restricts usage to only homepage ● Lacks dimensions or aspect ratio info Good name 4:3 Max 300px 4_3_max_300 ● Can be used on any image with a 4:3 aspect ratio that meets size requirements ● Not restricted to homepage ● Potentially reduces number of image styles
| 17 Responsive Image Styles
| 18 Responsive Images Styles: Naming conventions ● Not as strict as naming image styles ● Image style names should target images types ● RESPONSIVE image styles names should target Use Cases Example: ● Bad: Homepage Gallery Images 1600x750 ● Good: Image Gallery or Gallery
| 19 Responsive Image Styles Image style Image style Image style Responsive Images Styles: Not the same as Image Styles
| 20 Responsive Images Styles: Naming conventions 16:9 Max 460px 16:9 Max 960px 16:9 Max 1400px Gallery
| 21 Art Direction
| 22 Art Direction
| 23 Art Direction: <picture> Element
| 24 Art Direction: <picture> Element
| 25 Art Direction: Breakpoints
| 26 Browser Support
| 27 Identifying the Gap Variable Things developers know during development Things the browser knows when rendering images Viewport dimensions NO YES Image size relative to viewport YES NO Screen density NO YES Images dimensions YES NO
| 28 Switch Resolution (most cases) #BLM
| 29 Photo by Terricks Noah #BLM
| 30 Letting the Browser do the Work <img sizes=" " srcset=" " alt=" " />
| 31 Letting the Browser do the Work <img sizes="(min-width: 720px) 50vw, 100vw" srcset="small.jpg 720w, medium.jpg 1200w, large.jpg 1900w" alt="Everything is awesome!" />
| 32 Rendering
| 33 Letting the Browser do the Work <img sizes="100vw" srcset="small.jpg 720w, medium.jpg 1200w, large.jpg 1900w" alt="Everything is awesome!" />
| 34 Rendering
| 35 Variable Things developers know during development Things the browser knows when rendering images Viewport dimensions NO YES Image size relative to viewport YES NO YES! via sizes Screen density NO YES Images dimensions YES NO YES! via srcset Closing the Gap
| 36 Documenting Image Styles
| 37
| 38 Resources Responsive Images 101 - 9 Part Series https://cloudfour.com/thinks/responsive-images-101-definitions/ Srcset and Sizes http://ericportis.com/posts/2014/srcset-sizes/ Responsive Images in Drupal using srcset and sizes https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset The unexpected power of Viewport unit in CSS https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css Image Widget Crop Module (Video tutorial) https://www.youtube.com/watch?v=lvj9MEEAs6s
| 39| 39 Demo Time!
| 40| 40 Your Feedback is Valuable!
Thank you! @Mediacurrent Mediacurrent @Mediacurrent MediacurrentDrupal Mediacurrent.com @Mediacurrent

More Related Content

Managing Images In Large Scale Drupal 8 & 9 Websites

  • 1. Managing Images in Large Scale Drupal Websites
  • 2. Today’s Agenda 1. Taking Inventory of Images 2. Planning images usage 3. Art Direction is the exception 4. <picture> tag 5. Image Styles & Responsive Image Styles 6. Demo 7. Q & A
  • 4. Who We Are Our people our impelled to constantly improve technology for our clients.
  • 5. Our Mission To bring together the most talented team members to provide world-class solutions for the web.
  • 6. ● Over 10 years of Drupal and Front-End Experience ● Trainer and Speaker ● Co-Host of Mediacurrent’s Open Waters Podcast Mario Hernandez Head of Learning marioRHernandez iMarioHernandez
  • 7. This Session is For | 7 Site Builders Developers Content Managers Who want an improved Content Editing experience Who want to have a better understanding on what technique to use per each use case. Who need the flexibility to provide the best images at any breakpoint
  • 8. Learn how to serve the right image at all times and to all devices. Learn the two ways in which images are served on a website. How to effectively manage image styles and responsive image styles. Goals of the Session | 8
  • 10. | 10
  • 11. | 11
  • 12. | 12
  • 14. | 14 Images Styles: Best Practices ● Take full stock of entire site image requirements (if possible) ● Avoid creating image styles before fully understanding the images requirements ● Whenever possible build reusable image styles (no one offs) ● Aspect ratios are your friend ● Use descriptive names but not directly associated to a specific image or pages on the site ● Use multipliers (i.e. 2x)
  • 15. | 15 Images Styles: Naming Conventions Bad name Homepage Article Image homepage_article_image ● Too vague ● Lacks dimensions or aspect ratio info ● Too restrictive Good name 16:9 Max 720px 16_9_max_720 ● Can be used across entire site where aspect ratio and dimensions are met ● Not associated with specific page or image ● Reusable
  • 16. | 16 Images Styles: Naming Conventions Bad name Home Image Thumb Wide home_image_thumb_wide ● Restricted to only one image type ● Restricts usage to only homepage ● Lacks dimensions or aspect ratio info Good name 4:3 Max 300px 4_3_max_300 ● Can be used on any image with a 4:3 aspect ratio that meets size requirements ● Not restricted to homepage ● Potentially reduces number of image styles
  • 18. | 18 Responsive Images Styles: Naming conventions ● Not as strict as naming image styles ● Image style names should target images types ● RESPONSIVE image styles names should target Use Cases Example: ● Bad: Homepage Gallery Images 1600x750 ● Good: Image Gallery or Gallery
  • 19. | 19 Responsive Image Styles Image style Image style Image style Responsive Images Styles: Not the same as Image Styles
  • 20. | 20 Responsive Images Styles: Naming conventions 16:9 Max 460px 16:9 Max 960px 16:9 Max 1400px Gallery
  • 23. | 23 Art Direction: <picture> Element
  • 24. | 24 Art Direction: <picture> Element
  • 25. | 25 Art Direction: Breakpoints
  • 27. | 27 Identifying the Gap Variable Things developers know during development Things the browser knows when rendering images Viewport dimensions NO YES Image size relative to viewport YES NO Screen density NO YES Images dimensions YES NO
  • 29. | 29 Photo by Terricks Noah #BLM
  • 30. | 30 Letting the Browser do the Work <img sizes=" " srcset=" " alt=" " />
  • 31. | 31 Letting the Browser do the Work <img sizes="(min-width: 720px) 50vw, 100vw" srcset="small.jpg 720w, medium.jpg 1200w, large.jpg 1900w" alt="Everything is awesome!" />
  • 33. | 33 Letting the Browser do the Work <img sizes="100vw" srcset="small.jpg 720w, medium.jpg 1200w, large.jpg 1900w" alt="Everything is awesome!" />
  • 35. | 35 Variable Things developers know during development Things the browser knows when rendering images Viewport dimensions NO YES Image size relative to viewport YES NO YES! via sizes Screen density NO YES Images dimensions YES NO YES! via srcset Closing the Gap
  • 37. | 37
  • 38. | 38 Resources Responsive Images 101 - 9 Part Series https://cloudfour.com/thinks/responsive-images-101-definitions/ Srcset and Sizes http://ericportis.com/posts/2014/srcset-sizes/ Responsive Images in Drupal using srcset and sizes https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset The unexpected power of Viewport unit in CSS https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css Image Widget Crop Module (Video tutorial) https://www.youtube.com/watch?v=lvj9MEEAs6s
  • 39. | 39| 39 Demo Time!
  • 40. | 40| 40 Your Feedback is Valuable!