A lightweight responsive image library.
UXImage is yet another JavaScript library for doing wicked awesome responsive image stuff. It handles fun things like:
The library is intended to be as lightweight as possible and avoids imposing dependencies. You should be able to run it alongside any other frameworks or libraries without conflicts. However, as with other techniques out there, it requires you to adapt your markup.
Here’s a barebones example:
<div class="ux-image" data-src="test-small.jpg" width="960" height="540">Accessible text.</div>
Not that different from what you’re doing now, right? Now let’s get wild:
<div class="ux-image ondemand"
data-src="test-small.jpg"
data-src-medium="test-medium.jpg"
data-src-high="test-high.jpg"
data-breakpoint="480"
data-breakpoint-high="960"
width="960" height="540">Accessible text.</div>
Better call Kenny Loggins, because we just entered the danger zone. This is an advanced example of a UXImage. It’s a DIV with some HTML5 data attributes assigned that help customize the rendering behavior. You can put whatever you’d like inside it - accessibility text, noscript fallbacks, overlays, whatever your heart desires.
The ux-image
class defines this DIV as a UXImage element. Duh.
The ondemand
class tells the library to treat this as a “lazy loading” image. These images aren’t loaded until the browser scrolls near the image to reduce bandwidth usage and memory consumption. After the browser scrolls a fair distance past the image, it is unloaded to (again) save on memory and page rendering performance. This is awesome for mobile devices, but all users can benefit from the technique.
Important - You’ll want to make sure your HTTP server is assigning appropriate caching headers to your assets. Lazy loading can involve a lot of images being loaded in and out of memory, so you want to be sure that visitors are only hitting your servers once for those files. That’s on you, cowboy.
Other libraries only consider the device screen resolution for their breakpoints. “Small screen? Show this. Large? Show that.” They’re just emulating CSS media queries.
UXImage is truly responsive in that it’s breakpoint system is based upon the width of the parent container. As your responsive layout grows and shrinks and changes, for whatever the reason might be, UXImage can dynamically change the images it’s displaying to take advantage of the available space, and reduce memory usage intelligently.
<noscript>
tags. Browsers won’t load those images unless they have support disabled.var demo = new UXImage();
demo.speedTest();
(It’s optional, but it’s a good idea.)demo.Parse();
@1x is dead. 92.8% of all mobile screens are @1.5x or higher. This library follows a strategy put forth by Thomas Fuch’s “Retinafy” book Simply: You should treat all displays as if they are HiDPI, because most will be. Serve up images at roughly twice the resolution you intend them to be viewed at, but apply high levels of compression to those images. Browsers automatically resample and anti-alias images as they’re scaled and compression artifacts disappear in the process. The images will look just as good as uncompressed copies and you’ll shave 50% or more off your downloaded file sizes. That’s a lot of bandwidth savings, and a huge win for users — especially those on mobile. All of the demos provided use this approach so you can try it for yourself.
You can pass a DOM element to the UXImage.Parse() function to only parse for UXImage elements within that container. After writing your markup to the DOM, just fire that off.
UXImage is designed to be framework agnostic, but will fit in just fine with whatever tools you’re most comfortable using. For example:
$("article .photo-container").each(function() {
UXImage.Parse($(this)[0]);
}));
UXImage uses a shim to support modularization APIs, and should work with any library that supports the format. It’s known to work with RequireJS and Almond.
You can safely merge it using tools like r.js or Grunt.
My goal is to keep UXImage as lightweight and agile as possible, but I am open to ideas. Open a GitHub issue and we’ll talk it out.