Reducing Downloaded Images with Flexslider

A jQuery-based method for avoiding downloading carousel images until they’re requested:

I’ve implemented something like this before, and would recommend making it fetch the “next” and “previous” images instead of the one actually being requested, to make sure the image is available when it slides onto stage, but an interesting method (using HTML Comments, rather than simply hiding via CSS, which doesn’t work the same everywhere).


Magnific Popup, A Truly Responsive Lightbox

A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. For this reason, I created Magnific Popup, an open-source lightbox plugin focused on performance.

Shame they didn’t incorporate touch swipe events…

Save Bandwidth with webP

We’re not there yet, but hopefully soon!

Basically, the image format, webP, has a far-better compression rate than any other existing image format, but it isn’t widely supported yet. There is also a new CSS background-image spec coming that allows developers to do something like this:
background-image: image("whatever.webp" format('webp'), "whatever.jpg");
* Note the use of image not url.

Again, not ready yet, but coming. Cool.

Progressive JPGs: A New Best Practice

Making a case for using progressive JPGs rather than baseline (normal) JPGs:

The results are that, for images smaller than 10k, progressive might be slightly larger, but not enough to consider a problem; for images larger than 10k, progressive images can be significantly smaller (and so faster to download), and seem faster, because they start showing something while they’re downloading…