1. Clasifique la imagen antes de optimizarla
Haga un inventario de imágenes por plantilla. Registre el rol de cada imagen, su mayor y menor ancho renderizado, si está en el viewport inicial y si las pantallas pequeñas necesitan otro recorte. Esto convierte el trabajo de reducción de tamaño de archivo en decisiones que puede probar en páginas importantes.
Las fotos suelen tolerar compresión con pérdida revisada. Los logotipos, símbolos de interfaz, arte lineal y gráficos pueden convenir mejor en SVG o en un formato raster que proteja los bordes nítidos. SVG es apropiado para arte lineal, diagramas y gráficos, no para fotos detalladas.
Conserve el detalle esencial y proporcione texto que transmita el propósito de la imagen.
Use un texto alternativo vacío; no la convierta en la única fuente de información importante.
Nombre la acción o el destino, no simplemente los píxeles de la imagen.
2. Dimensione para la ranura renderizada y luego ofrezca candidatos responsivos
Haga coincidir las dimensiones intrínsecas con la ranura CSS. Un archivo a escala de escritorio en una tarjeta estrecha desperdicia transferencia; un raster pequeño estirado demasiado queda blando. Tenga en cuenta la relación de píxeles del dispositivo (device pixel ratio), pero valide visualmente en lugar de asumir que cada pantalla necesita el candidato más grande.
Para una composición única en varios anchos, use descriptores de ancho en srcset y use sizes para declarar el ancho real de la ranura. El navegador entonces elegirá un candidato. Use <picture> para art direction: un recorte en pantallas pequeñas que preserve el sujeto es distinto a simplemente reducir la imagen de escritorio. Mantenga un <img> de fallback con src y alt dentro de <picture>.
Misma composición, distintas dimensiones en píxeles.
Recorte o composición diferente cuando el escalado oculta el mensaje.
Mantenga src en <img> para clientes que no usan atributos responsivos.
3. Elija formato y compresión según las características de la imagen
WebP y AVIF pueden reducir la transferencia raster en casos apropiados, pero el formato no es una garantía de calidad. Pruebe rostros representativos, texturas finas, degradados de marca, texto incrustado y transparencias. JPEG sigue siendo un fallback común para fotos; PNG puede convenir para detalle raster sin pérdidas o transparencia. Verifique el soporte de AVIF y su encaje operativo con la audiencia y la pila de entrega.
La compresión con pérdida elimina información para ahorrar bytes y suele ser más tolerante en fotos detalladas que en líneas nítidas o texto. La compresión sin pérdidas preserva los píxeles codificados pero puede ahorrar menos. Elija la calidad mediante revisión lado a lado al tamaño renderizado, no por un ajuste numérico copiado. Elimine metadatos solo después de confirmar orientación, color y necesidades de flujo de trabajo.
Compare AVIF y WebP con pérdida, y JPEG como fallback, a tamaño de visualización.
Prefiera SVG adecuado o proteja los bordes nítidos raster mediante pruebas.
Confirme la apariencia del canal alfa en cada formato entregado y su fallback.
4. Haga que el marcado proteja la velocidad y la estabilidad del diseño
Asigne a cada <img> de contenido los atributos width y height que coincidan con su relación de aspecto intrínseca. El navegador puede reservar espacio antes de que llegue el archivo, reduciendo el movimiento de diseño. El CSS todavía puede establecer las dimensiones mostradas.
Use loading=lazy solo fuera del viewport inicial. No cargue con lazy una imagen que probablemente sea visible al cargar, en particular una candidata a Largest Contentful Paint. LCP (Largest Contentful Paint) es el tiempo de renderizado de la imagen, bloque de texto o video más grande visible en el viewport. fetchpriority=high es solo una pista relativa; aplíquela con moderación y mida el resultado. Use el marcado HTML de imagen para contenido que necesite texto alternativo o descubrimiento; Google documenta que no indexa imágenes aplicadas únicamente vía CSS.
Establezca width y height, incluidas las imágenes de galerías cargadas con lazy.
Mantenga eager las imágenes probables de LCP e inspeccione la prioridad de solicitud.
Cargue con lazy las imágenes offscreen y pruebe el desplazamiento en una red limitada.
5. Preserve el significado, el descubrimiento y la calidad visual
El texto alternativo depende del propósito y el contexto. Describa la información esencial para una imagen informativa, use alt="" para decoración y nombre la función de una imagen enlazada o en un botón. Para un gráfico o diagrama complejo, proporcione una explicación equivalente en texto cercano. No use listas de palabras clave.
Para imágenes detectables, use elementos de imagen HTML estándar, texto relevante cercano, nombres de archivo descriptivos cortos cuando sea práctico, y un source de fallback con marcado responsivo. No convierta fondos decorativos en contenido redundante solo para facilitar el descubrimiento.
Revise los archivos comprimidos en los tamaños más grandes y más pequeños previstos.
Prefiera texto normal; si no es posible, proporcione la redacción equivalente.
Coloque las imágenes informativas cerca del texto pertinente de la página.
6. Verifique la página, no solo el activo
Pruebe páginas representativas en viewports estrechos y anchos. En las herramientas de desarrollo del navegador, inspeccione el candidato elegido por srcset, el tamaño transferido, las dimensiones renderizadas y el movimiento del diseño. Reduzca la velocidad de la red para revelar imágenes hero tardías y galerías lentas. Una comparación de exportación no puede revelar un valor sizes inexacto, un recorte inesperado o un problema de transformación en producción.
Use señales de laboratorio y de campo cuando estén disponibles. Lighthouse y PageSpeed Insights pueden identificar imágenes con tamaño inadecuado; LCP de campo refleja visitas reales a lo largo del tiempo. Compare la misma plantilla, clase de dispositivo, versión de lanzamiento y ventana de medición. No atribuya cambios en métricas a las imágenes cuando también hayan cambiado tiempo de servidor, scripts, fuentes o terceros. Etapele los cambios en plantillas compartidas y mantenga una ruta de reversión hasta que estén validados.
Confirme que la ranura no seleccione un candidato inesperadamente sobredimensionado.
Compruebe recorte, nitidez, color, alternativas y estabilidad del diseño.
Nombre al propietario, la señal esperada y la vía de reversión.