Overview

The Imgfly module delivers on-the-fly images for responsive layouts with minimum configuration. The module uses a javascript code that determines the width of the parent element that holds the image and thus requests an image that will be dynamically generated to requested size. For optimal performance you need to have a reverse proxy caching mechanism on your site like Varnish or Squid to cache and deliver the dynamically generated images.

Features

  • Images are generated dynamically (on-the-fly).
  • Images are delivered in precisely the right size required unlike other responsive image modules that deliver slightly larger images and scales them down to fit.
  • Image sizes can be controlled by CSS on the parent elements containing the image element.
  • Minimal configuration required with Image presets unlike other modules that require you to create many presets for each size format you wish to deliver.
  • NEW: Lazy loading of images is now possible in the beta2 version.

Requirements

  • Highly recommended to use a reverse proxy caching mechanism like Varnish or Squid.

Similar projects

  • Borealis
    Very nice responsive images module. Easy to configure and use. Generates 4 different sizes of images and scales them down to fit all responsive layouts. With Imgfly there is no scaling-down in the browser.
  • Picture
    Great module that uses the HTML5 picture element. But if you need many different sizes and formats of images with many breakpoints, the amount of configuration needed is quite large and complex. With Imgfly you will only need 1 or 2 image styles.

What makes Imgfly different?

  • Images can be requested in a programatic/dynamic way with any size by sending width and height parameters in the URL.
  • These images are generated on-the-fly and are not saved to disk.
  • You can request any number of different formats for an image and do not have to create an image style for each format you require.
  • The size of the image will be generated dynamically based on the width of the parent container element. This lets you control your image sizes purely by CSS width definitions.
  • The generated images are delivered in exactly the required size. They are dynamically cropped and delivered and there is no down-scaling of images in the browser.

Troubleshooting

After installing this module and creating image styles with the right suffix, if your images do not show up its most probably to do with your CSS. Set all your images to have 100% width in your CSS, and the parent element of the image should have a width setting to display images in the sizes you prefer for your layout (desktop/tablet/mobile).

Sponsor

This project is sponsored by Aller Media, Norway.

Project Information

Downloads