Suelta tus fotos y gráficos para obtener copias WebP, AVIF y JPG con los anchos que necesitan tus páginas, sin datos de cámara. Mira cuánto más pequeña queda cada una, descárgalas todas en un .zip y pega el código srcset. Tus imágenes nunca salen de este dispositivo. Es gratis.
Cómo optimizar imágenes para un sitio web, paso a paso
- Elige imágenes o suéltalas en la página. Funcionan archivos JPG, PNG, WebP, AVIF y GIF.
- Marca los Anchos que quieras, de 480 a 2560. Las imágenes nunca se hacen más grandes que el original.
- Elige los Formatos: AVIF, WebP, un JPG de respaldo y PNG para imágenes transparentes.
- Fija la Calidad, el atributo sizes y la Carpeta de imágenes de tu sitio y pulsa Rehacer con estos ajustes si los cambias.
- Compara Antes y Después y luego pulsa Descargar todo (.zip).
- Copia el código picture de cada imagen y pégalo en tu página.
¿Por qué varios anchos?
Un teléfono no necesita la misma foto de 2000 píxeles que un monitor grande. Con srcset indicas varios anchos y el navegador elige el más pequeño que aún se vea nítido en esa pantalla. El atributo sizes le dice cuánto ancho tendrá la imagen, para que pueda elegir antes de que la página termine de maquetarse.
¿AVIF, WebP o JPG?
AVIF suele ser el más pequeño, WebP le sigue de cerca y funciona en todos los navegadores actuales, y JPG es el respaldo seguro. El código de imagen los ofrece en ese orden, para que cada navegador tome el mejor que entienda. Las imágenes transparentes reciben un respaldo PNG en lugar de JPG para conservar la transparencia. Si un formato aparece en gris, este navegador no puede crearlo; los demás formatos siguen funcionando.
Qué se quita
Cada imagen se vuelve a dibujar y a guardar desde cero, así que se omiten los datos de la cámara, la ubicación GPS, el historial de edición y los perfiles de color incrustados. Las fotos tomadas de lado se giran primero. Una calidad de 75 a 82 es un buen equilibrio para fotos; los gráficos con bordes marcados pueden verse mejor un poco más alta.
Por qué importa
- Las imágenes más pequeñas hacen que las páginas carguen más rápido, sobre todo en teléfonos.
- Las páginas más rápidas son más fáciles de usar y suelen posicionarse mejor en las búsquedas.
- Quitar los datos de ubicación protege la privacidad de las personas y los lugares de tus fotos.
- Las imágenes del tamaño justo ahorran ancho de banda a ti y a tus visitantes.
Quién lo usa
Blogueros, dueños de tiendas, fotógrafos y desarrolladores que quieren imágenes nítidas que carguen rápido. Para una sola imagen con un tamaño de archivo concreto, usa el compresor de imágenes, y para cambiar el tipo de archivo, el convertidor de imágenes.
Preguntas
¿Qué calidad debo elegir?
De 75 a 82 es un buen equilibrio para fotos. Súbela un poco para gráficos con bordes nítidos.
¿Necesito AVIF si tengo WebP?
AVIF suele ser más pequeño, y el código picture recurre a WebP y JPG para los navegadores que no pueden mostrarlo.
¿Se suben mis imágenes?
No. Se procesan en tu navegador.