Images

From W3C Wiki

This article is a stub. You can help the W3C wiki by expanding it.

This page attempts to specifically define the use-cases that have developed since devices have had more differences in screen sizes and resolutions. Revising (or complementing) the way images work will solve the use-cases and should also help to future-proof the web. The information on this page was used as the basis for the Use Cases and Requirements for Standardizing Responsive Images document.

Responsive Images Use Cases

Note: This is still a work in progress, it is likely not all use-cases in this current version will need to be solved with just one method. All use-cases need to be fleshed out.

Viewport Sizes

There are many different screen sizes that are in common daily usage, ranging from small phones to televisions. This change in how we access the web was the main reason for needing to make responsive websites in the first place. It is a fairly obvious use-case but one that should be remembered.

Questions:

  • Q: How does device viewport size affect what image(s) websites want to serve and why?
    • A: ...

DPI

Since the retina/HD devices (iPhone and iPad currently) came out, the quality of images on the web has changed. Beforehand, even though we had a variety of device sizes, the DPI has always been the same. This is no longer the case and it is very likely that the current resolution/pixel density on retina devices will not be the only one.

We should be ready to be able to support the current resolutions as well as any others that manufacturers attempt to use (which they will if they are trying to compete aggressively with Apple) and it is an almost definite situation in the future (and probably very soon).

Printed documents/websites also generally have pixelated due to being a higher DPI than most images currently served on the web.

Questions:

  • Q: How does device DPI affect what image(s) websites want to serve and why?
    • A: ...

See also:

Slow Networks

It should be noted that many devices are used on mobile networks which are often very slow. Often times conferences suffer from slow networks as well due to many users attempting to use a single network connection simultaneously. Many people also have very slow connections to their homes and workplaces. While it may not be possible for a solution to be based on bandwidth, anything that can be done to reduce latency and HTTP requests should be done.

Questions:

  • Q: How does network speed (bandwidth) affect what image(s) websites want to serve and why?
    • A: ...

Zooming

Zooming AKA Resizing.

Images will often become blurry when resized (both up and down) or zoomed.

Questions:

  • Q: How does zoom level affect what image(s) websites want to serve and why?
    • A: ...

Art Direction

Simple example: (changing crop based on display area)

  • a website wants to normally show a large image (e.g. of a figure with a broad background) on display that are big enough (this is related to Viewport Size).
  • when shown on a smaller device, simply shrinking the image may reduce its relevance/understandability, and thus the site may wish to show a different cropping of the same image at the smaller size.

Examples:

More involved example: (changing orientation and crop based on display area)

  • On the Nokia Browser site where it describes the Meego browser, the Nokia Lumia is show horizontally on wide screens. As the screen narrows, the Nokia Lumia is then shown vertically and cropped. Bryan and Stephanie Rieger, the designers of the site, have talked about how on a wide screen, showing the full phone horizontally showed the browser best, but on small screens, changing the img to vertical made more sense because it allowed the reader to still make out the features of the browser in the image.

Extracted from: 2012-05-12 whatwg post

See Also

Some of these use-cases were extracted from:


Possible Future Use Cases

These are more of a theoretical nature and collected here for documentation purposes. Should actual real world examples of these use cases occur, please document said real world examples inline respectively and move the use case up to the previous section.

File Types

Different File Types. While not a current problem, there may be cases where one filetype is better for lower quality images as opposed to another for higher quality. It may also be more feasible to use a progressive file format.

Responsive Images Solution Constraints

Compatibility

  • Backwards Compatible

All websites that use the current standard (or prior) of <img> should still work flawlessly and old browsers should not try to render (or even request) multiple images or any other part of a solution.

Users

  • Images are a very large part of the web for both developers and the general public. They must not be required to upload multiple images, any solution should be written with consideration to how a script will be able to convert the single image to work with the new solution.
Retrieved from "https://www.w3.org/wiki/index.php?title=Images&oldid=64366"