Generador de imágenes responsivas (srcset y sizes)

Generador de imágenes responsivas (srcset y sizes): para qué sirve

Las imágenes responsivas hacen que el celular descargue una foto pequeña y la pantalla grande una mayor, lo que hace el sitio más rápido sin perder nitidez. Para eso se necesitan varios tamaños de la misma foto y el código con srcset y sizes.

Sube la imagen, elige los anchos, el formato y la calidad y descarga todas las versiones en un .zip. El código sale listo con srcset, sizes según el lugar de la imagen en la página, width y height para que el layout no salte, loading=lazy o fetchpriority=high (con preload) para la imagen principal, y opcionalmente <picture> con JPG de respaldo.

Cómo usar

1. Elige la imagen.
2. Define anchos, formato y dónde aparece.
3. Descarga el .zip y copia el código.

Cuándo usar

• Fotos de productos en tiendas.
• Imagen principal de landing pages.
• Galerías y blogs.

Preguntas frecuentes

¿Qué hacen srcset y sizes?

El srcset enumera las versiones de la misma imagen con el ancho de cada una (por ejemplo 640w, 1280w). El sizes indica cuánto espacio ocupa la imagen en la pantalla. Con los dos, el navegador elige la versión más pequeña que se vea nítida en esa pantalla, y el celular no descarga la foto de 2000 px.

¿Por qué width y height en la etiqueta?

Con width y height, el navegador reserva el espacio de la imagen antes de que cargue y el texto no salta hacia abajo cuando aparece la foto. Esto mejora el CLS, una de las métricas de Core Web Vitals de Google.

¿Cuándo usar loading=lazy?

En imágenes que quedan más abajo en la página. La imagen principal, visible apenas se abre la página, nunca debe tener lazy: lleva fetchpriority=high para cargar lo antes posible.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares