"Nice to have" image use case (closes #56)

[aarongustafson]

Initial pass on new Use Case per March 5th meeting.

Note: Some of these changes were from Tidy.

[aarongustafson]

Addresses issue #56.

[marcoscaceres]

Is it possible to only send the stuff below in the PR?

[marcoscaceres]

This is looking good, but I have concerns about framing this in terms of "breakpoints".

@igrigorik, can you also take a look at this PR? Would like your feedback, particularly about the effect something like this would have on the radio of a mobile device.

[marcoscaceres]

@aarongustafson if Tidy gives you more grief, don't worry. We can manually fix that after.

[zcorpan]

Do we have concrete real-world examples of this use case? URLs?

[aarongustafson]

Here are some existing uses:

http://bicentennial.nichols.edu/memories/ (thumbnails)
http://www.theverge.com/ (background images)

I would argue it could be used in these places as well:

http://www.nytimes.com/ (thumbnails)
http://www.hulu.com/ (multiple places, but certainly "trending now")
http://www.microsoft.com/en-us/default.aspx ("For Home" and "For Work")

On Mon, Mar 30, 2015 at 3:29 AM, Simon Pieters notifications@github.com
wrote:

Do we have concrete real-world examples of this use case? URLs?

—
Reply to this email directly or view it on GitHub
#57 (comment)
.

[aarongustafson]

How are we feeling on this overall? I’ve been waiting for feedback to come in before I make any changes.

[zcorpan]

Thanks @aarongustafson !

http://bicentennial.nichols.edu/memories/ (thumbnails)

These are all identical images, duplicating the site logo. If you turn off CSS, it would be no information loss to remove the images. It seems it could be implemented with CSS list-style-image or background-image and @media.

http://www.theverge.com/ (background images)

These don't switch to no background image, do they? I don't see why these would not just be CSS background-image.

http://www.nytimes.com/ (thumbnails)

OK, I suppose it could be reasonable here (although their site doesn't appear to be responsive). But it also seems OK to me to keep the thumbnails even for small viewports.

http://www.hulu.com/ (multiple places, but certainly "trending now")

I'm not convinced it's good to hide thumbnails here.

http://www.microsoft.com/en-us/default.aspx ("For Home" and "For Work")

This page is responsive but they don't hide the images. It's not clear to me they'd want to do so.

[aarongustafson]

On Nichols, they just have not added specific images but the CMS supports it. What you see is the default, but each can be custom (sorry, should have made that clear).

On the Verge, there is no background image without JavaScript (lazy load).

For the NY Times, maybe under HTTP2, but under HTTP1 I would argue that’s a lot of requests.

On Hulu it might be debatable, but that’s why I picked only a specific section. Others make sense to always have the images which is why "trending now" might be a useful place to not have to load images (in order to speed up the loading of the other, more valuable image loads).

On Microsoft, I would argue that the "For Home" and "For Work" images are content, but nice to have content. They don’t add much (like @Wilto’s salad tweet). If I were building this page, I would consider them a lazy-loading candidate but I don’t think they make sense to exist in CSS.

[zcorpan]

OK. @yoavweiss said earlier "It's not about lazy-loading, but about breakpoints."

So if we ignore lazy-loading, it's really just the Nichols site, assuming it would be using custom images for each post. Right?

[aarongustafson]

Yes, the others were potential opportunities where the breakpoint-based
loading could be used. Let me do a little digging and I can get some more
examples for you.

On Mon, Apr 13, 2015 at 4:05 AM, Simon Pieters notifications@github.com
wrote:

OK. @yoavweiss https://github.com/yoavweiss said earlier "It's not
about lazy-loading, but about breakpoints."

So if we ignore lazy-loading, it's really just the Nichols site, assuming
it would be using custom images for each post. Right?

—
Reply to this email directly or view it on GitHub
#57 (comment)
.

[aarongustafson]

Gathering more implementations still, but I wanted to flag two JS implementations that enable this for posterity:

• http://responsejs.com/
• An example in Tim Kadlec’s Implementing Responsive Design

[zcorpan]

Here's an example:

https://www.mozilla.org/sv-SE/firefox/new/ (preview the application -- different images for different platforms, as it happens -- and use no image for narrow viewports)

[aarongustafson]

The Guardian does this as well. They use a transparent GIF and then dynamically change data-srcset to srcset using JavaScript to effectively lazy load images. In addition to standard lazy loading, they are optionally loading images in the "Across the Country" and "Around the World" sections (see attached).

[zcorpan]

to effectively lazy load images

Again, this use case is not about lazy loading.

[aarongustafson]

@zcorpan I get that. They are doing two things on that page that I wanted to clarify. One happened to be lazy loading, the other was art directing to have no images at certain breakpoints (which is not all that dissimilar from lazy loading on a large screen in this implementation).

[zcorpan]

Oops, I'm sorry, I was too quick and didn't pay enough attention. Yes, thanks!

[aarongustafson]

So where are we at on this? Do I just need to go back and revert the changes Tidy made?

[robsonsobral]

I don't know, but... Despite it is an art direction case, it's looks like a situation where there isn't a default image. An image which is "nice to have", not "must to have".

So, maybe <img alt="" />.

[aarongustafson]

In terms of implementation, I would tend to agree. One problem though:
older browsers will display a broken image. I have tried doing something
similar with srcset and sizes (before we decided it was an art direction
use case): http://codepen.io/aarongustafson/full/azqWMZ/

On Mon, Jun 15, 2015 at 8:18 PM, Robson Sobral notifications@github.com
wrote:

I don't know, but... Despite it is an art direction case, it's looks like
a situation where there isn't a default image. An image is "nice to have",
not "must to have".

So, maybe .

—
Reply to this email directly or view it on GitHub
#57 (comment)
.

[robsonsobral]

We can't just forget that elements have default styles. The use for something like img:not([src]){display: none;} or img {display: none;} img[src]{display: inline-block;} or like you did is completely new.

---

I tested your code on IE6 and IE8 and it worked fine. No image.

---

Can't the currentSrc be used on CSS? I've no idea about it.

---

I think to have a "nice to have" image is a matter of art direction. But to not have one is a matter of content, because there's no art. An "optional" image is more like an "accessory content".

---

Now, trying to think like @yoavweiss.

Inside the picture, aren't all elements about art direction? In this case, img isn't only a fallback, but another way to show the same content. I can have some gaps between break points where the img provides the src. Let's say, the image on mobile portrait is loaded by the img and 100% wide. On mobile landscape it is larger, but on tablet portrait it returns to the mobile portrait size, because the same size can float.

Am I too wrong?

[COLABORATI]

It is not clear for me how this discussion ended and I can not find any hints in the docs about how to NOT load images on e.g. smaller screens. This is a very common use case, did this really find no way into the specs?

Ooops, wrong issue - this should have gone to ResponsiveImagesCG/picture-element#243