11 ms·

I like the concept, but the syntax feels awkward, clunky and very specific. Why not repurpose the media attribute from style tags to all other tags?

annevk 14y ago
Because it is way more verbose and does not address the pixel density case.
- alexchamberlain 14y ago
  But pixel density is a property of the media, which should be dealt with by media queries.
  - annevk 14y ago
    Querying the pixel density of the device is not the same as describing the pixel density of the resource. This has been a common misconception in the discussion of this feature.
    - alexchamberlain 14y ago
      Apologies - I misunderstood the proposal. However, what is the pixel density of a PNG?
      - julian37 14y ago
        PPI can be stored in the "pHYs" chunk in a PNG. And some image processing/editing tools do so, such as Photoshop starting with version 7. http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.8 http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.d... http://www.scantips.com/basics9p.html http://www.scantips.com/basics9p.html
      - othermaciej 14y ago
        What it's representing is not necessarily an intrinsic property of the image but rather the intended pixel density for presentation. Say I have a 600x200 PNG which fits my design for normal resolution displays where 1 CSS pixel = 1 device pixel (which is most current laptop screens, for instance). But then I'd like to take advantage of the extra resolution on a device that displays at 1 CSS pixel = 2 device pixels, such as a retina display iPad. So then I get a 1200x400 version of the same image (perhaps both downscaled from a super high res original) and serve it as the 2x image. It will take the same logical space in the layout but provide extra quality on a higher resolution display. There's no need to do anything special to the PNG.
        alexchamberlain 14y ago
        Awesome reply. I now understand. This is still a property of the media though.
user24 14y ago
> the syntax feels awkward, clunky and very specific Yeah, stuff like "2x 100w" looks a bit like magic numbers[1] Also there's potential for confusion in 'x' - does it mean X as in a co-ordinate i.e. width, or zoom? I'd rather see something more verbose like this: <img src="foo.jpg"> <set src="foo1.jpg" width="100"> <set src="foo2.jpg" density="2"> </img> Yes it's more wordy to write, but you read code more than you write it so it makes sense to optimise for readability over byte-shaving. [1] http://catb.org/jargon/html/M/magic-number.html http://catb.org/jargon/html/M/magic-number.html
- othermaciej 14y ago
  There are certainly other ways to do it, but this particular way won't work. <img> was historically a "void element" in past versions of HTML, and past browsers, so it can never have child elements.
- annevk 14y ago
  We cannot change the way <img> is parsed. See e.g. http://software.hixie.ch/utilities/js/live-dom-viewer/ http://software.hixie.ch/utilities/js/live-dom-viewer/ for the tree you get with that markup. It's not what you expect.
  - user24 14y ago
    Fair enough, but that is a technical limitation which is trivial to get around: <setsrc> <img src="foo.jpg"> <set src="foo1.jpg" width="100"> <set src="foo2.jpg" density="2"> </setsrc> Always be wary of allowing arguments that hinge on "it's not technically possible" to shut down good ideas.
    - Kilimanjaro 14y ago
      FTFY <imgset> <img src="foo.jpg"> <img src="foo1.jpg" width="100"> <img src="foo2.jpg" density="2"> </imgset>
      - 14y ago

annevk 14y ago

Because it is way more verbose and does not address the pixel density case.

alexchamberlain 14y ago
But pixel density is a property of the media, which should be dealt with by media queries.
- annevk 14y ago
  Querying the pixel density of the device is not the same as describing the pixel density of the resource. This has been a common misconception in the discussion of this feature.
  - alexchamberlain 14y ago
    Apologies - I misunderstood the proposal. However, what is the pixel density of a PNG?
    - julian37 14y ago
      PPI can be stored in the "pHYs" chunk in a PNG. And some image processing/editing tools do so, such as Photoshop starting with version 7. http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.8 http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.d... http://www.scantips.com/basics9p.html http://www.scantips.com/basics9p.html
    - othermaciej 14y ago
      What it's representing is not necessarily an intrinsic property of the image but rather the intended pixel density for presentation. Say I have a 600x200 PNG which fits my design for normal resolution displays where 1 CSS pixel = 1 device pixel (which is most current laptop screens, for instance). But then I'd like to take advantage of the extra resolution on a device that displays at 1 CSS pixel = 2 device pixels, such as a retina display iPad. So then I get a 1200x400 version of the same image (perhaps both downscaled from a super high res original) and serve it as the 2x image. It will take the same logical space in the layout but provide extra quality on a higher resolution display. There's no need to do anything special to the PNG.
      - alexchamberlain 14y ago
        Awesome reply. I now understand. This is still a property of the media though.

user24 14y ago

> the syntax feels awkward, clunky and very specific Yeah, stuff like "2x 100w" looks a bit like magic numbers[1] Also there's potential for confusion in 'x' - does it mean X as in a co-ordinate i.e. width, or zoom? I'd rather see something more verbose like this: <img src="foo.jpg"> <set src="foo1.jpg" width="100"> <set src="foo2.jpg" density="2"> </img> Yes it's more wordy to write, but you read code more than you write it so it makes sense to optimise for readability over byte-shaving. [1] http://catb.org/jargon/html/M/magic-number.html http://catb.org/jargon/html/M/magic-number.html

othermaciej 14y ago
There are certainly other ways to do it, but this particular way won't work. <img> was historically a "void element" in past versions of HTML, and past browsers, so it can never have child elements.
annevk 14y ago
We cannot change the way <img> is parsed. See e.g. http://software.hixie.ch/utilities/js/live-dom-viewer/ http://software.hixie.ch/utilities/js/live-dom-viewer/ for the tree you get with that markup. It's not what you expect.
- user24 14y ago
  Fair enough, but that is a technical limitation which is trivial to get around: <setsrc> <img src="foo.jpg"> <set src="foo1.jpg" width="100"> <set src="foo2.jpg" density="2"> </setsrc> Always be wary of allowing arguments that hinge on "it's not technically possible" to shut down good ideas.
  - Kilimanjaro 14y ago
    FTFY <imgset> <img src="foo.jpg"> <img src="foo1.jpg" width="100"> <img src="foo2.jpg" density="2"> </imgset>
    - 14y ago