Best way to deliver images from Node.js app (using express)

Question

Best way to deliver images from Node.js app (using express)

We have set a public folder containing 50 small images of Portable Network Graphics format, basically icons of (45 x 45px) for a toolbar design.

Consider the following Node.js code used for setting public folder using express:

app.configure(function AppConfig() {
    app.set('port', 8080);
    app.use(express.bodyParser());
    app.use(express.errorHandler());
    app.use(express.cookieParser());

    app.use(express.static(app.root + '/app/public'));  // <== contains 50 icons in .png format

    app.engine('html', require('hbs').__express);
    app.set('views', app.root + '/views/html');
    app.set('view engine', 'html');
    });

Since first page is Sign-In page always, I want all the toolbar icon images to be cached on first page load itself at background, while user is entering Sign-In details.

While searching how to do it at background, I came across Image Sprite concept. But I require different solution to cache images which are not yet requested.

Could any one put some light on how to do this?

Update: I tried to use tag itself requesting for a single image (.png) which is Image Sprite of all 50 having Size: 0.76MB, now when I load Sign-In page it loads images and then user can see the UI. So the issue is I want it to show UI first and then load the images at background something like AJAX.

image
performance
node.js
express

Answer 1

You can pre-load your image sprite by inserting it at the most bottom of your Sign-in page & making it invisible. While the browser is parsing and rendering your Sign-in page, it will encounter your image sprite and load it but will not display it. Because it's at the end of the page, it will not interfere with the UI and your users will see the UI first.

<html>
<body>
...
  <div style="display:none">
     <img src="sprite.png"/>
  </div>
</body>
</html>

Or you can load it using JavaScript

$(function() { // when DOM is ready
    $(window).load(function() { // when the page is fully loaded including graphics
        $('body').append($('<div><img src="sprite.png"/></div>').hide());
    });
});

Also, don't forget to instruct express to tell the browser that the sprite can be cached:

app.use(express.compress()); // optional
app.use(express.static(app.root + '/app/public', { maxAge: 86400000 /* 1d */ }));

Answer 2

Server can only serve content which is requested by user. Caching is done by browser to reduce the file transfers (required by the page) and improve performance.

For caching to happen, browser must request the files at least once. Thereafter it checks if the files are updated or not. If file has changed on server the cache is discarded, else it uses the cache. If you want to cache all the images, simply include them in your login page. After that, every request for the files will hit the cache. To know that your file is being cached in node check the logs.

//First access
GET /stylesheets/style.css 200 1270ms
//Thereafter from cache
GET /stylesheets/style.css 304 6ms

Don't worry about caching, let the browser handle it.