Everything You Should Know About Working With Images In Drupal

Introduction

The first website was created in 1988. It was a simple static website with information about the World Wide Web. At that time, it was easy to be a web developer. All one had to do was use a few HTML tags for heading, paragraphs, and text formatters, and the website was ready.

People had <h1>, <p> and <a> tags at that time. The other tags like <title>, <ul>, <ol>, <li>, <h2>, <h3>, <h4>, <h5>, and <h6> were introduced later. But there was no radical change until the introduction of the <img> tag.

The Introduction Of The <img> Tag

The <img> tag changed the web pages forever. The websites created during that time were more beautiful and visually appealing. The website builders have also become more powerful in terms of what they can put up for show now.

But slowly, as time progressed, with this ability to create visually appealing websites came forward multiple issues related to:

• Performance
• Accessibility
• Storage
• Responsiveness
• Security
• Failures

The life of developers wasn’t easy anymore.

Projects And Images

When it comes to images on a website, there are several things that developers have to keep in mind when starting a new project. If they fail, it can be very costly in the long run. It may not even be possible to resolve some of the issues once the website has been launched and content creators have already uploaded multiple images.

But what can one do to plan for images in a project efficiently?

Find the answer to this question here.

Note: Most of the points will be specific to Drupal websites. If you are using other CMS/Frameworks, you will still be able to understand the type of solution that has to be implemented.

Image Upload And Server Configurations

When a developer uploads an image to a website, a multipart form request containing image data is sent to the server for storing the image. But before the web server handles the request, image uploading should be enabled, and the maximum size allowed for an image should be configured.

If CDN or a reverse proxy server is configured, the developer might have to make subsequent changes. Avoid making mistakes, as misconfiguration at this level leads to upload errors.

In Drupal, ensure that PHP parameters in the php.ini file are set to allow developers a file upload based on application requirements. Drupal also has a configuration to limit the maximum file upload size. It is recommended that developers should set the configuration while adding a new file upload field.

One should understand that image upload size configuration on the server and in PHP should be good enough to accommodate the maximum file size which is specified in all file uploads. If this is not done, the developer is not shown an error when uploading an image. This also leads to issues with the front-end validation to limit the size. The ‘max_post_size’ configuration should also be set appropriately to avoid these errors.

Image Upload UX Improvement

By default, Drupal provides a straightforward file upload-like button when an image field in any content type is added. This works perfectly fine. But there is a lot more which can be done for better Drupal development customization like:

• The option to crop the image can be added so that end-users don’t have to rely on any external application for cropping. Image Widget Crop module can be used to enable this feature on any image field.
• The focus point on the image can also be selected. This is very useful with large image sizes as it helps control the orientation of the image when it is displayed. The Drupal module to achieve this feature is Focal Point.
• The actual image upload UX can be further improved by using interactive JS libraries such as DropzoneJS. This allows users to upload images with a smooth drag and drop in an intuitive interface. These kinds of libraries can be integrated easily into Drupal. Developers can also look for a contributed module that does that. Check out the module for DropzoneJS. DropzoneJS can also help in setting up client-side image compression. 

Thanks to the plugin-based architecture and implementation of field widgets in Drupal, there are countless possibilities for providing the desired UX when it comes to image or file uploading. Check this list to find required field formatters easily.

Image Compression

Earlier image compression was not an issue as images were not of very high quality, and problems like storage and network issues did not exist. But with the improvements in image capture technology and storage, an image's average size (in MB or KB) has increased.

These larger images cause significant performance issues when transferred to another device through the internet. In the worst cases, it’s easy to observe a noticeable image loading time.

This is why it is always a good idea to compress the images using online tools such as TinyPNG, Compress Now, and Compress JPEG. All content creators and editors should be aware of these tools and the importance of image compression.

This good practice can impact the performance and SEO of the website. A JS script can also be set up to compress the image before it is uploaded. Compressor.js is a helpful library for achieving this.

Image Storage In Drupal

Understanding how Drupal stores images is useful when migrating data to/from a Drupal website, switching to a different hosting service, or debugging a file.

When an image is added, an entry is done in the respective field table. For example, if a machine name is ‘field_image’ in any of the content types, a table in the database with the name ‘node__field_image’ can be found. It will have columns like: 

• bundle: 
• deleted: 
• entity_id
• revision_id 
• langcode
• delta
• field_image_target_id 
• field_image_alt 
• field_image_title 
• field_image_width
• field_image_height.

This shows that Drupal stores the field-specific information along with the alternate text, image title, width, and height. Regarding debugging specific issues, developers can query the database to find if any image has alternate text missing or exceeds the required pixel size.

‘field_image_target_id’ in this column is a reference to an entry in the ‘file_managed’ table. The ‘file_managed’ table has the following columns:

• fid
• uuid
• langcode
• filename
• uri
• filemime
• filesize
• status
• created
• changed
• uid

Drupal and these two tables maintain a 'file_usage' table. It keeps a record of the file that was added through the module, the entity to which it is attached, and the number of times it is being used. It has the following columns:

• fid
• module
• type
• id
• count

The information in this table can be utilized to debug 404 errors, query the database to get file sizes and get information about images generated using image styles.

Image Accessibility

Keeping accessibility in mind whenever working on any project is crucial. It’s about adhering to the rules set by various standards, like WCAG, and ensuring that disabled people don’t feel ignored or left out.

Images should have an alternate text, and alt text is a mandatory field in Drupal. If it is not marked as required due to any custom implementation or usage of any contributed module, modify the settings to make it mandatory.

If images migrated from a different system do not have an alternate text set, ensure the editors populate it. Developers can also set logic to generate alt text from the page title or other relevant content.

Also, leverage Artificial intelligence techniques related to 'Image to Text Conversion' or 'Image Reading.' Almost all major cloud service providers such as AWS, Google Cloud, and Microsoft Azure provide API, which can be integrated to fully automate the process of populating alternate text, descriptions, or titles of images.

There are many Drupal modules as well for this that can be explored like:

• Drupal Rekognition
• Recognition API
• Automatic Alternative Text.

Read more to find information on image-related accessibility concepts.

Image Field Vs. Media In Drupal

Media entity was introduced in Drupal core in version 8.7. It enabled content creators to add media content to the pages, manage the items, leverage reusability, and take advantage of embedding media content along with the text. Combined with the core provided Media Library module and contributed plugins around media, this takes the editing experience to a new level.

But this also poses a dilemma: Should developers completely stop using the traditional image field and switch to media?

The answer to this question is a little complex. Depending on the use case, a simple image field or switching to media might be the right option. For example, if a developer doesn’t want the content from a field to be reusable and needs to avoid heavy processing in managing and rendering, then an image field is the right option. 

In case CMS has a mix of both image and media fields available in multiple content types, make sure to add appropriate help text and configure the required field widgets. Also, don’t forget to install modules such as Entity Browser and Entity Embed to continue using media-related functionality in a better way.

Image Styles In Drupal

Image styles in Drupal allow developers to upload multiple copies of an image in different sizes without any hassle. It also helps in ensuring better performance.

With the image style configured, Drupal generates a new size image on the server and modifies the src tags to serve the correct size image. Developers should prefer using image style rather than changing the size attributes of an image using CSS.

Responsive Images And Picture Tag In Drupal

It’s not pleasant when an image takes up all the space while browning. Or when a user has to scroll or zoom in to access the content on a page. Most developers know this, and that's why with time, there have been significant developments in terms of the responsiveness of a website.

HTML solved the problem of images in responsive websites by introducing a <picture> tag. This gave developers the flexibility to provide multiple image sources and render those based on a media query. Put simply, the picture tag identifies the current screen size and then places the correct image path in the src tag.

Drupal core has the module ‘Responsive Image,’ which provides developers with a UI to configure the appropriate image style for the screen size range. It also provides a field formatter to render image fields based on the settings done under the image UI. It is a good idea to explore this before starting the front-end implementation of any website and leveraging already built features.

Retina Images In Drupal

Retina displays created a buzz when they were first introduced. For an end-user, it simply meant crisper displays and an enhanced viewing experience. At a technical level, these displays have a very high pixel density, and that makes it impossible for the human eye to see the pixels.

To take advantage of Retina displays and display more beautiful images on a website, developers must ensure that images of double sizes are shown on the screen with high resolutions. For example, if a normal image had the size of 160 * 160 pixels, it should be 320 * 320 on a retina device.

When it comes to implementing this feature while ensuring good performance of the web page, developers can utilize the retina image module. Developers can define an image style with double size and configure it for media queries of a higher range. 

Image Optimization

Images have a lot of impact on the performance of web pages. Good practices should be implemented to optimize web pages.

Image Quality

Configure the correct image quality % in the Image toolkit menu (/admin/config/media/image-toolkit). It can be set between 60% - 75% to give a performance boost while not ruining the image quality.

Core provided manipulation is based on the PHP-GD library. Developers can also install contributed toolkit modules such as ImageMagick, which work with PHP ImageMagick.

Image Compression Pipeline

Install various CLI tools like jpegoptim, zopflipng, and pngcrush. Integrate the tools into the Drupal image optimize pipeline using the Image Optimize module. This module also integrates with external image compression services and returns high-quality images of smaller sizes.

CSS Sprites

Combine all images using CSS sprites if there are multiple small repeatable images in the UI of a web application. This reduces the load time drastically. SVG and base64 encoded images can also be used for better performance.

Lazy Loading

Various Image Lazy loading JS libraries can help reduce a lot of bytes in an initial request. Modules for implementing this feature are Lazy-Load and Blazy.

Expiry Headers

Set an expiry header for the image data being served from the server. This helps browsers cache the images and avoid frequent requests.

Image Storage On Amazon S3 And Serving Via CDNs In Drupal

Even after following all the good practices and doing everything right, the number of requests for loading images might be too much for infrastructure. And this becomes worse when a website is under attack.

Storing images on different servers is a good way to solve this problem. Here, one must ensure that there is a mechanism available to store the images on different servers without making any changes at the image upload level.

Check the S3 File system module, which does the required encapsulation at the right place in the image life cycle. It allows developers to serve files from an S3 bucket. The applications dependent upon a Drupal website can also get image data from the S3 and reduce the load on the server hosting the actual website.

A CDN can also be used to serve images and reduce the request load on the main server. The setup of serving images via CDN is fairly simple as it’s a common practice to keep CDN configured.

Drupal has various contributed modules such as CDN, Sirv, and Image Engine that can be explored for adding this functionality. In the case of a Drupal website, Fastly CDN can also be used. It has its image optimization add-ons.

Integration With Digital Asset Management (DAM) Software

It is a standard practice to store all digital assets such as images, videos, and audio files in software dedicated to easy media management. Organizations can use centralized storage to use a single digital asset on multiple applications.

DAM allows modifying media content without making any changes to linked applications. For web applications with high media content, it is recommended to use a DAM and integrate the same in Drupal.

It is easy to find a contributed module or integration notes for most of the famous DAM software with Drupal like Bynder, Vimeo, and Acquia DAM. By using a DAM, developers get all the advantages of serving images from a different server and backup assets in case of failure.

Next Generation Image Formats

Images with next-generation formats such as WebP, JPEG2000, AVIF, and HEIC are actively used. These formats ensure:

• Better-looking pictures of less size
• Quickly loading images
• Enhanced overall web surfing experience

AVIF has better compression than WebPG without compromising on image quality. It is recommended to allow support for these in a project even if it is not popular now.

Read more about module WebP to provide support for WebP format images.

The Conclusion

This is all the developers need to know about using images in Drupal. Hopefully, this blog acts as a good resource for developers to help plan a project better and avoid getting into unresolvable image-related solutions.

Keep an eye out for the modules related to images on drupal.org to stay updated.