4

Here's my img tag:

<img src="https://myserver.com/image?w=667&h=375 667w" 
  srcset="https://myserver.com/image?w=1366&h=1024 1366w 1x,
  https://myserver.com/image?w=1366&h=1024&dpr=2 1366w 2x,
  https://myserver.com/image?w=1366&h=1024&dpr=3 1366w 3x,
  https://myserver.com/image?w=1024&h=768 1024w 1x,
  https://myserver.com/image?w=1024&h=768&dpr=2 1024w 2x,
  https://myserver.com/image?w=1024&h=768&dpr=3 1024w 3x,
  https://myserver.com/image?w=800&h=480 800w 1x,
  https://myserver.com/image?w=800&h=480&dpr=2 800w 2x,
  https://myserver.com/image?w=800&h=480&dpr=3 800w 3x" sizes="100%">

I'm using imgix which returns the image in correct pixel density based upon the dpr query parameter. The above does not seem to work, the image is not rendered in the right size. Am I not using the correct format?

J-Alex
  • 6,881
  • 10
  • 46
  • 64
Sammy
  • 3,395
  • 7
  • 49
  • 95

1 Answers1

9

You can't mix the x and w descriptors in your srcset attribute.

I don't know imgix, but I suppose ?w=800&h=480&dpr=2 returns an image with dimensions of 1600x960 pixels. Are https://myserver.com/image?w=800&h=480&dpr=2 and https://myserver.com/image?w=1600&h=960&dpr=1 the same image?

If the image is always the same (same content and same aspect ratio) on every visible size, you should define which visible/CSS sizes you need (depends on your design, for example 800, 1200 and 1600 pixels) and write this:

<img
  src="https://myserver.com/image?w=800&h=400"
  srcset="https://myserver.com/image?w=800&h=400 800w,
    https://myserver.com/image?w=1200&h=600 1200w,
    https://myserver.com/image?w=1600&h=800 1600w,
    https://myserver.com/image?w=2000&h=1000 2000w,
    https://myserver.com/image?w=2400&h=1200 2400w,
    https://myserver.com/image?w=2800&h=1400 2800w,
    https://myserver.com/image?w=3200&h=1600 3200w"
  sizes="100vw">

The ?w=2400&h=1200 image will be downloaded by the browser for several configurations:

  • screen density 1 with viewport width equal to or below 2400px
  • screen density 2 with viewport width equal to or below 1200px
  • screen density 3 with viewport width equal to or below 800px
  • etc.
Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24
  • Thank you. The `dpr` part of the URL denotes the pixel density; so `dpr=1` and `dpr=2` are 1x and 2x densities respectively. – Sammy Jun 09 '17 at 16:01
  • So what you're saying is that the browser will not only pick the correct size, but also the correct pixel density on its own? I therefore do not have to write 1x, 2x, 3x, etc. at all? – Sammy Jun 09 '17 at 16:03
  • Well here's a question: why does the `src="https://myserver.com/image?w=800&h=400"` part above get loaded every time anyways, with every single image? – Sammy Jun 12 '17 at 13:26
  • In modern browsers with native `srcset-w` support, it should not. Do you have your code online somewhere I could check? – Nicolas Hoizey Jun 12 '17 at 17:37
  • Hmm... can you please click on the URL above again after you're connected? – Sammy Jun 12 '17 at 17:45
  • hmm... I'll check again and try to capture a screenshot. May I please ask you to remove the URLs from the comment if possible? Thanks again for checking. – Sammy Jun 12 '17 at 22:07
  • If you can't mix `x` and `w` in `srcset`, does that imply that it's impossible to vary quality for high-DPR only? e.g. https://blog.imgix.com/2016/03/30/dpr-quality.html – jon_wu Jan 23 '18 at 19:44
  • @jon_wu you'll have to use `` for that, if I understand your question – Nicolas Hoizey Jan 30 '18 at 08:47
  • 1
    @NicolasHoizey thanks for verifying. That's what I thought. I suppose I was thrown off by the generalization that `` is good for art direction, but I guess in this case we just add triple the rules for each size, one for 1x, 2x, 3x. Seems a little verbose, but the tradeoff of more HTML and a lot less image bytes on high DPR screens seems worth it. We'll have to test this out a bit. – jon_wu Jan 30 '18 at 17:36
  • That's right, exactly. I have planned to do such tests also. – Nicolas Hoizey Feb 02 '18 at 12:09
  • 1
    @jon_wu this answer states that you can supply images for high DPI screens using only w. I just tried and works perfect – MStodd Nov 28 '22 at 19:16