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 “email@example.com” 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="...firstname.lastname@example.org 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="...email@example.com 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?