Generador de srcset

Generador de srcset: HTML de imágenes responsive con sizes | We.Inc

Generador de srcset gratis. Introduce el nombre de tu imagen, los anchos que exportaste y el ancho con el que se muestra para obtener HTML img responsive con srcset, sizes, width y height.

Generador de srcset

Introduce el nombre base de tu imagen, los anchos a los que la exportaste y el ancho con el que se ve en la página, y obtén una etiqueta img completa con srcset, sizes, width, height y carga diferida. Así los móviles descargan un archivo pequeño y las pantallas grandes uno nítido, una de las formas más sencillas de que una página con muchas imágenes cargue más rápido.

Exporta tu imagen en varios anchos y nombra los archivos con el ancho al final, como hero-480.webp, hero-800.webp y hero-1200.webp.
Escribe el nombre base (hero, o una ruta como images/hero), elige el formato y enumera los anchos. El orden y los duplicados no importan.
Describe el ancho de visualización en la casilla sizes, por ejemplo '(max-width: 768px) 100vw, 50vw' para una imagen que ocupa todo el móvil y la mitad de las pantallas grandes.
Define la relación de aspecto para que width y height se escriban en la etiqueta y copia el HTML en tu página.

Con tres a cinco anchos suele bastar. Cada ancho extra es otro archivo que exportar y guardar, con un ahorro cada vez menor.
Incluye un ancho de aproximadamente el doble del tamaño máximo de visualización para que las imágenes se vean nítidas en pantallas de alta densidad. Una imagen mostrada a 600 píxeles de ancho necesita un archivo de 1200 píxeles para esas pantallas.
Deja la carga diferida desactivada en la imagen principal de la parte superior de la página. Debe empezar a descargarse enseguida; la carga diferida es para las imágenes más abajo.
Si sizes es incorrecto, el navegador elige el archivo equivocado. Mide cuánto ocupa realmente la imagen en varios anchos de pantalla antes de escribirlo.

Preguntas frecuentes

¿Qué hacen srcset y sizes?

srcset enumera los archivos con su ancho real, escrito como 'archivo 800w'. sizes indica al navegador con qué ancho se mostrará la imagen. El navegador multiplica el ancho de visualización por la densidad de píxeles de la pantalla y descarga el archivo más pequeño que tenga al menos ese ancho. Con sizes='50vw' en una pantalla de 1000 píxeles de ancho con densidad 2x, necesita 1000 píxeles y elige el archivo 1200w si el siguiente más pequeño es 800w.

¿Por qué añadir width y height?

Permiten al navegador reservar el espacio correcto antes de que llegue la imagen, para que el texto de debajo no salte al cargarse. La herramienta escribe el ancho mayor y el alto que corresponde a tu relación de aspecto; un CSS como max-width: 100%; height: auto; sigue haciendo que la imagen se reduzca para encajar.

¿Qué archivo se usa como src?

El de mayor ancho. Los navegadores que entienden srcset ignoran src al elegir, y el raro navegador que no lo entienda mostrará una imagen nítida en lugar de una borrosa.

¿Qué valor de sizes uso para una imagen a todo el ancho?

Usa 100vw. Para una imagen dentro de una columna de contenido que se detiene en 800 píxeles, usa '(max-width: 800px) 100vw, 800px', que se lee así: en pantallas de hasta 800 píxeles de ancho la imagen ocupa todo el ancho de la pantalla; en las demás mide 800 píxeles.

¿Esto redimensiona mis imágenes?

No. Escribe el HTML para archivos que ya exportaste. Usa un compresor de imágenes o tu herramienta de diseño para exportar cada ancho.

Descriptores de ancho frente a descriptores de densidad

srcset admite dos tipos de descripción. Los descriptores de ancho (480w, 800w) indican el ancho real en píxeles de cada archivo y funcionan junto con sizes, lo que va bien con imágenes que cambian de tamaño con el diseño. Los descriptores de densidad (1x, 2x) indican qué archivo usar en pantallas normales y de alta densidad, y van bien con imágenes de tamaño fijo, como un logotipo.
No se pueden mezclar ambos en un mismo srcset, y usar descriptores de ancho sin sizes hace que el navegador suponga que la imagen ocupa todo el ancho de la pantalla. Ese segundo error es frecuente y envía en silencio archivos grandes a todos los visitantes, así que combina siempre los descriptores w con un valor de sizes realista.

Cómo comprobar que se carga el archivo correcto

Abre la página en un navegador de escritorio, abre las herramientas para desarrolladores y mira la lista de imágenes en la pestaña de red; después estrecha la ventana y recarga. En anchos estrechos debería cargarse un archivo más pequeño. Algunos navegadores se quedan con un archivo grande que ya tienen en lugar de descargar uno menor, así que prueba en una ventana privada o con la caché desactivada.
Si siempre se carga el archivo más grande, revisa primero sizes: un valor ausente o demasiado grande es la causa habitual. Después comprueba que los números de srcset coinciden con el ancho real de los archivos; un archivo llamado hero-800 que en realidad mide 1600 píxeles se sigue descargando a 1600.

Generador de srcset