Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

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

wants to merge 1 commit into from

Conversation

aarongustafson
Copy link
Member

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

Note: Some of these changes were from Tidy.

@aarongustafson
Copy link
Member Author

Addresses issue #56.

@@ -785,6 +788,51 @@
"site preferences".
</p>
</section>
<section>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@marcoscaceres
Copy link
Contributor

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
Copy link
Contributor

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

@marcoscaceres marcoscaceres changed the title "Nice to have" image use case "Nice to have" image use case (closes #56) Mar 17, 2015
@zcorpan
Copy link

zcorpan commented Mar 30, 2015

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

@aarongustafson
Copy link
Member Author

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
Copy link
Member Author

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

@zcorpan
Copy link

zcorpan commented Apr 2, 2015

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
Copy link
Member Author

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
Copy link

zcorpan commented Apr 13, 2015

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
Copy link
Member Author

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
Copy link
Member Author

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

@zcorpan
Copy link

zcorpan commented Apr 19, 2015

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
Copy link
Member Author

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).

screen shot 2015-04-21 at 2 14 01 pm
screen shot 2015-04-21 at 2 13 38 pm

@zcorpan
Copy link

zcorpan commented Apr 21, 2015

to effectively lazy load images

Again, this use case is not about lazy loading.

@aarongustafson
Copy link
Member Author

@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
Copy link

zcorpan commented Apr 21, 2015

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

@aarongustafson
Copy link
Member Author

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

@robsonsobral
Copy link

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
Copy link
Member Author

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
Copy link

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
Copy link

COLABORATI commented Apr 21, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants