Responsive Image Debugger

The Responsive Image Debugger module is a powerful tool for web developers working with responsive images in Drupal. It provides a simple yet effective way to visualize and debug responsive image selections made by the browser.

Features

• Visual Debugging: The module overlays image sizes and the corresponding Drupal image style names directly onto images. This allows developers to see which image was selected by the browser.
• srcset and sizes Attributes: Particularly useful for developers using the srcset and sizes attributes of the img tag. The module helps in understanding how different screen sizes affect the image selection process.
• Optimizes Workflow: Developers can quickly identify if the correct image size is being used for various breakpoints, ensuring optimal performance and user experience.
• Easy to Use: Simply enable the module, and it will start displaying the debugging information on responsive images throughout your site.

Additional Requirements

Only image_effects and it's dependencies.

Supported Image toolkits

Module should work with GD2, ImageMagick as well as GraphicsMagick toolkits.

Configuration

No additional configuration required. After enabling this module replaces the `ImageStyle` entity class and add additional Image Style Effect "Text Overlay" from image_effects automatically.

Danger

Do not use on production! During installation process module removes the styles folder in your site public folder.

Conflicts

This module conflicts with the imageapi_optimize module because both modules override the entity type image_style class.
When enabled - ImageStyle class from responsive_image_debugger will be used.
So this module should be used in a dev / testing environment for debugging purposes only.
It will also conflict with any other modules which override the image_style entity type class.

Supporting this Module

Support this module if it is valuable for you or your organization https://buymeacoffee.com/itech4web