Re: [whatwg] add html-attribute for responsive images
Am 08.02.2012 um 10:43 schrieb Bronislav Klučka: On 8.2.2012 10:18, David Goss wrote: On 8 February 2012 07:42, Anselm Hannemannans...@novolo.de wrote: I'd love to have *ability* (just for future use-cases which might come up and I already would have some for tablet-devices and smartphones) to add different media. e.g. we could offer a cropped image for smartphone users which has another context (maybe missing important parts of the img due to crop but it's better for smartphone usage and still has it's right to be there as an diff.image). Would love to hear what you all think about that? We're thinking along the same lines here. What I was getting as yesterday was that the differentsources shouldn't necessarily have to be *literally* the same image but resized. They could be derivatives of the image (your example of cropped is good). The rule I suggest is that you must be able to successfully describe all the images with the same alt text (which goes onpicture), so although the images are not visually identical they are semantically the same. The question is whether thesources can have optional alt attributes themselves so authors can more specifically describe that particular variant of the image. My hesitation only comes from wanting to keep it clean and simple, and from wanting to reinforce the requirement that the images be semantically the same. Okay but I don't see a problem to offer this as feature. The spec could say: Initially the alt-text of the picture element is applied to all derivates. You can set own (different) alt-attributes to a specific derivate if there's the need to do that. If not set, standard alt-attribute is applied. Same goes for other image attributes like title, etc. You don't have to set this (as you specify in parental picture-alement) but you are able to do. I think we shouldn't limit ourselves just to keep it simple. And of course it's the developer's choice to keep it simple. Hi, I think that while talking about responsive image, introducing element that would choose image based on media-query, we should explore more generic approach... any media media media=all video media=support: video source src=blabla.ogg type=video/ogg media=min-resolution: 300dpi / source src=blabla_small.ogg type=video/ogg media=max-resolution: 150dpi / source src=blabla.mp4 type=video/mp4 media=min-resolution: 300dpi / source src=blabla_small.mp4 type=video/mp4 media=max-resolution: 150dpi / /video picture src href=small.jpg alt=a headshot of Bob Flemmingmedia=min-width:320 / src href=medium.jpg alt=a head and shoulders shot of Bob Flemming media=min-width:480 / src href=large.jpg alt=a full body portrait of Bob Flemming media=min-width:640 / /picture img src=blabla.png alt=blabla / /media I can imagine e.g. car presentation using this approach, with preferences based on tree position of media content. BTW adding media attribute to video (video - source) element might be useful as well... type tells a lot, but not all regarding responsive media content Why do we actually need this new wrapper element? I don't see any reason for this. And what should support: media be? A new media query? Then this is up to CSS. And as far as I understood you correct you want the video to those who support video (btw which device wouldn't as it's only about the tag, not the feature itself?) and a fallback responsive image? If you have a bit more detailed valid approach where and why to use so, I think we can discuss further. But I think this would be a new topic.
Re: [whatwg] add html-attribute for responsive images
Okay, I talked with some disabled web developers and Accessibility experts today and talked about the proposal of markup in alt-text. This seems not to be a good idea as screenreader would read the tags which would confuse many users then. So we would get into trouble with that approach according to current screenreader features, etc. I think this should be postponed as it would need a whole rewrite to many (!) element-specs. We should now focus on the initial problem and let alt contents be plaintext for now. You might start a whole new discussion about this in a separate email but this would target all html-elements having alt-attributes. Am 08.02.2012 um 11:18 schrieb Kornel Lesiński: On 8 lut 2012, at 07:14, Anselm Hannemann ans...@novolo.de wrote: picture alt=alternative text src=default.jpg source href=large.jpg media=min-width:700px / img alt=alternative text src=default.jpg / /picture A new element may be an opportunity to get the alt right, i.e. in element's body, not flattened in an attribute. Is there a reason for this? I think this is more confusing than everything else. And, an alternative text shouldn't have markup. Alternative text should be all for accessibility. If my alternative text contains an abbreviation, shouldn't I be able to use abbr? If it's a comic strip, why should I be forbidden from marking up the dialog accurately? HTML already has in-element fallback for object and limited markup in button. picture src=large.jpg lowsrc=small.jpg !-- or source high-dpi-href= or such -- alternative emtext/em /picture as it's going to be very hard to write a media query that takes into account various screen sizes, DPI and bandwidth/metering at the same time. This is similar to my approach using the common img-tag. In that case we don't need a new element. But as you've said many people (also here) find it a bit hard to write. Imagine using 6 different image sizes in that case… True. I like your approach too. I think for bandwidth-saving having more than 2-3 versions (50, 100, 300 dpi) is an overkill, so length of attributes won't be a problem.
Re: [whatwg] add html-attribute for responsive images
Ashley, so you think about the img element attributes like I proposed? img src=myimage_xs.jpg media-xs=(min-device-width:320px and max-device-width:640px) media-src-xs=myimage_xs.jpg media-m=(min-device-width:640px and max-device-width:1024px) media-src-m=myimage_m.jpg media-xl=(min-device-width:1024px) media-src-xl=myimage_xsl.jpg (View as gist: https://gist.github.com/1158855) Or did I misunderstood you? -Anselm Am 07.02.2012 um 10:45 schrieb Ashley Sheridan: On Mon, 2012-02-06 at 23:15 +, Bjartur Thorlacius wrote: On Mon, 06 Feb 2012 21:23:37 -, Mathew Marquis m...@matmarquis.com wrote: I recently published a sum-up of our thinking at A List Apart ( http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/ )—in short, using the video markup pattern as the inspiration, with the use of media attributes on the source elements to determine the rendered source, and the inclusion of an img--ideally a smaller image, to account for the lowest-common-denominator--as a fallback similar to the way Flash or an image might be used as a video fallback. Why not use a media attribute of object? That way you should get media type disambiguation for free. The main problem I see with that is that the object tag doesn't have the same accessibility attributes, so you'd effectively lock out a lot of people using browsers that don't understand the context of the tag in this case. I think the better way is to add something to the img tag as you'd still have full backwards compatibility. -- Thanks, Ash http://www.ashleysheridan.co.uk
Re: [whatwg] add html-attribute for responsive images Mathew Marquis
Irakli, I think it is not about markup vs server-side-solution. Server-side is not a solution at all I think. But it's about wether it's markup based (which means we also could serve different content in images on different resolutions which would be a feature!) or file-based as responsive (progressively downloading) image-format in WebP or other formats. But even if WebP gets such a feature it takes time to implement this in format and in browsers which would be quite more complicated as we have the codec-problems again here. So I think we at least need a markup based solution. If we then will get a responsive file format some time it's great but we can't expect that now. --- For the element's name I think either image (seems to cause trouble in older browsers but not sure if we have to support them? Mean it should work well and standardized in future not now…) or picture would be fine. --- -Anselm Mathew, thanks for raising that point. I think we need to decide whether markup-based solution is a workaround forced on us because there was no good solution or whether it is a solution we should pursue, if implemented properly. And this brings us to a very technical discussion about RESTfulness of either approaches (server-side negotiation vs. markup-based descriptors). -- Pros of server-side negotiation: If you look at an image as a unique resource, then representing it with a unique URL and adjusting diff crops or resolutions of the image for device-targeting based on HTTP headers is very much like using unique resource URL and altering output format based on accept headers, which is the RESTful and recommended approach. I can see an argument that diff crops of the same image are not the same resource, but esp. in the context of targeting diff. devices, I think that's not true. If XML and JSON versions of a document are the same resource, then device-specific versions of an image should be as well. Good food for thought, however. Thanks, Irakli
Re: [whatwg] add html-attribute for responsive images
Am 06.09.2011 um 12:49 schrieb Karl Dubost: Ashley, Anselm, Le 6 sept. 2011 à 08:36, Ashley Sheridan a écrit : Yes, but the point is, the alternative images you may want to display for visitors on a smaller screen/resolution could be completely different from the original image (cropped shot not showing all the detail, etc). Yes already happening with background images with not text alt at all. So let's say it is progress. Le 6 sept. 2011 à 09:07, Anselm Hannemann - Novolo Designagentur a écrit : by the way, how should we work with your solution, Karl, and a CMS or CSS files from a static domain? Is no one building a dynamic site? could you clarify? How exactly can I create a dynamic CMS website today with responsive images? I could manage my CSS file with my CMS which most of them don't support. I could minify the CSS on the fly but in reality and from performance view it's recommended to serve a static css file from a cookieless domain (which is another than where my CMS is located). If I would use a CDN additionally how should I change images on the fly? And, a client wants to change an image in a WSIWYG editor not in a raw css file. We won't either as he can destroy the entire stylesheet. I hope you now understand better what I mean. -Anselm
Re: [whatwg] add html-attribute for responsive images
Am 06.09.2011 um 08:36 schrieb Ashley Sheridan: On Tue, 2011-09-06 at 07:15 +0200, Karl Dubost wrote: Le 5 sept. 2011 à 15:07, Anselm Hannemann - Novolo Designagentur a écrit : Why should we use inline-styles once again? Why should we load content images with CSS? What about accessibility? Where to add alt-attribute / title / ARIA etc.? Not exactly what is happening. There is a URI with an image without a javascript and/or CSS activated. The CSS changes the image dynamically depending on the user experience context controlled by mediaqueries. Yes, but the point is, the alternative images you may want to display for visitors on a smaller screen/resolution could be completely different from the original image (cropped shot not showing all the detail, etc). Ergo, you lose the accessibility because you now can't textually represent it in the alt tag. Right you hit the nail on the head. And, by the way, how should we work with your solution, Karl, and a CMS or CSS files from a static domain? Is no one building a dynamic site?
Re: [whatwg] add html-attribute for responsive images
Am 31.08.2011 um 23:32 schrieb Karl Dubost:
Anselm,
(setting reply-to on www-style)
Seen this today, to remind people that it is not just
something up in the air. People need it.
http://www.webmonkey.com/2011/08/speed-up-your-responsive-designs-with-adaptive-images/
I wonder if it could be handled by CSS in fact.
I guess Anselm, you could ask there.
On the www-style mailing-list, Charles proposed [1]
content: url(img.jpg) replaced;
I'm not sure I fully understand the proposal
but we can imagine something that could fit nicely
with the CSS Generated Content Module Level 3 [2]
img class=responsive src=http://example.org/foo; alt=wiizz/
and then the CSS
@media screen and (min-width:550px) and (max-width:960px) {
img.responsive {
url(http://example.org/foobis) replaced;}
}
@media screen and (min-width:240px) and (max-width:549px) {
img.responsive {
url(http://example.org/footer) replaced;}
}
[1]: http://www.w3.org/mid/4e5d4a46.7000...@jumis.com
[2]: http://dev.w3.org/csswg/css3-content/#replacedContent
--
Karl Dubost - http://dev.opera.com/
Developer Relations Tools, Opera Software
How would you do this with a CMS? How to do with dynamic content when serving
the CSS from a cookieless, static domain as it's best practice for performance.
From my point of view it can't work with just CSS. When you look to my proposed
gist-solution you can see in history that I've already dealt with several other
approaches.
Last is the only one that could really work that I know right now.
Re: [whatwg] add html-attribute for responsive images
Am 01.09.2011 um 01:46 schrieb Charles Pritchard: On 8/31/2011 2:32 PM, Karl Dubost wrote: Oh, that's not my proposal, that syntax was brought up by Tab Atkins. It's already available. I was looking into how to handle img [no source] style=background: url(..) / It may work with the following, now, or at some point in the future: img style=content: replaced; background-color: ...; / I'd proposed visibility: content-hidden; to be used with background and border. Why should we use inline-styles once again? Why should we load content images with CSS? What about accessibility? Where to add alt-attribute / title / ARIA etc.? -Anselm
[whatwg] add html-attribute for responsive images
Hi all, Paul Irish said I should mention my problems here. So I will: As we now have the possibility of creating fluid and responsive layouts in several ways we have a problem with images. There's currently no good feature to implement something like responsive images which adapt to the different device-resolutions. We only can implement one image with one resolution scaling-up and down. Of course the best solution would be to have a file format supporting this feature by offering diff. quality like .sid format does. But it's very unlikely to have such a feature in the next few years. So I thought of a simple html-attribute to work with media-queries and something like media-size-sources to provide different images fitting to the device-resolution. New browsers can read the new attributes but even old browsers degrade gracefully with the basic src attrobute. I shared the code in a gist here: https://gist.github.com/1158855 and will write it down here, too: !-- backwards compatible solution -- !-- the browser should read media-query and then download the right file for the actual screen size -- img src=http://cdn.url.com/img/myimage_xs.jpg; media-xs=(min-device-width:320px and max-device-width:640px) media-src-xs=http://cdn.url.com/img/myimage_xs.jpg; media-m=(min-device-width:640px and max-device-width:1024px) media-src-m=http://cdn.url.com/img/myimage_m.jpg; media-xl=(min-device-width:1024px) media-src-xl=http://cdn.url.com/img/myimage_xsl.jpg; / Tried several other ways, too, (you can see in versions) but this seems to be the best. What do you think about providing a way to use responsive media through media-queries? For now there are only some JS-Cookie solutions which are not a good approach and are very unflexible. kindest regards, -Anselm
