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
srcsetandsizesattributes of theimgtag. 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