An essential aspect of web development is optimal user experience, and a pivotal factor of that is the assurance of perfectly sized images. If your target audience is using a mobile device, then the use of large images is suitable, on the other hand for desktop it is not optimal. Ensuring to provide the correct size of image for the right device is known as “responsive images”. These kinds of images help you with a faster loading speed and provide your visitors better user experience.
The Problem
One of the major issues with the images for web development is basically, the browser which you are choosing is unaware of the exact size that should be there matching the customer’s viewport of various screens. This sustains JavaScript and CSS are loaded. However, the browser can understand the environment in which the images are rendered including the exact size of the viewport and the resolution of the screen.
The Solution
This was previously mentioned that responsive images always use the picture element that has the perfect size which plays a major role in rendering signals to the browser. It sends the direction to choose from the best images based on the identified image style selections.
With the inclusion of the responsive pictures module in the core, Drupal 9 development has done a fantastic job. This will speed up website loading time and enhance performance by enabling the browser to download smaller-sized graphics for devices with lower screen resolution.
Steps to Reproduce
Enable Responsive images and breakpoint module.
Set up the breakpoints for your project’s theme.
Set up image styles for responsive images
Creating a responsive image style for your theme
Assign the responsive image style to an image field.
Step 1: Enable Responsive images and breakpoint module
There is no need to install either module because it is already a part of Drupal 9’s core. Because the breakpoint module will already be installed with the standard profile, all you need to do is enable the Responsive images module. Activate the breakpoint module if necessary.
Step 2: Set up the breakpoints for the theme of your project
You won’t need to generate a new breakpoints file if you are using a core theme like Bartik, Seven, Umami, or Claro because it already has one.
However, it is crucial that you declare the breakpoints in the “yourthemename.breakpoints.yml” file, which can be found in your theme’s directory, if you are using a customized theme for your project, usually found in “/themes/custom/yourthemename”.
Each breakpoint will apply a media query to the pictures. For instance, photos that are displayed on mobile devices may be smaller, or less than 768 pixels wide, but larger screens will have a width between 768 and 1024 pixels wide.
Step 3: Set up image styles for responsive images
Let’s now develop a picture style for every breakpoint. At Admin -> Config -> Media -> Image-styles, you can set your own image styles.
Then select “Add picture style.” Give your image style a meaningful name, and then use the Scale and crop effect to produce cropped photographs. Several image styles should be included for various viewports if the photos are stretched.
Step 4: Create a responsive image style for your theme
Here, you may provide the browser a variety of picture style alternatives and let it pick the best one from the bunch.
Go to: to build a fresh responsive Drupal 9 image style.
Click “Add responsive image” under Home -> Admin -> Config -> Media -> Responsive-image-style.
Give your responsive image style a meaningful name before choosing the breakpoint group (choose your theme). Next, link the listed breakpoints to the image styles.
The setups for the image style come in a variety of options.
Where you can select a single image style that will be displayed on the specific screen.
Pick various image styles: where you can choose different image styles and also set the image style’s viewport width
Step 5: Assign the responsive image style to an image field
Once all the configurations are complete, apply the responsive image style to the image field before moving on. To do this, navigate to the Manage display area of the field and choose the formerly established responsive image style.
Add content and examine the outcomes using a responsive image style on the page.
