I recently started to read about responsive web design, and quickly hit the image problem. This can be summarized as "How to deliver the correct images for a given device?"
I suggest this approach, although they say that attempts at changing
the processing of
<img /> tags was shot down by vendors (why? please
Use a new meta tag for images or other media in the same way than "base", only with different values for different types. Eg:
<meta type="base-img" condition="CSS3 media selector statement" url="some url" /> <meta type="base-video" condition="CSS3 media selector statement" url="some url" />
That should mean: Load images from a different base URL than
ordinary stuff if their src is relative, and videos from
another URL. Expand this scheme to cover all interesting things
<video />, ...).
In effect, this should construct a tree for accessing resources, that the browser can evaluate as it wants to.
The idea is that web site owners can pre-compute all desirable images
and stuff, and place them where they find things convenient, and that
browsers don't have to do much to actually request them. I expect
these additional benefits over the suggested
<picture /> tag off the
top of my head:
- Since image (or object) URLs are stable, caching is not a problem.
- Since image URLs are stable, images can be statically pre-computed, and statically served from low-power servers.
- By using CSS media selector statements, required computing power on the client should be small, improving battery life.
- Since the method uses CSS3 media selectors, user agent sniffing is not required (= requires little power on the server).
- Except for maintaining the tree of base URLs and using it to calculate image paths, no changes to the process of digesting the "HTML soup" are required.
- Bandwidth to convey the required information is reduced to a few
<meta />tags per page, not the rather verbose
- The method is extensible to other content types.
- The method requires no re-learning for web designers.
- The method is compatible with existing design tools, as it does
not change the user-facing part of the
<img />tag in any way.
In case a
<meta /> statement for a given tag would not be present,
the browser would fall back to the next best resource type. I suggest
- Not specified: Use the default method of calculating the base URL.
<meta />tag: Same - keep the existing behaviour.
base-imgas the value to the
<meta />: Use this for all heavy objects.
base-videoas the value: Use this for videos, but continue to use other methods to find images.
- Conduct a topological search for base URLs, eg using this
(nil) (base) (img) (object) (video) ....
Yes, I am very late to the discussion, but would still like your input and pointers to relevant arguments. Thank you!
License of this text: CC-BY-NC-NA 3.0