Images on Commentary of Takao

Optimización de imágenes para rendimiento web

Tue, 15 Jul 2025 00:00:00 +0900

Las imágenes son el recurso más pesado y común en la web. Optimizarlas correctamente mejora LCP, CLS y la experiencia general.

Formatos modernos

AVIF: mejor compresión pero codificación lenta. WebP: equilibrio calidad/velocidad. JPEG XL: prometedor pero soporte limitado. Proporciona múltiples formatos con <picture>.

Carga responsive

srcset con diferentes tamaños. sizes para indicar el espacio que ocupa la imagen. El navegador selecciona la imagen óptima.

Lazy loading

loading="lazy" nativo para imágenes fuera del viewport. fetchpriority="high" para la LCP image. Intersection Observer para control granular.

Optimización de imágenes en 2024: Formatos, carga y mejores prácticas

Tue, 02 Jul 2024 00:00:00 +0900

Las imágenes son el recurso más pesado en la mayoría de sitios web. Optimizarlas mejora drásticamente LCP y la experiencia general.

Formatos modernos

WebP: soporte universal, compresión 30% mejor que JPEG. AVIF: hasta 50% mejor que JPEG, pero mayor coste de codificación. JPEG XL: prometedor pero soporte limitado.

Imágenes responsive

<picture> con <source> para formatos múltiples. srcset y sizes para diferentes resoluciones. El navegador selecciona la imagen óptima según la pantalla.

Optimización de imágenes con Next.js Image

Tue, 26 Mar 2024 00:00:00 +0900

Next.js Image component optimiza imágenes automáticamente: formatos modernos (WebP, AVIF), lazy loading, y dimensiones responsive.

next/image

import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" />

Optimización en tiempo de build o bajo demanda (servidor de optimización).

Formatos y calidad

Next.js sirve WebP o AVIF si el navegador lo soporta. quality (1-100, default 75). sizes para imágenes responsive. priority para LCP.

Remote patterns

Configura remotePatterns en next.config.js para permitir imágenes de dominios externos. Protege contra abusos del optimizador.