Tag Archives: dpi

Responsive Images

There are great problems for those who want real responsive images.

Note to self: The lazy, cross-browser, cross-device (desktop and mobile), low overhead, kinda light, solution so far is:

  1. make your images 2x their display size
  2. compress them with high compression ratio (30% quality)
  3. and set their size by css (using media queries if needed)

For an entry point on the subject, you may start here: noupe article



This guide is designed as a “get started” or introductory read for the starting to intermediate designer who wants to learn or get more knowledge about cross-DPI and cross-platform design from the very beginning.

No complex math and un-parsable graph, just straight forward explanations ordered in short sections for you to understand and apply directly to your design process.

Written by Sebastien Gabriel.