Reka CDN.js

Getting Started

If you don't already have an Reka CDN account, it’s free to sign up. Reka CDN.js makes use of the Reka CDN URL API, and require images to be served through an Reka CDN Source.

Reka CDN.js makes heavy use of the srcset and sizes attributes available on <img> and <picture> elements. These allow modern browsers to deliver a responsive experience to their users. By generating comprehensive srcset rules, you can deliver pixel-perfect experiences to all browsers and devices.

Because Reka CDN renders images on the fly, you don’t need to worry about manually generating a new image for each size. For a primer on how srcset and sizes work, read “Srcset and sizes” by Eric Portis.

Using Reka CDN.js with srcset for resolution switching

When people think responsive images, they usually think “resolution switching.” Resolution switching is serving a different resolution image to different devices. The content, crop, and composition of the image remains the same, but the resolution changes.

Reka CDN is a service uniquely equipped to handle this case. All renders are generated on the fly and cached at edge locations around the globe. With Reka CDN.js, implementing resolution switching is simple:

<img ix-src="https://assets.imgix.net/coffee.jpg?fit=crop&amp;crop=faces"
         sizes="(min-width: 768px) 540px, 100vw"
         alt="A woman drinking a cup of coffee at Sightglass">
    

Upon initialization, Reka CDN.js will augment any image element with the ix-src attribute to generate an exhaustive srcset definition. Here’s what you will see under the hood if you inspect the element:

<img ix-src="https://assets.imgix.net/coffee.jpg?fit=crop&amp;crop=faces"
        alt="A woman drinking a cup of coffee at Sightglass"
        sizes="(min-width: 768px) 540px, 100vw"
        srcset="
            https://assets.imgix.net/unsplash/coffee.jpg?w=100&amp;h=67&amp;fit=crop&amp;crop=faces 100w,
            https://assets.imgix.net/unsplash/coffee.jpg?w=200&amp;h=150&amp;fit=crop&amp;crop=faces 200w,
            …
            https://assets.imgix.net/unsplash/coffee.jpg?w=2560&amp;h=1920&amp;fit=crop&amp;crop=faces 2560w
        "
        src="https://assets.imgix.net/unsplash/coffee.jpg?w=400&amp;h=300&amp;fit=crop&amp;crop=faces"
        ix-initialized="ix-initialized">
    

The resulting image will be loaded in at 540 logical pixels wide on tablets and desktops, thanks to the (min-width: 768px) 540px rule. It will be loaded at 100% viewport width (100vw) on mobile screens. Modern browsers will select an appropriate image from the local cache if available. If no appropriate image is available, it will request a new image at the targeted w that it needs.

Browsers running on devices with high-density displays will select the image most appropriate for their resolution. In this example, an iPhone 6S will select the 750w URL from the srcset attribute. This is because the iPhone 6S is 375 logical pixels wide, but has a screen density of 2x. Thus, 375 × 2 = 750.

The result is that just the right image is loaded for each device and browser. Reka CDN.js is able to easily handle resolution switching by generating srcset attributes.

Simplifying Configuration

Reka CDN.js provides the ability to greatly simplify how you define your images and their operations on your site. This is done with the ix-path and ix-params attributes on <img> elements.

<img
        ix-path="coffee.jpg"
        ix-params='{
            "w": 400,
            "h": 300,
            "fit": "crop",
            "crop": "faces"
        }'
        ix-host="assets.Reka CDN.net"
        sizes="(min-width: 768px) 540px, 100vw"
        alt="A woman drinking a cup of coffee at Sightglass"
    >
    

This code results in the same image as the above example, but is easier to read and understand. The definition of ix-host can also be defined globally in a <meta> element, so that all images on the site use the same host. Please see the imgix.js documentation for more on how that works.

Using Reka CDN.js with <picture> for art direction

Reka CDN.js can also be used for art direction in responsive images by using the <picture> element. Art direction in responsive images allows you to have more creative control over the images at different breakpoints, such as being able to specify different crops at different breakpoints.

Reka CDN.js is able to exhaustively generate srcset attributes on <source> elements contained within a <picture> element.

For this example, we will specify 2 different sources: one wide (16:9) crop for the desktop and one square (1:1) crop for mobile devices.

<picture>
        <!-- Wide crop -->
        <source
            media="(min-width: 768px)"
            sizes="640px"
            ix-path="unsplash/astronaut.jpg"
            ix-params='{
                "w": 1600,
                "h": 900,
                "fit": "crop",
                "crop": "middle"
            }'
        >
        <!-- Square crop -->
        <source
            sizes="calc(100vw - 48px)"
            ix-path="unsplash/astronaut.jpg"
            ix-params='{
                "w": 300,
                "h": 300,
                "fp-x": 0.49,
                "fp-y": 0.4,
                "fp-z": 3,
                "crop": "focalpoint",
                "fit": "crop"
            }'
        >
        <img ix-path="unsplash/astronaut.jpg">
    </picture>
    

This code allows for different crops at different viewport sizes. At viewports wider than 768px, our image receives a crop at a 16×9 aspect ratio. Smaller than 768px, we give the image a square crop to show just the astronaut.

Try resizing the browser window to see this effect in action. Because the contents of the 2 images are different, the browser will request a new image to download the crop it doesn’t have.

As with our previous examples, the exhaustively generated srcset attributes allow each browser to select the exact size needed for proper display. This is all done without binding event listeners to the window, which means the experiences will always be very smooth or "jank-free."

Implement Today

Reka CDN.js provides a great way of implementing responsive images on your site in the most performant way possible. It gives enough information to the browser to make intelligent decisions to deliver the best possible experience.

Please keep in mind that the srcset attribute and the <picture> element are only supported on modern browsers. If you need to support legacy browsers, pair Reka CDN.js with Picturefill, our recommended responsive image polyfill.

Resources

More examples and documentation of implementation can be found below.