4 ms·

We need a multi-resolution image format and/or support for browsers to dictate to the server what size they want.

ars 15y ago
There is a workgroup working on it: http://www.w3.org/community/respimg/ http://www.w3.org/community/respimg/ Some of the options: https://etherpad.mozilla.org/responsive-assets https://etherpad.mozilla.org/responsive-assets
- alexchamberlain 15y ago
  We need to send the dimensions with the image request. It's the only way.
  - daxelrod 15y ago
    This is actually an ingenious idea. HTTP content negotiation seems like it would come close to doing this well.
  - pornel 15y ago
    There are many factors beyond screen size that could be involved in selection of image DPI: bandwidth availability and cost, screen density and current zoom level, amount of free memory available, hardware limitations (like iPad's max 1024px bitmaps). Sending all these factors to the server would be problematic, so IMHO it's better if page declaratively specifies what sizes are available and lets UA pick one (so my UA doesn't need to tell every server when I'm out of my bandwidth allowance and hope server acts as expected).
    - alexchamberlain 15y ago
      I disagree to some extent. Given DPI, screen density and zoom level, the CSS etc should dictate the pixel width/height which can be sent to the server to obtain the correct version.
ricardobeat 15y ago
We can already do that with media queries, it doesn't solve the vector anti-alias/detail problem.
- WiseWeasel 15y ago
  Actually, the media queries only work for CSS image properties, like background-image, not for HTML img elements. We do need something equivalent to HTML5's handling of video, where you just stick a bunch of different paths to various formats in the video tag, and the browser selects the best one. Something like that for images would be nice; now we have to resort to jQuery hacks.
  - alexchamberlain 15y ago
    Disagree, we want the same asset, just a different size.
    - WiseWeasel 15y ago
      If it contains all the different possible resolutions you might need, that one asset would be larger than the one of several assets appropriate for the device in question, so you'd be wasting everyone's bandwidth and needlessly degrading your site's performance.
      - alexchamberlain 15y ago
        I'm not saying we should send every version of that asset... only the one we need.
        WiseWeasel 15y ago
        What? You want a single asset that works at all resolutions, but you don't send the whole thing? Please elaborate. [edit] I think you might be looking for a single vector design that looks good at all resolutions. Such a beast does not exist due to the low-resolution nature of most displays with which anti-aliasing can only help so much. There is no way to get around different designs for different rendered sizes if you want it to look good. You always design for a target rendered size. SVG just helps you serve 1x (most displays) and 2x (retina displays) resolution optimally with the same file. [/edit]
LachlanArthur 15y ago
Multi-resolution => maybe similar to .ico?

ars 15y ago

There is a workgroup working on it: http://www.w3.org/community/respimg/ http://www.w3.org/community/respimg/ Some of the options: https://etherpad.mozilla.org/responsive-assets https://etherpad.mozilla.org/responsive-assets

alexchamberlain 15y ago
We need to send the dimensions with the image request. It's the only way.
- daxelrod 15y ago
  This is actually an ingenious idea. HTTP content negotiation seems like it would come close to doing this well.
- pornel 15y ago
  There are many factors beyond screen size that could be involved in selection of image DPI: bandwidth availability and cost, screen density and current zoom level, amount of free memory available, hardware limitations (like iPad's max 1024px bitmaps). Sending all these factors to the server would be problematic, so IMHO it's better if page declaratively specifies what sizes are available and lets UA pick one (so my UA doesn't need to tell every server when I'm out of my bandwidth allowance and hope server acts as expected).
  - alexchamberlain 15y ago
    I disagree to some extent. Given DPI, screen density and zoom level, the CSS etc should dictate the pixel width/height which can be sent to the server to obtain the correct version.

ricardobeat 15y ago

We can already do that with media queries, it doesn't solve the vector anti-alias/detail problem.

WiseWeasel 15y ago
Actually, the media queries only work for CSS image properties, like background-image, not for HTML img elements. We do need something equivalent to HTML5's handling of video, where you just stick a bunch of different paths to various formats in the video tag, and the browser selects the best one. Something like that for images would be nice; now we have to resort to jQuery hacks.
- alexchamberlain 15y ago
  Disagree, we want the same asset, just a different size.
  - WiseWeasel 15y ago
    If it contains all the different possible resolutions you might need, that one asset would be larger than the one of several assets appropriate for the device in question, so you'd be wasting everyone's bandwidth and needlessly degrading your site's performance.
    - alexchamberlain 15y ago
      I'm not saying we should send every version of that asset... only the one we need.
      - WiseWeasel 15y ago
        What? You want a single asset that works at all resolutions, but you don't send the whole thing? Please elaborate. [edit] I think you might be looking for a single vector design that looks good at all resolutions. Such a beast does not exist due to the low-resolution nature of most displays with which anti-aliasing can only help so much. There is no way to get around different designs for different rendered sizes if you want it to look good. You always design for a target rendered size. SVG just helps you serve 1x (most displays) and 2x (retina displays) resolution optimally with the same file. [/edit]

LachlanArthur 15y ago

Multi-resolution => maybe similar to .ico?