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?

• [x] 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:

• [x] My code follows the developer guidelines of this project
• [x] 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

[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[bot]]

‼️ Deploy request for qwik-insights rejected.

Name	Link
🔨 Latest commit	765f0d3c165e35da875d9d78c086cdea56c54e87

[PatrickJS]

@wmertens is this ready?

[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.

[xhcy1314]

Apologies for the delay. I was deeply immersed in business tasks until now, but I have now completed the code modifications as per our previous agreement. Could you please confirm if everything now meets the requirements?

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: bb13df5fe8de0a6b1eaa41eccf5bb562af223e38

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR