Hi there!
I’ve just started using the responsive images feature, which is very cool. However, the way it works does not really make sense to me.
To illustrate, let’s say I have a high-resolution image that I want to display at a width of 500 px. Previously, I would have just uploaded a copy of the image downsized to 500 px horizontal resolution. Now that I’m using this feature, I instead upload a copy with 1500 px horizontal resolution named “image@3x.png” and include it in the page content with .
The generates the following HTML, which causes the image to actually display at the full width of the viewport, up to the raw width of 1500 px.
<img src="...image.png" sizes="100vw"
srcset="...image@3x.png 1500w, ...image2x.png 1000w, ...image.png 500w">
What I want instead is this, which causes the images to always display at a width of 500px, but with higher pixel density if the display supports it:
<img src="...image.png"
srcset="...image@3x.png 3x, ...image2x.png 2x, ...image.png 1x">
Am I missing something about how the feature works?
Is there a way to get the outcome I want without manually having to add ?sizes=500px to the Markdown for every single image?