jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas HTML

Gratis Constructor de atributos de carga de imagen

Crea etiquetas img optimizadas combinando loading, decoding y fetchpriority.

Cargando herramienta...

Qué es Constructor de atributos de carga de imagen?

Las etiquetas img modernas se benefician de varios atributos de rendimiento usados conjuntamente: loading controla la carga perezosa, decoding controla como se decodifica la imagen y fetchpriority senaliza la importancia. Usarlos correctamente juntos es mejor que configurarlos de forma aislada.

Respuesta rápida

Use loading='lazy' para imagenes debajo del pliegue para diferir la carga hasta que el usuario se desplace cerca de ellas. Use loading='eager' u omita el atributo para imagenes sobre el pliegue que deban cargarse inmediatamente.

Last updated: 2026-05-25

Limitaciones

  • La carga perezosa difiere las solicitudes de imagenes pero no reduce el peso total de la pagina: las imagenes aun se descargan cuando se desplazan a la vista.
  • El navegador reserva espacio de marcador de posicion para las imagenes perezosas incluso antes de que se carguen, lo que puede afectar el diseno si faltan los atributos width y height.
  • Usar loading='lazy' en imagenes sobre el pliegue puede retrasar el LCP y perjudicar la experiencia del usuario.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija el caso de uso de la imagen que coincida con donde aparece la imagen en la pagina.
  2. La herramienta establece la combinacion de atributos recomendada para ese caso de uso.
  3. Ingrese la ruta de la imagen, las dimensiones y el texto alternativo.
  4. Copie la etiqueta img completa en su pagina.

Para qué puedes usarla

  • Construir una img hero con loading='eager', decoding='sync' y fetchpriority='high'.
  • Crear imagenes de articulo con carga perezosa usando loading='lazy' y decoding='async'.
  • Optimizar galerias de miniaturas con atributos de loading y decoding adecuados.

Casos de uso

Ejemplos prácticos

Ejemplo

Etiqueta de imagen hero LCP

Una imagen hero LCP recibe loading='eager', decoding='sync' y fetchpriority='high' para la renderizacion mas rapida posible.

Ejemplo

Imagen de articulo debajo del pliegue

Una imagen de articulo debajo del pliegue recibe loading='lazy', decoding='async' y sin fetchpriority para evitar competir con recursos criticos.

Errores comunes

  • Usar loading='lazy' en la imagen LCP, lo que la retrasa significativamente.
  • Configurar decoding='sync' en cada imagen en lugar de solo en las criticas.
  • Usar fetchpriority='high' en multiples imagenes, lo que diluye la sugerencia de prioridad.

Verificación

  1. Abra el panel Network de Chrome DevTools y desplace la pagina para confirmar que las imagenes perezosas solo se cargan cuando entran al viewport.
  2. Revise el panel Performance y verifique que las imagenes sobre el pliegue con loading='eager' aparezcan en la cascada de solicitudes inicial.

FAQ

Preguntas sobre Constructor de atributos de carga de imagen

Cuando deberia usar loading='lazy'?

Para imagenes que estan debajo del pliegue y no son esenciales para la renderizacion inicial de la pagina. Nunca lo use en la imagen LCP.

Que hace decoding='async'?

Indica al navegador que decodifique la imagen de forma asincrona, permitiendo que otro contenido se renderice primero antes de que la imagen termine de decodificarse.

Que es la imagen LCP y por que no deberia aplicarle carga perezosa?

LCP (Largest Contentful Paint) es una metrica de Core Web Vitals que mide cuando se renderiza el elemento de contenido visible mas grande. La imagen LCP es tipicamente la imagen hero o el visual principal en la parte superior de la pagina. Agregar loading='lazy' a la imagen LCP retrasa su carga hasta que el navegador calcula que esta cerca del viewport, pero como ya esta en el viewport al cargar, el calculo mismo agrega demora innecesaria y perjudica la puntuacion LCP.

Que sucede si uso loading='lazy' en una imagen dentro de un contenedor de desplazamiento o carrusel?

El umbral de carga perezosa se mide en relacion al viewport, no al contenedor de desplazamiento. Las imagenes en un carrusel o contenedor con overflow:scroll pueden no cargarse hasta que el contenedor mismo se desplace, y el navegador puede no detectar que las imagenes estan cerca de verse. Para imagenes de carrusel, considere eager loading o use JavaScript para cargar imagenes segun la posicion de desplazamiento del componente.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también