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.

Sign up for GitHub

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/optional-images.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
89 changes: 71 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
Use Cases and Requirements for Standardizing Responsive Images
</title>
<style>
.stretchy{width: 100%;}
.stretchy{width: 100%;}
@media all and (max-width: 960px){
html{
margin-left: -2.5em;
Expand All @@ -23,11 +23,11 @@
}
}
</style>
<script src='http://www.w3.org/Tools/respec/respec-w3c-common' async=""
class='remove'>
</script>
<script src='http://www.w3.org/Tools/respec/respec-w3c-common' async class=
'remove'>
</script>
<script class='remove'>
var respecConfig = {
var respecConfig = {
Copy link
Contributor

Choose a reason for hiding this comment

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

Whoa? What version of tidy are you using? Please use this one: https://github.com/htacg/tidy-html5

//additionalCopyrightHolders: "Copyright © the Contributors to this Specification, published by the <a href='http://www.w3.org/community/respimg/'>Responsive Images Community Group</a> under the <a href= 'https://www.w3.org/community/about/agreements/cla/'>W3C Community Contributor License Agreement (CLA)</a>. A human-readable <a href= 'http://www.w3.org/community/about/agreements/cla-deed/'>summary</a> is available.",

//license: "cc-by",
Expand Down Expand Up @@ -218,10 +218,10 @@ <h3>
</h3>
<p>
To date, three such specifications are currently under development,
described below, one more has been abandoned. The three proposed, active solutions are not mutually
exclusive: together they address the set of <cite><a href=
"http://usecases.responsiveimages.org">Use Cases and Requirements for
Responsive Images</a></cite>.
described below, one more has been abandoned. The three proposed,
active solutions are not mutually exclusive: together they address
the set of <cite><a href="http://usecases.responsiveimages.org">Use
Cases and Requirements for Responsive Images</a></cite>.
</p>
<dl>
<dt>
Expand Down Expand Up @@ -271,11 +271,14 @@ <h3>
</p>
</dd>
</dl>
<h3>Abandoned Proposed Solutions:</h3>
<h3>
Abandoned Proposed Solutions:
</h3>
<dl>
<dt>
<cite><a href=
"http://tabatkins.github.io/specs/respimg/Overview.html">The `src-N` approach</a></cite>
"http://tabatkins.github.io/specs/respimg/Overview.html">The
`src-N` approach</a></cite>
</dt>
<dd>
<p>
Expand Down Expand Up @@ -534,13 +537,13 @@ <h3>
<figure>
<video controls="" poster="videos/screenrmx1.jpg" class="stretchy"
style="max-width: 652px" onclick=
"if(/Android/.test(navigator.userAgent))this.play();">
<source src="videos/screenrmx1.m4v" type="video/mp4">
<source src="videos/screenrmx1.webm" type="video/webm">
<source src="videos/screenrmx1.ogv" type="video/ogg">
<source src="videos/screenrmx1.mp4"><object type=
"application/x-shockwave-flash" data="videos/flashfox.swf" width=
"652" height="389" style="position:relative;">
"if(/Android/.test(navigator.userAgent))this.play();"><source src=
"videos/screenrmx1.m4v" type="video/mp4"> <source src=
"videos/screenrmx1.webm" type="video/webm"> <source src=
"videos/screenrmx1.ogv" type="video/ogg"> <source src=
"videos/screenrmx1.mp4"><object type="application/x-shockwave-flash"
data="videos/flashfox.swf" width="652" height="389" style=
"position:relative;">
<param name="movie" value="videos/flashfox.swf">
<param name="allowFullScreen" value="true">
<param name="flashVars" value=
Expand Down Expand Up @@ -785,6 +788,51 @@ <h3>
"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?

<h3>
“Nice to have” images
</h3>
<p>
Images are often content, but there are instances when an image is an
enhancement to the document, but not a necessary part of the core
content (a.k.a. “nice to have“). As such, Authors may choose to load
Copy link
Contributor

Choose a reason for hiding this comment

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

Lowercase Authors ... should probably read be "developers".

Copy link
Contributor

Choose a reason for hiding this comment

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

Closing quotation mark is backwards. Should be ” not “

an image only above a certain breakpoint in order to
optimize the readbility of the core content at certain sizes by
reducing the visual clutter. This is a similar use case to <a href="#art-direction">Art direction</a>, but distinct enough to warrant separation.
Copy link
Contributor

Choose a reason for hiding this comment

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

I like the intent here, but I don't like that this talks about breakpoints. What is needs to talk about is that images that are not in view or important don't need to be loaded. This is really about lazy-loading images.

Copy link
Contributor

Choose a reason for hiding this comment

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

I was under the impression that this was about breakpoints, as Aaron has written — that at some breakpoints we may want to hide an image entirely.

Copy link

Choose a reason for hiding this comment

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

+1 to this being breakpoint-centric.

Here's yoav saying “it's art direction” at the meeting:
http://ircbot.responsiveimages.org/bot/log/respimg/2015-03-05#T117007

And in #56 Yoav specifically uses the word “breakpoints”.

This use case is about authors art-directing down to no image at all, and art direction means breakpoints.

Copy link
Contributor

Choose a reason for hiding this comment

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

To me, that seems extremely fragile. It would be super easy to screw up the breakpoints because developers making assumptions about what is "below the fold" or "outside the view", when on different screen sizes it might not apply.

I'm probably missing something, so will let @yoavweiss chime in and tell me how wrong I am :)

Copy link
Member

Choose a reason for hiding this comment

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

It's not about lazy-loading, but about breakpoints. (the name "nice to have" might be confusing).

The use-case is about having some images "disappear" at certain breakpoints without introducing an extra overhead on the network (like a simple "display: none" would do). Basically, what Aaron wants is a way to define that for a certain breakpoint the image will not load at all. That is a form of art-direction.

Copy link
Contributor

Choose a reason for hiding this comment

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

On March 17, 2015 at 7:48:36 PM, Yoav Weiss ([email protected]) wrote:

It's not about lazy-loading, but about breakpoints. (the name
"nice to have" might be confusing).

The use-case is about having some images "disappear" at certain
breakpoints without introducing an extra overhead on the network
(like a simple "display: none" would do). Basically, what Aaron
wants is a way to define that for a certain breakpoint the image
will not load at all. That is a form of art-direction.

Ok, thanks for the clarification. 

</p>
<p>
Consider the following example:
</p>
<figure>
<img class="stretchy" style=
"max-width:754px" src="images/optional-images.png" alt=
"Two displays of the same content, a wider one with an image, a narrower one without.">
<figcaption>
<p>
Two versions of the same teaser content. The image is "nice to
have" but not required. That said, it is content, not design.
</p>
</figcaption>
</figure>
<p>
In situations like this, it would be nice to have a declarative way
of marking up this supplementary content and retricting its download
and presentation to scenarios where it would be useful. This content
does not belong in CSS as it is not presentational.
</p>
<p>
Currently, many sites with this need are using <code>display:
none</code> to hide supplementary content images from view when the
viewport is below a particular size. This approach penalizes the user
by downloading images that may never be shown. Other sites are
relying on JavaScript to take instruction from the markup (usually in
the form of <a href=
"http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#attr-data">
<code>data-*</code>code&gt; attributes</a>) and load images in
specified scenarios. When JavaScript fails, this functionality is
lost.
</p>
</section>
</section>
<section>
<h2>
Expand Down Expand Up @@ -887,6 +935,11 @@ <h2>
techniques</a> are providing.
</p>
</li>
<li>
<p>
The <a>solution</a> SHOULD allow developers to specify that no image be downloaded or shown at specified (or implied) breakpoints.
Copy link
Contributor

Choose a reason for hiding this comment

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

Again, I would remove "breakpoints". Authors should say which images are not critical. Cancelling load at certain times might actually hurt performance, so this is best left to browsers (because they can turn on/off radio at the right time).

</p>
</li>
</ol>
</section>
<section class="appendix">
Expand Down