Managing media in large-scale Drupal websites

Mario Hernandez

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.

Topics Covered:
Identify the role of images within a given website to determine how to best handle them for better site performance and user experience.
Define the information a developer and the browser has in hand at page load to proactively know how to load the right image.
When to use the picture element, or srcset and sizes attributes.
How to properly create image styles as well as responsive image styles by using aspect ratios to promote reusability and improve maintenance of image styles.
Document images usage specs for your team.

Learning Objectives
Upon attending this session, you will be able to properly plan for how to handle images on your website while improving performance and user experience.
You will be able to have a solid system in place for creating and managing image styles in an efficient way.
You will know the difference between Art Direction and Resolution Changes and use the right configuration to handle each accordingly.
Will have a solid plan for logging your site's images configuration to share with your team and stakeholders.

Target Audience
This session is intended for Site Builders and Developers who normally handle the configuration of image and images styles on a project.

Prerequisites
To get the most out of this session you will need to have a basic understanding of
Image styles and responsive image styles.
Knowledge of the picture element as well as srcset and sizes attributes is helpful.
Understanding how to configure an image field or media field is helpful.