[✨]Extend the breakpoints of built-in responsive images by 1920, 3840 and prefere avif against webp

[frankroc2022]

Is your feature request related to a problem?

No.

Describe the solution you'd like

Add the both breakpoints or let us override the breakpoints like qwik-image it does (resolutions: [...]). Firefox and Chrome uses webp but they can use also avif, so avif should be prefered. This feature would help especially at full viewport witdh pictures.

To be clear I mean the image optimization that relies on the vite-imagetools.

Describe alternatives you've considered

S. o.

Additional context

No response

[wmertens]

One problem is that not all browsers support avif. Ideally there's several formats and the server returns the image that corresponds with the Accepts: header

[frankroc2022]

I mean something like this:

< picture> < source srcset="photo.avif" type="image/avif" /> < source srcset="photo.webp" type="image/webp" /> < img src="photo.jpg" alt="photo" /> </ picture>

[wmertens]

can you combine that with responsive sizes where the browser decides which resolution to get? I think picture lets you decide but not the browser.

[frankroc2022]

I use this at the moment and tested it. Firefox and Chrome uses avif, Edge uses webp.

import MainPic from '/public/layout/images/160234678_xl_normal_none_f7fhlz.jpg?jsx'; < picture> < source srcset=" /layout/images/160234678_xl_normal_none_vxi3yu_c_scale,w_300.avif 300w, /layout/images/160234678_xl_normal_none_vxi3yu_c_scale,w_650.avif 650w, /layout/images/160234678_xl_normal_none_vxi3yu_c_scale,w_889.avif 889w, /layout/images/160234678_xl_normal_none_vxi3yu_c_scale,w_1096.avif 1096w, /layout/images/160234678_xl_normal_none_vxi3yu_c_scale,w_1351.avif 1351w, /layout/images/160234678_xl_normal_none_vxi3yu_c_scale,w_1583.avif 1583w, /layout/images/160234678_xl_normal_none_vxi3yu_c_scale,w_1920.avif 1920w" type="image/avif" />

< source srcset=" /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_300.webp 300w, /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_709.webp 709w, /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_969.webp 969w, /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_1213.webp 1213w, /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_1301.webp 1301w, /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_1478.webp 1478w, /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_1644.webp 1644w, /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_1823.webp 1823w, /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_1887.webp 1887w, /layout/images/160234678_xl_normal_none_ssrfpv_c_scale,w_1920.webp 1920w" type="image/webp" />

< MainPic id="main_pic" class="relative w-full lg:object-none lg:h-[637px] md:mb-[170px] bottom-[2.375rem] md:bottom-0 lg:top-[-45px] xl:top-[0] left-0 right-0 mb-[0.938rem] lg:mb-[0.938rem] mh800:lg:h-[calc(100%-73px)] xl:h-[calc(100%-73px)]" alt="Wald mit See" loading="eager" /> </ picture>

Sry, but the code format does not let me post picture and source as code.

[frankroc2022]

Although it works, the vite console throws this error because of the avif files: TypeError: unsupported file type: undefined at lookup (file:///home/frank/devilbox/data/www/qwik-app-test/node_modules/@builder.io/qwik/optimizer.mjs:2570:9) at getInfoForSrc (file:///home/frank/devilbox/data/www/qwik-app-test/node_modules/@builder.io/qwik/optimizer.mjs:2585:18) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async file:///home/frank/devilbox/data/www/qwik-app-test/node_modules/@builder.io/qwik/optimizer.mjs:2608:20

After build and deploy, this error is gone so I think it is a vite problem.

[burakbasbug]

vite supports avif files but qwik's optimizer can not identify the format because the file signature (magic bytes) for avif files is missing.