Responsive image feature makes images larger, not higher-resolution?

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 ![](image.png).

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?