Fork me on GitHub

responsivizr

Responsivizr is a visual tool to show how responsive images behave across viewports in Responsive Web Design.

It helps you choose the most effective image sizes and provides the HTML snippets to integrate into your code in three steps.

  1. Define viewports through page breakpoints and specify how image behaves in each viewport
  2. Specify image breakpoints using the generated graph
  3. Grab the HTML output and paste it in your code

Disclaimer

Responsivizr really needs a desktop browser to give its best. Feel free to get a taste of it, but be sure to come back on a desktop browser.

Name your project* or load a demo set.
*it will also be used to name images in the HTML snippet

Page breakpoints

Define the responsive viewports of the layout, and how images behave within each viewport.

more…

Define each viewport by entering the lower and upper bound in px, and assigning the viewport a name (e.g. xsmall, small, tablet, …).

Then specify the image size in % (or vw for fluid images. For fixed size images use px or em.

Flag the Art Directed checkbox to mark a specific viewport for art direction (i.e. use a different image specifically for that viewport).

Image breakpoints

The graph shows the size your image will take across each viewport, for various pixel densities.

more…

Image breakpoints define how many images are generated and referenced by the responsive image tag (be it the <img> or the <picture> element). Set them by clicking and dragging markers on the graph, and remember to specify the last one.

The graph does not represent the responsive continuum (so it might well extend beyond the max-width size of the largest viewport. In fact, this is very likely, since high density images have a pixel size two, three or more times as big as their layout size). The graph simply shows the size your image takes on every viewport and for various display densities (2x, 3x, ...).
This allows you to visually see how images designed for different viewports overlap in size, allowing to reuse an image on multiple viewports, reducing the overall number of images generated and optimizing over caching, editorial workflows, storage, etc..

Art directed sizes appear in their own graph and do not support additional input. This is because the browser must use the exact image specified in the source when the rendering conditions match the specific viewport size.

visible DPPX
need help?

Set image breakpoints by clicking on the graph: when close to an image boundary, the marker will snap to it.

shift while dragging disables snapping
and move the selected marker 1px left or 1p right
shift + and shift + move the selected marker 10px left or 10px right
DEL or backspace delete the selected breakpoint

Hover on image blocks to read the exact dimensions

Nothing to do here: art directed images don't need cuts.

Output

Fix the data to get the snippet

Feedback? Bugs? Requests?
Drop a line at responsivizr@modo.md