Vary ImageResizer preset names by client resolution for automatic image resizing according to responsive webdesign practices. The project offers HTML filtering, compliance with the HTML5 picture element draft, flexible presets, and a prefetcher-safe polyfill.
C# JavaScript
Latest commit 2a82f39 Nov 27, 2013 @esn303 esn303 Update readme.md
Permalink
Failed to load latest commit information.
plugin Fixed bug where filtermodule fails if no img tags Mar 20, 2013
www Fixed bug where filtermodule fails if no img tags Mar 20, 2013
.gitattributes init Jun 29, 2012
.gitignore
readme.md Update readme.md Nov 27, 2013

readme.md

DEPRECATED!

Look here for new version: Slimmage+Slimresponse

ResponsivePresets for ImageResizer.Net

Effortless reponsive images powered by ImageResizer.Net

Introduction

Licensed under the MIT Licence, which allows open source as well as commercial use.

What does it to?

Requirements

Spin it up quickly for a test!

  • Use WebMatrix and fire it up on the "www"-folder, that's all!

How to use

ResponsivePresets extends the presets that are available with ImageResizer. With a simple dot-notation (of the preset name), you can enable screen resolution aware dynamic resizing for some - or all - of your images.

Tipp

You can run the www-folder in WebMatrix right after cloning the repo, as the assembly binaries are included for easy testing.

1. Enable ResponsivePresets

ResponsivePresets works in team with the standard Presets plugin for ImageResizer, so you need to enable and configure that as well. Deploy the assembly and activate the plugin:

  • Copy ResponsivePresets.dll to /bin/
  • Copy HtmlAgilityPack.dll to /bin/

Install the HttpModule that activates the request filter which transforms img tags with an dot-notation preset to full blown picture elements in <system.webServer>, <modules>:

<add name="ResponsivePresetsModule" type="ResponsivePresets.FilterModule.ActivateFilterModule, ResponsivePresets"/>

For a working example see web.config and ImageResizer.config in /www/

2. Segment device screen resolutions

The concept for ResponsivePresets is to group screen resolutions in classes that get prefixed to the base preset name. Define media queries for each prefix.

<responsivepresets respectPixelDensity="true">
    <preset prefix="mobile" />
    <preset prefix="desktop" media="(min-width: 960px)" default="true" />
    <preset prefix="hires" media="(min-width: 2000px)" />
</responsivepresets>

The attribute default set, defines the preset used for fallback images (noscript).

Tipp: px or em?

If you want to also generate image variants optimized for hires-displays (like 4k, or at least "Retina"), it's advisable to use em units and not px units in your media queries.

You are free to segment and structure to your liking, this allows ResponsivePresets to adapt to almost any requirement.

3. Configure presets

Add a preset to your config, like you would normally do for the presets plugin:

<preset name="galleryimage" settings="width=800" />

If this setting is i.e. for standard desktop devices, prefix the preset name with desktop. like so:

<preset name="desktop.galleryimage" settings="width=800" />

Add presets for all the other prefixes (device segments)

<preset name="mobile.galleryimage" settings="width=400" />
<preset name="desktop.galleryimage" settings="width=800" />
<preset name="hires.galleryimage" settings="width=1600" />

4. Enable "respectPixelDensity"-Setting

If set to "true", ResponsivePresets will generate srcset values with 1x, 2x, 3x and 4x variants of the images by zooming the images accordingly.

5. Prepare your markup

    <script src="/picturefill.js"></script>
  • If the pull request with my fix is not already merged, use this corrected version of the polyfill:

  • Adjust image source attribute: Instead of adding a fixed preset name to the image's request string, write the base preset name and prepend a dot to indicate you want this image to be extended by ResponsivePresets:

    <img src="sample.jpg?preset=.galleryimage" alt="sample image"/>

Notes

Your stylesheet has to take care to resize the images to the desired dimensions, they now greatly vary depending on the client's screen resolution and pixel density.

Consider to also include matchMedia.

Have a look at the picturefill compatibility chart.


Limitations

Polyfill vs. browser implementation

While polyfilling does work, using it in real world sites before a major browser implements the picture tag has to be well-considered.


Follow esn303 on twitter

This project is open to collaboration. Fork. Push. Innovate.