Strapi pregenera, almacena y sirve distintos formatos de imagen a partir de la original que se sube al CMS. Por defecto tiene distintos puntos de corte configurados: large (1000px), medium (750 px), small (500 px) y thumbnail (156 px) que se pueden configurar.
Nota: Se puede ver un ejemplo de la estructura del campo imagen que llega desde la API de Strapi en Notion.
Para integrar estas imágenes optimizadas y evitar las molestias del componente next/image, hasta ahora hemos recurrido a dos aproximaciones distintas, cada una con sus inconveniencias:
Se utiliza un selector sobre la entidad de la API para pasarle una única URL, el tamaño más adecuado en cada caso, a los componentes puramente visuales, que utilizan el elemento <img> estándar.
Implementada en este componente | Detalles (Notion) | Limitaciones (Notion)
Se utiliza un componente de imagen específico para toda la aplicación que gestione esta lógica de Strapi y delegue la selección del formato al navegador. Para esto, se utiliza un elemento <picture> y el componente configura tantos elementos <source> como formatos disponga el recurso.
Implementada en este componente | Detalles (Notion) | Limitaciones (Notion)
Objetivo: integrar las imágenes pregeneradas por Strapi mediante un componente de React que saque lo mejor del navegador.
- Utilizar un componente de imagen que delegue la selección de formato al navegador. Como no se está haciendo dirección de arte ni distintos formatos de fichero (jpg, png, webp, avif...), sino que solo se están utilizando imágenes redimensionadas, es mejor utilizar el atributo
srcsetde<img>(según CSS Tricks) en lugar del elemento<picture>. Esto permite al navegador una mayor participación en la selección del formato. - El atributo
srcde fallback también puede seleccionarse de acuerdo al que probablemente sea óptimo.
Implementar en este componente | Ver en el navegador las distintas aproximaciones
Nota: se ha habilitado el uso del elemento
<img>que Next.js bloquea por defecto. Saber más.