This repository holds What Cheer's spin on the JavaScript solution to the responsive images problem.
Our JavaScript follows the existing pattern of storing the sizes in DOM attributes, similar to projects like HiSRC, but with the twist of having only two attributes.
We have used this code in production but it is still a little wobbly, so YMMV.
This is a full client side/markup solution, so you'd better be able to edit all your HTML. If you can't, or need something a little more automatic, perhaps Adaptive Images.
This library has no dependencies, so you can just drop in responsive-images.min.js and then call WhatCheer.Responsive.updateImages whenever you need to. Here's an example:
<script src="responsive-images.min.js"></script>
<script>
window.onresize = WhatCheer.Responsive.updateImages;
document.body.onload = WhatCheer.Responsive.updateImages;
</script>You may find it better to de-bounce your window.onresize calls a bit. The code to prevent multiple requests for image assets does not exist, so it's your responsibility, if you care.
<script>
( function () {
WhatCheer.Responsive.updateImages();
var resizeDebounce = null;
window.onresize = function () {
window.clearTimeout( resizeDebounce );
resizeDebounce = window.setTimeout( WhatCheer.Responsive.updateImages, 150 );
};
} );
</script>Your HTML communicates to the script through two attributes, data-format and data-breaks.
This attribute communicates the format of the path for image versions. We assume you keep all of your files together in one place and have a reasonable, consistent naming scheme.
In the path format string any instances of the string {{s}} will be replaced with the breakpoint name to create the final path for a file.
<img data-format="images/{{s}}.png" />This attribute specifies the width-based breakpoints for images. These breakpoints are given in pixel values, with a semicolon ; delimeter. They should proceed from largest to smallest.
<img data-breaks="900;600;400" />Optionally these breakpoints can have name strings, which are separated from the size value by a colon :.
<img data-breaks="900;600:medium;400" /><!doctype html>
<html>
<head>
<title>Responsive Images</title>
</head>
<body>
<img src="images/400.jpg" data-format="images/{s}.jpg" data-breaks="900;600:medium;400" />
<script src="responsive-images.min.js"></script>
<script>
window.onresize = WhatCheer.Responsive.updateImages;
document.body.onload = WhatCheer.Responsive.updateImages;
</script>
</body>
</html><!doctype html>
<html>
<head>
<title>Responsive Images</title>
</head>
<body>
<img src="images/400.jpg" data-format="{s}" data-breaks="900:http://google.com/secret-files/900.jpg;600:http://loljk.s3.aws.com/medium.jpg;400:images/400.jpg" />
<script src="responsive-images.min.js"></script>
<script>
window.onresize = WhatCheer.Responsive.updateImages;
document.body.onload = WhatCheer.Responsive.updateImages;
</script>
</body>
</html>We aren't perfect. If you see a bug, please let us know via the issues tab!