Images in our blog posts are usually stored in Markdown like this:
My code extracts this URL and produces a set of source URLs, each of which has different width injected, like this:
- https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg (this is our widest layout)
This works great for full-width images, like in this blog post, but it upscales smaller images. Fortunately, there is `c_lfill`, so I can do this:
So far so good but now I'd like to add retina support (x2 only to keep it simple), so generally, I would continue up to 2000 instead of 1000. `sizes` inside `<picture` stay the same: if the browser sees a suggestion to use 1000px wide image, it will fetch 2000px retina image on browsers with DPR = 2.
Now comes the problem. The image fetched will be this:
which is still limited to its natural width, which is 864px in this case. The problem is that after downloading this image, the browser will render it half the size, probably because it converts "real pixels" back to "CSS pixels".
I tried this but it doesn't have any effect:
For comparison, if width is set explicitly and there is no `c_lfill`, `dpr_2.0` does the right thing:
https://res.cloudinary.com/demo/image/upload/w_300,dpr_2.0/sample.jpg (the width is actually 600px)
For another comparison, if the width is not set explicitly, `dpr_2.0` has no effect again:
https://res.cloudinary.com/demo/image/upload/dpr_2.0/sample.jpg (width is 864px, not 2*864)
Is there a way to make Cloudinary images with with `dpr` and their natural widths?
Please sign in to leave a comment.