advanced_image_media_attributes_formatter
Introduction
If you're new to Drupal, images are added to content using Image fields (direct uploads) or via the Media library (reusable images). Drupal core already handles basic lazy loading, but lacks easy controls for advanced performance attributes.
This module provides a simple solution: it adds UI options to set modern HTML attributes — fetchpriority (high/low/auto) and decoding (async/sync/auto) — directly on image fields. For Media library images, it also lets you override the loading attribute (lazy/eager).
These attributes tell browsers how to prioritize and decode images, improving page speed and scores like Largest Contentful Paint (LCP) in Google PageSpeed/Lighthouse — especially for hero images or galleries.
No coding required: just install, go to "Manage display" (or Views), and select options in the familiar Image or Rendered entity formatter settings.
What solution does this module provide?
It gives beginners and pros an easy, no-code way to apply performance-best-practice image attributes that aren't yet in Drupal core, working seamlessly for both classic Image fields and Media entities.
This module adds fetchpriority and decoding attributes to image/media fields, plus loading override for media images. Easy UI to optimize performance—no code needed!)
Features
- Basic functionality: Extends Drupal core's default "Image" formatter (for direct image fields) and "Rendered entity" formatter (for media references), including support for image styles and responsive images.
- Unique features:
- Direct dropdowns in formatter settings for fetchpriority (high, low, auto, or none).
- Direct dropdowns for decoding (async — recommended for smoother performance, sync, auto, or none).
- For media references: checkbox to override the inner image's loading attribute (lazy or eager), plus the above attributes, and select the target image field (usually field_media_image).
- When and why would someone use this module? When you want better control over image loading performance beyond core's basic lazy loading. Great for improving Core Web Vitals, prioritizing critical images (e.g., hero/banner with fetchpriority=high), or ensuring async decoding site-wide.
- Use cases:
- Hero images above the fold: fetchpriority=high + loading=eager
- Global optimization: decoding=async on all images
- Galleries/carousels below the fold: loading=lazy + fetchpriority=low
- Works in content types, Views, Paragraphs, Layout Builder, etc.
Post-Installation
After installing and enabling the module:
- No new configuration pages or content types are created — it integrates directly into existing interfaces.
- Visit any entity's Manage display (e.g., Structure > Content types > Article > Manage display).
- For direct Image fields: Choose the "Image" formatter — new options for fetchpriority and decoding will appear.
- For Media reference fields (e.g., pointing to "Image" media type): Choose "Rendered entity" formatter — check "Override image loading" to show options for loading (lazy/eager), fetchpriority, decoding, and the target image field.
- The same options are available in Views field settings.
Clear caches (drush cr or via UI) if options don't appear immediately.
Special consideration: The module globally extends core formatters using hook_field_formatter_info_alter(), so changes apply everywhere those formatters are used (site-wide consistency).
Additional Requirements
- Drupal core ^10 or ^11
- Core modules (already enabled by default): image and media
No external libraries, APIs, or additional dependencies required.
Recommended modules/libraries
- Blazy or Lazy: For advanced JavaScript-based lazy loading (as fallback or extra features).
- ImageAPI Optimize or modules supporting WebP/AVIF: To reduce image file sizes (complements these attributes).
- Tools like Google Lighthouse or PageSpeed Insights: To measure real-world improvements.
Similar projects
As of December 2025, no other contributed module on Drupal.org provides a simple, dedicated UI for fetchpriority and decoding attributes with full support for both classic/direct Image fields and images inside Media entities.
These features are discussed in Drupal core issues (#3366828 for fetchpriority and #3292918 for decoding) but not yet committed to core.
Alternatives include custom theme preprocess hooks or modules like Blazy (focuses on JS lazy loading and preloading, not native fetchpriority/decoding UI).
This module stands out by offering an intuitive, no-code configuration that works seamlessly across both image handling methods.
Supporting this Module
- Check out our sponsor, Dom Host Seo, who made this module possible with their support!
Community Documentation
Learn more about these attributes:
Features
Here, answer the following questions: What is the basic functionality? What unique features does enabling this project add? When and why would someone use this module? What use cases are there?
Post-Installation
How does this module actually work once I install it? Should I go to a config page? Should I look for a new content type? Should I go and manage my text formats? Provide an overview of the configuration process and any other special considerations for the module.
Additional Requirements
Does this project need anything beyond Drupal core? Include any dependent modules, libraries, APIs, etc., that are required for this project to work.
Recommended modules/libraries
Are there any projects that enhance or improve the functionality of this project?
Similar projects
If there are modules providing similar functionality, please describe what differentiates them.
Supporting this Module
If you have a Patreon, OpenCollective, etc. you can put links here to describe how people can support development.
Community Documentation
A great place to add links to YouTube walkthroughs, external documentation, or a demo site (use DrupalPod!).
You may continue to put additional information below here, if there are other things you think people need to know about your module!