Conditional high-res image serving with LineRate

There is a vast array of screen sizes, resolutions and pixel densities out there. As someone who is serving content to users, how do you ensure that you're serving the best quality images to screens where it actually makes a difference?

The problem: If you're serving standard resolution images to high pixel density screens (such as Apple Retina, iPhones, Samsung Galaxy and myriad other devices), user experience may suffer. If you're serving higher resolution images to lower quality screens, you're chewing up unnecessary bandwidth and increasing page load times to users who won't benefit. So you've decided you want to give your users the best user experience you can when it comes to images, how do you go about it?

One solution is to maintain multiple copies of the image at various qualities and to conditionally serve the right quality depending on the client.

The basic premise of the solution documented here is to use a cookie to signal the client's device pixel ratio to the server. Once we know the device pixel ratio, we can decide which version of an image to serve. The device pixel ratio isn't something that is normally sent from client to server, so we have to give it a little nudge. There are a couple of ways to accomplish this - this article details two methods well.

If you're already using javascript, I'd recommend using the javascript method. If you're not, or you just want to avoid javascript for whatever reason, go with the CSS method. Either way, we'll assume that you've implemented this and that the cookie is named "device-pixel-ratio" and that the value is an integer.

This script below will check if the request is for an image (ex.

image1.png

). If it is, it will also check for the presence and value of the

device-pixel-ratio

cookie. If the value is greater than 1, the request will be re-written to request the high res image (ex.

image1.png@2x

).

Here's the script:

'use strict';

var vsm = require('lrs/virtualServerModule');
var url = require('url');
var cookie = require('cookie');

// append this to image names for highres
var suffix = '@2x';

// image types to check for highres
var ext = [
    '.jpg',
    '.jpeg',
    '.gif',
    '.png',
    '.webp'
];

var request_callback = function (vs_object) {
    console.log('pixel_ratio script installed on Virtual Server: ' +
                 vs_object.id);

    vs_object.on('request', function (servReq, servResp, cliReq) {

        // check header for device-pixel-ratio
        if ('Cookie' in servReq.headers) {
            var cookies = cookie.parse(servReq.headers.Cookie);
            console.log(cookies);
            if ('device-pixel-ratio' in cookies &&
                cookies['device-pixel-ratio'] > 1) {

                var u = url.parse(servReq.url);

                for (var i = 0; i < ext.length; i++) {
                    if (u.pathname.slice(-ext[i].length) === ext[i]) {
                        servReq.bindHeaders(cliReq);
                        servReq.url = u.pathname + suffix + (u.search || '');
                        break;
                    }
                };

            }
        }

        cliReq();

    });
};

vsm.on('exist', 'vs_http', request_callback);