How to Ensure Images are Optimized in Drupal

A fundamental aspect of Drupal development is ensuring images are displayed optimally—with a high enough resolution that the integrity of the image is not compromised, but not so large that load times are delayed. As Internet connection speeds increase, developers and those who can quickly download a page, can easily overlook excessively large page weight.

It is important, however, for developers to keep in mind that users with slower connections may be frustrated with images that are slow to load. Slow load times can also have a negative impact on SEO.

Using Drupal Image Styles with Responsive Images, a feature of Drupal core, is an essential step for ensuring that images are posted for both optimal speed and quality. 

Drupal Image Styles

The most important step in optimizing an image for a Drupal site is not displaying the original version of an image. Instead, use Drupal Image Styles to generate a new version of the original source image in a JPEG file format.
    
JPEG images are recommended because their image compression significantly reduces the file size. PNG images, on the other hand, use lossless compress, which results in excellent quality but larger file sizes.  While JPEG's are appropriate for content, PNG's are best used for thematic elements such as the logo.
    
In addition to reducing page weight, Image Styles also removes metadata that might have been included in the original image, both further reducing page weight and excluding potentially sensitive data such as the geographic coordinates where a photo was taken.
 

Image Styles also removes metadata from the original image, further reducing page weight and excluding potentially sensitive data.

Responsive Images

When configuring the image style for a given Drupal field, the Responsive Images module can help ensure the appropriate version of an image is output for a given device. Instead of scaling down large images with CSS styles, responsive images send the right image to the right device, thus reducing page weight and improving the user's experience.

Rich Text

In addition to ensuring Drupal images are output via image styles, rich text fields should be reviewed to ensure any image upload tools do not output the original image. Ideally, the "Media" entity type should be used for managing images, with content referencing Media vs. managing image files directly.

Despite Device or Internet Connection

By using Drupal Image Styles along with Responsive Images, Drupal can optimally enhance image content to ensure users have a good experience, regardless of their device or internet connection.

In practice, however, Drupal sites will often have a mix of image styles vs. original images. To evaluate a site's images, Google Open-Source Lighthouse is a good open-source tool for scanning a site to generate a report of potential issues. You can review the results via Chrome's developer tools.

Looking to learn more about ensuring images are optimized or any aspect of creating an engaging user experience? Promet Source is happy to help! Contact us today!