Sometimes (read a lot of times) we have to put carousels on our sites. And even though we’ve shown numbers that they’re not effective, we end up adding them anyway. So in an ongoing effort to find ways to reduce the impact on performance, we look for simple to implement ways to cut down on the number of images loaded. I was recently working on a client site where they needed the ability to easily update the images in the carousel. That means inline images. They also wanted six of them. And since the design called for a full-width carousel, this meant large images. More precisely, 436.2 KB worth of images. On ND.edu we use background images and media queries to serve up smaller images, and defer loading using classes. Can’t do that this time. But what we can do is comment out the images in the template.
In the end, we’re still loading full-size images on mobile, so there’s definite room for improvement, but this method, in this case, does cut the site’s size in half.
The code is below. It’s been tested in IE 8 & 9, Firefox, Chrome and Safari. It’s published as a gist, so feel free to fork it and improve where you see fit.