Responsive Images

We pause a moment to cover an important topic, responsive images.

Properly managing images on your website can be the difference between good and bad performance. In Drupal, Image Styles are excellent for providing parameters around how big images should be rendered on a page. Image styles are flexible enough that let you render the same image in different sizes and aspect ratios depending on your needs. In addition, there are many contrib modules that allow you to add extra effects to images through image styles. Things like on-demand cropping, overlays, image scaling and more.

TIP: Enable the Responsive Images core module and any other modules you plan on using for image styles such as crop and focal point.

Ignite CMS comes pre-equipped with a range of sensible default settings, one of which includes the provision of responsive images for the two most widely used image ratios in web design: 16:9 and 4:3. These default options ensure that website images adapt seamlessly across various devices and screen sizes.

To see which image styles are configured for any responsive image style go to Admin..Configuration..Media..Responsive image styles and then click edit on any responsive image style.

For the 4:3 responsive image style, if you click edit you will see these 4 image styles selected:

Image styles used for 4:3 responsive style

We are not going to make any changes for our tutorial, but note that this is where image styles are configured in case you need to modify in the future.