Question about Unexpected behavior

[eric-mathison]

Hey Josh and community.
I'm trying to implement this in a project that I have going and am seeing somewhat of unexpected behavior with the placeholder and the image chosen / loaded. I've looked over everything multiple times and cannot find what I'm missing here.

A quick note, I'm using everything from the tutorial (api route, disk cache, etc) with exception of the responsive sizes.
As far as the component, this is what I'm using:

<Image
  width={768} // original src width
  height={512} // original src height
  alt={`${data.listing.images[0].alt}`}  // just a string
  src={`${data.listing.images[0].url}`}  // remote url to a jpg
  responsive={[
    {
      size: {
        width: 300,
        height: 200,
      },
      maxWidth: 480,
    },
    {
      size: {
        width: 768,
        height: 512,
      },
    },
  ]}
  dprVariants={[1]}
/>

The resulting html is:

<img decoding="async" loading="lazy" class="remix-image" width="768" height="512" alt="Test Alt Image" srcset="/api/image?
src=https%3A%2F%2Fcdn.sendoftenlabs.com%2Fh%2Ftest-data%2Ftest_image_1.png&amp;width=300&amp;height=200&amp;fit=cover
&amp;position=center&amp;background[]=0&amp;background[]=0&amp;background[]=0&amp;background[]=0&amp;quality=80
&amp;compressionLevel=9&amp;loop=0&amp;delay=100&amp;crop=null 300w, /api/image?
src=https%3A%2F%2Fcdn.sendoftenlabs.com%2Fh%2Ftest-data%2Ftest_image_1.png&amp;width=768&amp;height=512&
amp;fit=cover&amp;position=center&amp;background[]=0&amp;background[]=0&amp;background[]=0&amp;background[]=0
&amp;quality=80&amp;compressionLevel=9&amp;loop=0&amp;delay=100&amp;crop=null 768w" sizes="(max-width: 480px) 300px,
 768px" src="/api/image?src=https%3A%2F%2Fcdn.sendoftenlabs.com%2Fh%2Ftest-data%2Ftest_image_1.png&amp;width=768
&amp;height=512&amp;fit=cover&amp;position=center&amp;background[]=0&amp;background[]=0&amp;background[]=0&amp;
background[]=0&amp;quality=80&amp;compressionLevel=9&amp;loop=0&amp;delay=100&amp;crop=null" style="min-width: 768px; 
min-height: 1152px; background-size: cover; background-position: center center; animation-duration: 0.125s;">

Looking at the server logs:

::1 - - [02/Aug/2022:18:00:24 +0000] "GET /listing/test-listing-19 HTTP/1.1" 200 -
Retrieved image [?src=https%3A%2F%2Fcdn.sendoftenlabs.com%2Fh%2Ftest-data%2Ftest_image_1.png&width=768&height=512
&fit=cover&position=center&background%5B%5D=0&background%5B%5D=0&background%5B%5D=0&background%5B%5D=0
&quality=80&compressionLevel=9&loop=0&delay=100&crop=null] from cache.

::1 - - [02/Aug/2022:18:00:27 +0000] "GET /api/image?src=https%3A%2F%2Fcdn.sendoftenlabs.com%2Fh%2Ftest-data%2Ftest_image_1.png
&width=768&height=512&fit=cover&position=center&background[]=0&background[]=0&background[]=0&background[]=0
&quality=80&compressionLevel=9&loop=0&delay=100&crop=null HTTP/1.1" 200 -

At full resolution, the placeholder/image is set to style="min-width: 768px; min-height: 1152px; making the image really distorted. I've identified the culprit to be the computePlaceholderSize function. Where

return {
    width: largestWidth,
    height: Math.round(largestWidth * ratio),
  };

does equal the 768x1152. In my instance if the operation was Math.round(largestWidth / ratio), the result would be the proper 512px.

Second, the placeholder and the image loaded doesn't seem to change when the screen width does. Inspecting in chrome and using the responsive viewer, the image that is loaded is always the largest image (regardless of the viewport settings). For instance using a 320px view, the image / placeholder is still width: 768px height: 1152px.

Any help here as to what I'm missing or can be done to fix this is greatly appreciated. Thanks.

[phpb-com]

You are correct,

remix-image/packages/remix-image/src/components/Image/helpers.ts

Line 27 in 4a163ba

ratio = size.width / size.height;

should be the other way around, height should be divided by width and w/h. Workaround is to supply your own aspect ratio via placeholderAspectRatio parameter. You probably should submit a bug report in the issues, instead of the discussion topic.

[phpb-com]

Opened pull request to fix this: #51

[Josh-McFarlin]

Just approved the pr @phpb-com, will try to release a new version to npm later today

[phpb-com]

Thanks @Josh-McFarlin , looking forward to the new release with the bugfix.

[timwaddell]

Hi @Josh-McFarlin 👋🏼 Just wondering when this fix will be up on npm? Thanks ahead :)