Responsive, regular/retina, intelligent images

Here is responsImg, an easy to install, easy to use jQuery plugin that turns your <img> tags into responsive images with retina alternatives.

Download it!

Retina alternatives

The plugin detects if your screen is high-DPI and provides a @2x version if specified.

Window resizing and phone rotation detection

If you resize your browser window of flip your mobile device, responsImg will recalculate everything to make sure the right image is displayed

Prevent downsizing

By default, responsImg prevents the browser from loading a smaller image if a bigger one is already loaded.

Media query or Element query. Your call!

Set your breakpoints according to the window or the image itself!

Name your breakpoints

To keep things simple, you can give names to your breakpoints. Changing the breakpoints afterwards is then much easier!

Minimal image depending on device

Optionally, you can ask responsImg to load images in a size that will look sharp only if your browser is completely zoomed out. For websites that want to keep mobile loading to a minimum and that don't have the meta viewport tag set to device-width.

Why use it?

It's just Javascript! No messing up the CSS styling, no server configuration and tweaking. Plus, it doesn't rely on a probable future <picture> tag which might cause forward compatibility problems. All you have to do is add attributes to the already existing, already working <img> tag and you're good to go!

The images intended for desktop viewing are not loaded if not necessary. The width of the browser (or of the image if configured so) is detected and the right source it loaded and displayed. Piece of cake!

Downsides...?

There is no perfect responsive images solution, and responsImg is no exception. However, it still might be the best way to get responsive images for your website.

It relies on Javascript, so you have to have some sort of fallback image in the src attribute. Since we don't want to load too much data, the source specified in the src should be very very small (like a blurred out miniature version of your image) or your smallest mobile image. Keep in mind: the src attribute represents breakpoint 0px. After the content appears, your appropriate images will load.

How to use it

Add the script tag

<script src="/js/jquery.responsImg.min.js"></script>

Call responsImg

$('.responsive-image').responsImg({
  breakpoints: {
    mobile: 320,
    desktop: 960
  }
});

Add your image tag...

Different image sources are set as data attributes in the <img> tag itself.
You can specify @2x image sources. If specified, they will be used if the user has a retina display. Retina sizes must have a matching non-retina size in order to work. To set a retina image, add a comma and a space after the first source in a data atribute ("image.jpg, image@2x.jpg").
Breakpoints are determined by the name of the data attribute. All of them must start with data-responsimg followed by the pixel value of the breakpoint (ex: data-responsimg960) or by a - plus the name of the breakpoint (ex: data-responsimg-smalltablet). You must define the breakpoints parameter if you want to use named breakpoints.
The src tag represents breakpoint zero (0px).
I recommend using the smallest size as the default image (the actual src attribute), or else search engines won't see your image.

<img src="default-image.png" class="responsive-image"
  data-responsimg-mobile="image-320.png, image-320@2x.png"
  data-responsimg480="image-480.png"
  data-responsimg-desktop="blue-car.png"
/>

In this example, the default image is default-image.png. This image is always loaded… make sure it's pretty small. You could always remove the src attribute completely if you really wanted to.

The image image-320.png is loaded and displayed if the window reaches a width of 320 pixels. If the screen used is retina, the image used will only be image-320@2x.png. If the window reaches 480 pixels wide, image-480.png will be loaded and displayed. Even if you have a retina display, this image will override the previous one. If the window reaches 960 pixels wide, blue-car.png will be loaded and displayed.

Important - Please keep in mind that if the elementQuery is set to true, the breakpoints won't be defined by the width of the window but instead by the width of the image itself.

More options

You've seen breakpoint naming, but more options are available like relying to image width instead of browser width, allowing downsizing and more. For the full list of options, visit the responsImg GitHub repository.