<enhanced:img retina> support

[benallfree]

Describe the problem

@sveltejs/enhanced-img renders the img tag using intrinsic dimensions, which causes incorrect rendering if the image is a 2x retina image.

Describe the proposed solution

I propose a boolean prop, <enhanced:img retina> that will set the img width/height to the correct logical dimensions: 1/2 the intrinsic dimensions.

Alternatives considered

• CSS styling is not helpful because it puts the burden back on the developer to specify sizes explicitly

Importance

nice to have

Additional Information

Here is a crude patch just to show the essence:

diff --git a/src/preprocessor.js b/src/preprocessor.js
index 0222037e593b554cae5b8712fa8c8e51fd071932..051d57097d4844ee3474b2f0d60584ca6578f8ba 100644
--- a/src/preprocessor.js
+++ b/src/preprocessor.js
@@ -304,8 +306,8 @@ function img_to_picture(consts, content, node, image) {

    res += `<img ${serialize_img_attributes(content, attributes, {
        src: to_value(consts, image.img.src),
-       width: image.img.w,
-       height: image.img.h
+       width: image.img.w/2,
+       height: image.img.h/2
    })} />`;

    return (res += '</picture>');
@@ -345,8 +347,8 @@ function dynamic_img_to_picture(content, node, src_var_name) {

    const details = {
        src: `{${src_var_name}.img.src}`,
-       width: `{${src_var_name}.img.w}`,
-       height: `{${src_var_name}.img.h}`
+       width: `{${src_var_name}.img.w/2}`,
+       height: `{${src_var_name}.img.h/2}`
    };

    return `{#if typeof ${src_var_name} === 'string'}

[benmccann]

Can you share an example of what the HTML output looks like now vs what it's supposed to look like?

[benallfree]

@benmccann Let's assume foo.png is a 500x500 retina image. In other words it's stored at 2x resolution and should display at 250x2t50 logical pixels.

<enhanced:img "./foo.png">

currently renders something like:

<img src="./foo.png" width="500" height="500" />

With the proposed update,

<enhanced:img "./foo.png" retina>

would render

<img src="./foo.png" width="250" height="250" />