Mejores prácticas de imágenes e ícones

Un resumen condensado de las 25 mejores prácticas más importantes extraídas de cada página en esta sección.

1. Prefiere next/image sobre img: Usa next/image para que Next.js sirva automáticamente WebP/AVIF, cargue de forma diferida las imágenes fuera de pantalla y genere tamaños responsivos. La etiqueta <img> sin procesar no incluye optimización y daña el LCP.
2. Siempre empareja fill con sizes: Usar fill sin la prop sizes hace que el navegador descargue la variante más grande para cada dispositivo. Proporciona una cadena sizes consciente de puntos de corte que coincida con tus columnas de diseño reales.
3. Establece position: relative en padres con fill: El padre de una imagen con fill debe tener position: relative (o absolute/fixed) más dimensiones definidas, o la imagen se colapsa a altura cero. Usa un envoltorio de relación de aspecto para bloquear el diseño.
4. Reserva priority para imágenes LCP: Solo agrega priority a imágenes hero por encima del pliegue (típicamente una o dos por página). El uso excesivo cancela el beneficio de carga diferida de next/image.
5. Configura remotePatterns explícitamente: Agrega cada host de imagen externo (por ejemplo, images.unsplash.com, images.pexels.com, cdn.pixabay.com) a images.remotePatterns en next.config.ts y reinicia el servidor de desarrollo. Las entradas faltantes causan errores 400 en tiempo de ejecución, no en tiempo de compilación.
6. Prefiere importaciones estáticas para imágenes locales: Las importaciones estáticas devuelven StaticImageData con width, height y un blurDataURL generado automáticamente, eliminando boilerplate manual. También habilitan placeholder="blur" sin trabajo extra.
7. Usa width/height solo para relación de aspecto: Las props width y height definen el tamaño solicitado y la relación de aspecto - no redimensionan ni recortan el elemento renderizado. Controla el tamaño visual con clases CSS.
8. Nunca expongas claves API en el navegador: Las claves de Unsplash, Pexels y Pixabay deben mantenerse en el lado del servidor; busca desde Componentes de Servidor o Manejadores de Ruta y almacena secretos en .env.local. Pixabay es especialmente arriesgado porque la clave es un parámetro de consulta.
9. Cachea respuestas API con revalidate: Envuelve búsquedas de fotos de stock con next: { revalidate: 3600 } para que te mantengas dentro de límites de tasa por hora (Unsplash 50/5000, Pexels 200, Pixabay 100/min) y mantengas las páginas rápidas. Esto también evita sobrecargar las APIs de terceros en cada solicitud.
10. Usa el formato correcto de encabezado Auth: Unsplash requiere Authorization: Client-ID <key>, Pexels requiere la clave sin procesar sin prefijo Bearer, y Pixabay usa un parámetro de consulta key. Mezclar estos devuelve un 401 y desperdicia tiempo de depuración.
11. Elige el tamaño de URL correcto: Usa regular/webformatURL/large para visualización y reserva raw/original/fullHDURL para descargas, ya que los originales pueden exceder 10MB. Servir imágenes de tamaño excesivo deshace el punto de un canal de optimización.
12. Respeta la atribución y el seguimiento de descargas: Unsplash requiere crédito del fotógrafo con parámetros UTM y una llamada a download_location cada vez que se usa una foto. Pexels y Pixabay fomentan fuertemente la atribución incluso cuando no es estrictamente requerida.
13. Trata el texto alt de API como no confiable: Campos como alt de Pexels o alt_description de Unsplash pueden estar vacíos, ser genéricos o nulos. Proporciona un respaldo significativo para mantener las imágenes accesibles.
14. Nunca hagas hotlink de Pixabay en producción: La licencia de Pixabay permite solo hotlinking temporal de CDN; para producción, descarga y re-aloja imágenes en tu propia infraestructura. Planifica un paso de compilación o canal de ingesta en consecuencia.
15. Importa ícones desde subcaminos de familia: Siempre importa react-icons desde una ruta de familia como react-icons/fa - importar desde la raíz del paquete puede derrotar el tree-shaking y agrupar miles de ícones sin usar. La misma disciplina se aplica a cualquier importación de ícones de estilo barrel.
16. Estiliza Heroicons solo con className: Heroicons ignoran las props size y color; establece dimensiones y color a través de utilidades de Tailwind como h-6 w-6 text-blue-500. Alias imports cuando uses variantes outline y solid del mismo ícono en un archivo.
17. Tipifica ícones como componentes, no elementos: Usa LucideIcon, IconType, o React.ComponentType<SVGProps<SVGSVGElement>> para tipificar props de ícones para que puedas renderizarlos con <Icon size={…} />. Pasar un elemento renderizado en lugar de un tipo de componente rompe los botones envolventes reutilizables.
18. Marca proveedores IconContext como Client: IconContext.Provider de react-icons usa React Context y debe vivir en un Componente Cliente en el App Router. Colócalo lo suficientemente alto en el árbol para cubrir el subárbol que deseas estilizar.
19. Usa currentColor para SVGs personalizados: Establece stroke="currentColor" (o fill="currentColor") en ícones SVG en línea para que hereden color a través de clases padre text-*. Esto hace que un conjunto de ícones hecho a mano se comporte como Lucide o Heroicons.
20. Haz la accesibilidad de SVG explícita: Los ícones decorativos deben tener aria-hidden="true" y sin role; los ícones informativos necesitan role="img" más un aria-label. También escribe atributos SVG en camelCase (viewBox, strokeWidth) y mantén viewBox incluso después de la optimización de SVGO.
21. Establece intencionalmente los valores predeterminados de fill y stroke: SVG establece por defecto fill y stroke a negro, así que los ícones basados en stroke necesitan fill="none" e ícones rellenos necesitan stroke="none" para evitar renderización sorpresa. El comportamiento solo stroke de Lucide es un ejemplo concreto - fill no tiene efecto allí.
22. Genera blurDataURLs en tiempo de compilación: Produce BlurHash o pequeños JPEG blurDataURLs (alrededor de 8x8 píxeles) con anticipación y cachéalos con tus metadatos de imagen. Generarlos por solicitud con sharp añade latencia y no puede ejecutarse en el Edge Runtime.
23. Coincide las dimensiones del esqueleto con el contenido final: Los esqueletos shimmer o de relación de aspecto deben usar la misma relación de aspecto que la imagen cargada para que el diseño no cambie (CLS). Aplica CSS blur() solo a placeholders diminutos, nunca a imágenes de resolución completa.
24. Sigue las convenciones de archivos de metadatos de Next.js: Coloca favicon.ico en la raíz de app/, y suelta icon.*, apple-icon.*, opengraph-image.* y twitter-image.* en los segmentos de ruta donde deben aplicarse. Next.js los conecta en <head> automáticamente y alcanza las imágenes OG por ruta.
25. Diseña imágenes OG considerando los límites de Satori: ImageResponse de next/og usa Satori, que soporta solo flexbox (sin grid), sin background-image: url(), y requiere fuentes cargadas como ArrayBuffer. Apunta a 1200x630, exporta un alt, y prefiere runtime = "edge" para imágenes rápidas y cacheables por página.