qwikifiers / qwik-image Goto Github PK

Not much more to say than the title. Animated webp files also don't stay animated.

to reproduce:

import { component$ } from '@builder.io/qwik';
import ImgSpooky from '~/media/spooky.gif?jsx';
export default component$(() => {
    return (
        <div>
            <ImgSpooky />
            {/* spooky gif is lifeless like this isn't even halloween */}
        </div>
    )
});

ok I had a minute and I made a repo: https://git.sr.ht/~jeremyparker/qwik-animation-handling

It's seems reactivity is not working. The image component renders correctly on the first render, however, if you need to change any of the input props like it's layout or src after creating the component, it doesn't update.

This looks like it is because the logic for generating the src, sizes, and layouts is coded at the component level rather than in a reactive task$ or computed$ function.

Hello!
I think this calculation here is wrong:

https://github.com/qwikifiers/qwik-image/blob/main/packages/qwik-image/src/lib/image.tsx#L163

for await (const breakpoint of breakpoints.sort()) {
    let transformedHeight =
      typeof height === 'string' ? parseInt(height, 10) : height;
    if (height && aspectRatio) {
      transformedHeight = Math.round(breakpoint * aspectRatio);
                                               ^^^
    }

The aspect ratio of an image is the ratio of its width to its height.

Aspect Ratio = Width / Height 
Height = Width / Aspect Ratio

so if we want to transform the height we should divide the width by the aspect ratio

transformedHeight = Math.round(breakpoint / aspectRatio);

So we've just migrated from @unpic/qwik due to the transformers/detectors and API being MUCH better here in qwik-image where I can literally just pass a switch statement and tell it how to transform URLs.

One issue I've just noticed is that our frontend was using a lot of layout="fullWidth" and now I'm noticing a lot of image requests of 3840 width (double my screen width on a MBP M1 2021).

When I look at the documentation between the two libraries, this is how that property is described:

• qwik-image (https://github.com/qwikifiers/qwik-image#fullwidth): the width of the image is always equal to the width of the screen
• unpic/qwik (https://unpic.pics/img/qwik): the image will be rendered at full width of its container. This is optimized for full-width hero images. You can set height to a fixed value, which will mean the image will be rendered at that fixed height and scale horizontally to fill the container.

I can see that Gatsby behaviour is similar to qwik-image: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/

Also, I see that unpic/react works the same as qwik-image (https://unpic.pics/img/learn/#layouts):

The fullWidth layout will stretch to the width of the screen, and is best for hero images and banners. Fixed images don’t scale at all, and are best for logos and icons.

I'm thinking that the way that it works for unpic/qwik is more useful than the functionality provided by qwik-image where it just uses 100% of the screen width as you're often trying to fill containers with images and want some help sizing them up depending on what's available.