Use AVIF instead of WEBP on boxer images to reduce page size (-51%)

[Trewqa]

Descripción

Se utiliza AVIF en lugar de WEBP para reducir el tamaño de las imágenes de la página.

Problema solucionado

Reducir el tamaño de las imágenes

Imagen	WEBP Size	AVIF Size	%
el-mariana-big	241 kB	67.4 kB	-72%
el-mariana-small	6.28 kB	4.29 kB	-32%
plex-big	415 kB	111 kB	-73%
plex-small	5.90 kB	4.17 kB	-29%

Cambios propuestos

Se añaden 2 commits:

• Se añaden imagenes AVIF de los boxeadores
• Se cambia el componente SelectYourBoxer para usarlas

Comprobación de cambios

• He revisado localmente los cambios para asegurarme de que no haya errores ni problemas.
• He probado estos cambios en múltiples dispositivos y navegadores para asegurarme de que la landing page se vea y funcione correctamente.
• He actualizado la documentación, si corresponde.

Enlaces útiles

• Can I use: https://caniuse.com/avif

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
la-velada-web-oficial	✅ Ready (Inspect)	Visit Preview	✅ 1 resolved	Mar 8, 2024 11:44pm

[midudev]

Habría que mantener las imágenes de webp y cargar ambas con para tener la máxima compatibilidad, ya que AVIF no funciona en versiones recientes de Safari.

[Trewqa]

Habría que mantener las imágenes de webp y cargar ambas con para tener la máxima compatibilidad, ya que AVIF no funciona en versiones recientes de Safari.

Hola midu, he estado probando en browserstack con Safari 15 y no he tenido problemas para cargarlas.

Aún así para extender la compatibilidad estoy dudando en qué se podría usar y tengo dos opciones:

Por un lado está <picture> > <source>, limitandonos también a que el navegador lo soporte. Y además, que el navegador pueda detectar el cambio del <source> en tiempo real y no solo lo compruebe al cargar el DOM por primera vez.

Por otro lado se me ocurre usar onerror = this.src = '*.webp', pero lo veo una chapuza.

[joelmh-112]

Holaa!! Me cuelo en la conversación.

Creo que con picture y source estaría perfecto y poniendo siempre la "imagen más compatible" (en este caso webp) en una etiqueta dentro del picture así como fallback siempre tiraría esa.

A mover las manitas!

[midudev]

Habría que mantener las imágenes de webp y cargar ambas con para tener la máxima compatibilidad, ya que AVIF no funciona en versiones recientes de Safari.

Hola midu, he estado probando en browserstack con Safari 15 y no he tenido problemas para cargarlas.

Aún así para extender la compatibilidad estoy dudando en qué se podría usar y tengo dos opciones:

Por un lado está <picture> > <source>, limitandonos también a que el navegador lo soporte. Y además, que el navegador pueda detectar el cambio del <source> en tiempo real y no solo lo compruebe al cargar el DOM por primera vez.

Por otro lado se me ocurre usar onerror = this.src = '*.webp', pero lo veo una chapuza.

<picture> y <source> tienen ya el soporte suficiente para los navegadores que queremos usar. 👍 Yo creo que esa sería la solución ideal. Donde vayamos a usar avif, hay que tener el fallback de webp listo.

El problema de Avif está en:

• En Edge sólo hace un par de versiones que está (enero del 2024)
• En Safari a partir de versiones de finales del 2022. Además depende de la versión del sistema operativo (macOs Ventura 13 hacia adelante).

[github-actions]

⚠️ Esta Pull Request tiene conflictos. Por favor, resuelvelos antes de que podamos evaluar los cambios.

[github-actions]

✅ ¡Los conflictos han sido resuletos! Un colaborador revisará pronto la Pull Request.