logo_image_enhanced
Introduction
Logo Image Enhanced enhances Drupal's default logo handling by addressing key limitations in core: limited file format support, no ability to apply Image Styles, inconsistent accessibility attributes, and no control over image loading performance.
Whether you're building a personal blog or a business site, this module ensures your logo shines on every device while meeting modern web standards. It allows you to:
- Upload logos in modern formats like WebP and AVIF for better performance.
- Apply any Drupal Image Style to the logo (resize, optimize, etc.).
- Set custom alt and title text for accessibility and SEO.
- Control image loading behavior (eager/lazy), fetch priority, and decoding strategy.
- Debug issues easily with an optional admin-only diagnostic panel.
No custom coding or theme modifications required – perfect for beginners and pros alike.
Features
Basic functionality
- Extends logo upload to support WebP, AVIF, SVG, APNG (in addition to core formats).
- Select and apply any existing Image Style to the site logo.
- Custom fields for logo alt text (required) and title attribute.
- Image loading attribute: choose between eager (recommended for logos above the fold) or lazy.
- Fetchpriority attribute: hint the browser how important the logo is (None, High, Low, Auto).
- Decoding attribute: control how the browser decodes the image (None, Async, Sync, Auto).
Unique features
- Theme-agnostic: Works reliably with any theme via three layers – server-side pre-render on the branding block, preprocess hooks for page/block templates, and JS fallback for non-standard themes.
- SVG-aware: Image styles are automatically skipped for SVG files (vector images cannot be raster-processed), while alt/title and performance attributes still apply.
- Admin-only debug panel showing logo config, loading/fetchpriority/decoding values, dimensions, DOM analysis, and JS settings.
- Smart logo URI detection from multiple sources (module config, theme settings, active theme, global config) for robust compatibility.
- Proper width/height attributes applied after styling for better layout performance (CLS prevention).
- Automatic cache and image style derivative flush when changing logos or styles – no manual cache clear needed.
When and why would someone use this module?
Use it when you need a faster-loading, accessible, and professionally styled logo without theme-specific hacks or custom code. The performance attributes (loading, fetchpriority, decoding) help improve Core Web Vitals scores.
Use cases
- Optimize logo file size with WebP/AVIF for better page speed scores.
- Apply consistent styling (e.g., scaled logo for header).
- Ensure WCAG compliance with meaningful alt text.
- Fine-tune logo loading performance with eager loading and high fetch priority for above-the-fold logos.
- Troubleshoot logo rendering issues in complex or contributed themes using the debug panel.
Post-Installation
After enabling the module:
- Visit Appearance > Settings (
/admin/appearance/settings) and select your active theme if needed. - In the "Logo image settings" area, expand the new Logo Image Enhanced fieldset.
- Configure Image Style, Alt Text, and Title.
- Set the Image loading attribute (eager is recommended for logos).
- Optionally set Fetchpriority and Decoding attributes for performance tuning.
- Upload a logo (now with WebP/AVIF/SVG support) or use the existing one.
- Optionally enable Debug mode to verify everything works (disable in production).
- Save – changes apply immediately site-wide.
The debug panel (if enabled) appears as a floating box in the bottom-right for administrators only. It shows configuration values, DOM analysis of detected logos, and current JS settings.
No additional permissions, blocks, or content types are added.
Additional Requirements
- Drupal core ^10 or ^11.
- Core Image module (enabled by default).
No other dependencies required.
Recommended modules/libraries
- ImageAPI Optimize or Image Optimize with WebP/AVIF pipelines – for automatic optimization when using Image Styles.
- Responsive Image – create and apply responsive logo variants.
Similar projects
- Image Style Logo: Theme-specific and lacks accessibility controls and performance attributes.
- Logo Block: Provides a block-based logo but no Image Style, modern format, or performance attribute support.
- Theme-specific logo settings (e.g., in Olivero): Limited to that theme only.
Logo Image Enhanced differentiates by being fully theme-agnostic, supporting modern formats natively, providing granular control over image loading performance, and including built-in debugging tools.
Supporting this Module
Love Logo Image Enhanced? Help keep it awesome:
- Contribute code or report issues on the issue queue.
- Star the project or write a review on Drupal.org.
- Share it with the Drupal community!
- Special thanks to our sponsor: Dom Host Seo for supporting development.
Community Documentation
No external tutorials or demo sites yet – feel free to create and share them!
Additional notes
- Installation migrates existing logo settings where possible.
- Uninstall cleans up all module configuration and clears related caches.
- Update hooks automatically fix configuration for users upgrading from previous versions.
- Compatible with Drupal 10 and 11, and with most contributed and custom themes.