Implement a good responsive image solution

[nwalton3]

Picturefill, foresight.js, or adaptive images.

[nwalton3]

I read this article awhile back, and ran across it again today. What do you think about progressive JPGs? Does it get us where we want to be in terms of responsive images? Sure, browsers eventually download the whole thing, but they don't have to download BOTH the low-res and the hi-res, as with some solutions. And it's a super-easy solution to implement-- just re-save your images. Probably worth considering.

http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

[cuteapoot]

Sounds like a great solution for anyone who doesn't want to implement anything too complicated. Personally, I'm in favor of presenting all of these four options to people who use our templates and allow them to choose for themselves which one to implement. The situation is going to be different for each department, so it doesn't make sense to try to pick just one.

[nwalton3]

Good point. We should make sure there's a good run-down in the wiki and a reference to it in the readme before we close this issue.

[hbharker]

I haven't thought about progressive jpegs since the '90s when people were connecting to the web through 56K modems, but this article prompted me to do a little experiment. The BYU Home Page renders so quickly on campus that I can't see any delay on the bottom two-thirds of the page. Only occasionally the feature photo takes a little time to appear. So I changed all the feature photos on home-dev.byu.edu to progressive in Photoshop. When you choose the "progressive" check mark, the "optimized" check mark goes away. Then I cleared the cache on a laptop using a wireless connection and compared home-dev.byu.edu with home.byu.edu. The progressive images actually loaded faster, and I didn't see any of the progressive action. In other words, they appeared to be fairly high-res images right off the bat.

[hbharker]

The question is does it look good when constrained to various sizes? I did a little test there too, and really couldn't tell the difference between progressive and non-progressive: http://unicomm.byu.edu/home/test.html

[cuteapoot]

I guess the question is whether these images will load quickly enough and whether they'll eat up data plans. With that in mind, I'm thinking foresight.js would be the best option, since it tests bandwidth instead of just width. How much would having smaller images save on loading times and data usage over all?

[hbharker]

Yes, foresight.js may be useful. I have been concerned about having to create more than one image by hand, but my thinking has been old fashioned, as this article makes clear: http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/ BTW, there's a Firesight Images module for Drupal. You probably knew that.

[wjmerrill]

I found this spreadsheet that compares the different solutions. I think foresight.js does look pretty good. I don't know how helpful this will be but I thought it might be.

https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc

[cuteapoot]

Looking at foresight.js again, it looks like it's meant more for retina display vs. traditional display. It doesn't appear to offer higher resolution images for desktops, only for mobile devices with high-res and good bandwidth. I could be wrong on that, but that's what it looks like.

[nwalton3]

For the templates, I've done a custom solution for the slider that gives you the option of not loading some of the slider images at pageload. They get downloaded via script as needed. I think that's probably the extent that we need to do this for the templates.

I think we should look at the options for the home page when we get to that.

[nwalton3]

Since we're looking at this for the home page specifically, and not for the templates right now, I'm going to label it for later and close it.