feat(image-jsx): automatic compression and transcoding for AVIF, WebP…

[xhcy1314]

Automatic compression and transcoding for AVIF, WebP, and original formats.

Provides smaller image formats while ensuring proper display on low-end devices.

Overview

This commit enhances the image processing functionality. Now, the image tools automatically compress and transcode AVIF, WebP, and original formats, providing smaller image formats while ensuring proper display on low-end devices.

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

This commit enhances the image processing functionality. Now, the image tools automatically compress and transcode AVIF, WebP, and original formats. It provides smaller image formats while ensuring proper display on low-end devices. This improvement contributes to enhancing user experience, particularly for users with lower-performance devices.

Use cases and why

• 1. A single configuration allows selecting either AVIF, WebP, or PNG image formats. Choosing AVIF format will result in images not being displayed on devices that do not support AVIF.
• 2. Similarly, selecting WebP format will result in images not being displayed on devices that do not support WebP.

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[wmertens]

The idea is good but then you also need to change the jsx output so that it uses <picture> instead of <img>, because srcset doesn't let you tell the browser what the type is

https://stackoverflow.com/a/67698595/124416

[xhcy1314]

The idea is good but then you also need to change the jsx output so that it uses <picture> instead of <img>, because srcset doesn't let you tell the browser what the type is

https://stackoverflow.com/a/67698595/124416

I'll work on implementing it and testing its effectiveness as soon as possible. Thanks for the reminder!

[xhcy1314]

这个想法很好，但是您还需要更改 jsx 输出，以便它使用<picture>而不是<img>，因为 srcset 不允许您告诉浏览器类型是什么很好，但是您需要更改 jsx 输出，以便它使用 而不是 ，因为 srcset 没有告诉浏览器类型是什么

https://stackoverflow.com/a/67698595/124416https://stackoverflow.com/a/67698595/124416

Is there anything else I need to do ？

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	18a9422

[PatrickJS]

@wmertens is this ready?

[wmertens]

This looks good, but:

• it is slightly breaking in terms of CSS, no? I'm not sure if this should wait for v2 or if a new major is enough. @PatrickJS ?
• it would be great if we had some unit tests of the output, just provide fake imagedata and show what the result should be.

[PatrickJS]

if we have unit/e2e tests we should be fine

[wmertens]

I think we should make this configurable, and in V2 we enable it by default.

So right now, by default keep the img output as-is, but allow avif with picture via a setting.

What do you think @xhcy1314 ?

[xhcy1314]

I think we should make this configurable, and in V2 we enable it by default.

So right now, by default keep the img output as-is, but allow avif with picture via a setting.

What do you think @xhcy1314 ?

I think this approach is reasonable. By making this feature configurable, we can introduce the new format without disrupting the current workflow. Enabling it by default in V2 will reduce the cognitive load on users, allowing them to focus on their business code.

However, i need your suggestion on what to name this configuration key.

[wmertens]

@xhcy1314 how about this:

• make the default format webp again
• add jsdoc to the format parameter to explain that you can set multiple formats separated by ;
• if there are multiple formats, generate a picture, otherwise an img

[xhcy1314]

@xhcy1314 how about this:

• make the default format webp again
• add jsdoc to the format parameter to explain that you can set multiple formats separated by ;
• if there are multiple formats, generate a picture, otherwise an img

Okay, I need some time to tweak this part of the code.