Tomó una foto con su teléfono, pesa varios megabytes y está a punto de subirla a su sitio web. Quizás su sitio se siente lento, o un informe de velocidad señaló sus fotos, o simplemente no quiere cometer un error antes de publicar. La buena noticia es que usted mismo puede comprimir las imágenes de su sitio web, gratis, en pocos minutos y sin aprender cómo funcionan los archivos de imagen. El trabajo tiene dos partes. Cambiar el tamaño modifica cuántos píxeles de ancho tiene la foto. Comprimir modifica cuántos bytes se necesitan para guardar esos píxeles. Haga ambas cosas antes de subir la foto, revise una página después, y habrá resuelto la mayor parte de lo que vuelve lento a un sitio por culpa de las fotos. A continuación encontrará un ancho de referencia, un formato para cada tipo de imagen, una herramienta gratuita y una prueba rápida.
Puntos clave
Haga la foto de 1.5 a 2 veces el ancho con el que se mostrará, no el ancho que produjo su teléfono.
JPEG, WebP o AVIF para fotos, y deje PNG para logotipos, transparencias y dibujos de líneas nítidas.
Pase la página por la prueba de velocidad gratuita de Google, porque una imagen más pequeña no arregla una página lenta cuyo retraso viene de otro lado.
¿Qué tamaño debe tener una imagen en un sitio web?
No existe un tamaño único que sirva para todas las imágenes. El ancho correcto depende del lugar de la página donde se muestre la imagen. Una foto en una columna de 600 píxeles de ancho necesita muchos menos píxeles que un banner que ocupa toda una pantalla grande.
Un punto de partida práctico viene de web.dev de Google y de WordPress.com: cambie el tamaño de una imagen de contenido típica a más o menos 1.5 a 2 veces el ancho con el que se muestra. Los píxeles adicionales la mantienen nítida en pantallas de teléfonos y laptops de alta densidad. El ejemplo de WordPress.com es una imagen de 1,200 píxeles para una columna de contenido de 600 píxeles. La nitidez no es la única razón para detenerse en esa cifra. Web.dev de Google explica que enviar a un teléfono una imagen del tamaño de un escritorio puede consumir de 2 a 4 veces más datos de los que el teléfono necesita.
Para saber el ancho con el que se muestra, revise la plantilla de su página o pregunte a su diseñador web qué tan ancha es la columna de contenido. Si no lo sabe, 1,200 píxeles de ancho es un tope razonable para una foto dentro de un área de contenido normal. Los banners de ancho completo necesitan más. Ignore el ajuste de DPI que pueda ver en los editores de fotos, porque el DPI importa para la impresión y no para el tamaño con el que se ve una imagen en un navegador. Lo que cuenta es el ancho en píxeles y el peso del archivo.
¿Qué formato de imagen debo usar: JPEG, WebP o AVIF?
Para fotografías sirve cualquiera de los tres, y la elección depende de la compatibilidad y de la comodidad. MDN describe WebP como ampliamente compatible y AVIF como muy eficiente, pero con necesidad de una alternativa donde un navegador no pueda mostrarlo. JPEG funciona en todas partes.
| Tipo de imagen | Buena opción | Por qué |
|---|---|---|
| Foto de teléfono o de cámara | JPEG o WebP | Archivos pequeños que aún se ven bien al tamaño normal de visualización |
| Foto cuando su plataforma lo permite | WebP o AVIF | Archivos más pequeños que JPEG con calidad similar, con una alternativa JPEG para navegadores antiguos |
| Logotipo o gráfico con transparencia | PNG o WebP | Mantiene limpios los bordes transparentes |
| Dibujo de líneas nítidas o texto dentro de una imagen | PNG | Evita el desenfoque de la compresión en los bordes finos |
Usar PNG para una foto común es un error frecuente. Produce un archivo mucho más grande que JPEG o WebP y no le da nada visible a cambio. Además, que un archivo se llame WebP no prueba que la imagen tenga el tamaño correcto. Un WebP de 4,000 píxeles de ancho aún puede ser demasiado grande.
Si su sitio lo construyó un desarrollador, existe una opción de código HTML que permite al navegador probar primero una versión AVIF o WebP y recurrir a JPEG si no puede. Usted no necesita escribir eso en un constructor de sitios web. El constructor normalmente se encarga de la conversión, que se trata en una sección posterior.
¿Cuál es la herramienta gratuita más fácil para cambiar el tamaño y comprimir fotos?
Squoosh, una herramienta gratuita de navegador de Google Chrome Labs, es el lugar más fácil para empezar. Su propio sitio dice que reduce el tamaño del archivo manteniendo la calidad, y procesa las imágenes en su dispositivo, así que las fotos no salen de su computadora. Puede cambiar el tamaño, ajustar la calidad y exportar como JPEG, WebP o AVIF.
Una rutina que funciona para la mayoría de las fotos:
- Abra Squoosh y arrastre la foto.
- Active la opción de cambiar el tamaño y fije el ancho en más o menos el doble del ancho con el que se mostrará la imagen.
- Elija JPEG o WebP como formato de salida.
- Baje el control deslizante de calidad hasta que apenas empiece a notar una diferencia en la vista previa, y luego súbalo un poco.
- Compare los dos lados de la vista previa al tamaño normal de visualización, no con acercamiento.
- Descargue el archivo nuevo y suba ese a su sitio.
Si prefiere un programa en su computadora, GIMP es un editor de escritorio gratuito para Windows, macOS y Linux con más control sobre las dimensiones y la calidad JPEG. ImageMagick es una herramienta de línea de comandos para procesar una carpeta entera a la vez, y le conviene más a un desarrollador que a un dueño de negocio.
No persiga una meta fija de peso de archivo, como 100 KB. Esa cifra puede servir para una miniatura pequeña y ser poco realista para una foto grande de portada. Juzgue el resultado por cómo se ve la imagen a su tamaño real en la página.
¿Mi constructor de sitios web comprime las imágenes por mí?
A menudo, y solo en parte. Las plataformas manejan las subidas de forma distinta, y vale la pena saber lo que dicen al respecto antes de decidir cuánto trabajo hacer a mano.
| Plataforma | Lo que dice que hace | Qué revisar |
|---|---|---|
| Wix | Ajusta el tamaño de las subidas para mejorar la calidad y el tiempo de carga, y comprime automáticamente las imágenes de menos de 25 MB | Si los originales muy grandes aún hacen más lenta la edición y el almacenamiento |
| Squarespace | Convierte las subidas a WebP de forma predeterminada y crea anchos adaptables de 100 hasta 2,500 píxeles, conservando el original en la biblioteca de recursos | Si su original es mucho más grande que cualquier ancho que necesite |
| Webflow | Crea variantes adaptables para muchas imágenes JPG, PNG y WebP dentro del contenido y ofrece conversión a WebP o AVIF | Las imágenes de fondo y las de texto enriquecido, que su sistema adaptable no cubre en todos los casos |
| WordPress.com | Ofrece opciones de optimización automática | Cambiar el tamaño antes de subir, algo que su propia guía aún recomienda |
La automatización no convierte una foto original del teléfono en lo correcto para subir. Sigue siendo prudente cambiar el tamaño y comprimir antes de subir, porque un archivo inicial más pequeño le da menos trabajo a la plataforma y deja su biblioteca de imágenes más ordenada. Las páginas de ayuda de Wix, Squarespace, Webflow y WordPress.com explican los detalles de su plan.
¿Cómo compruebo que las imágenes más pequeñas sí ayudaron?
Pruebe la página antes y después. PageSpeed Insights es gratis y toma un minuto. Una rutina de diez minutos:
- Escriba la dirección de su página de inicio y ejecute primero la prueba para móvil.
- Baje hasta las oportunidades y los diagnósticos y busque elementos sobre imágenes, como «Ajustar el tamaño adecuado de las imágenes», «Publicar imágenes con formatos de nueva generación» y «Codificar imágenes de forma eficaz».
- Encuentre la imagen más grande de la página y anote su ancho en píxeles y su peso.
- Compare ese ancho con el ancho con el que se muestra en la página.
- Reemplace una imagen por su versión con el tamaño ajustado y comprimida.
- Ejecute la prueba otra vez y mire la línea de esa imagen.
Hay una advertencia. Google define Largest Contentful Paint, o LCP (en español, «pintura del contenido más grande»), como el tiempo que tarda en mostrarse la imagen, el bloque de texto o el video visible más grande. Un buen LCP es de 2.5 segundos o menos en el percentil 75, y más de 4 segundos es malo, según la guía de LCP de web.dev. Si la imagen grande es su elemento LCP, reducirla puede acortar el tiempo. Pero la guía para optimizar el LCP de web.dev señala que los retrasos también vienen de que el navegador descubre la imagen tarde, de CSS y JavaScript que bloquean la presentación, y de una respuesta lenta del servidor. Si sus fotos ya son pequeñas y la página sigue lenta, la causa está en otro lado. Nuestra publicación sobre por qué un sitio web carga lento repasa esas causas.
¿Cuándo debo hacerlo yo mismo y cuándo pedir ayuda?
Para unas pocas fotos nuevas, hágalo usted mismo. Squoosh con la rutina de arriba lo cubre, y pagarle a alguien por una sola imagen no vale la pena.
La ayuda empieza a tener sentido cuando el trabajo crece o la causa es más difícil de ver:
- Una biblioteca de medios grande, llena de fotos demasiado pesadas que hay que reemplazar página por página.
- Imágenes de fondo que su plataforma no ajusta como lo hace con las imágenes normales.
- Un sitio sin código de imágenes adaptables, de modo que todos los visitantes reciben el mismo archivo grande.
- Imágenes de productos en una tienda en línea, donde cientos de fotos y sus variantes necesitan el mismo tratamiento.
- Una página lenta donde el problema de LCP resulta no ser la imagen.
Las correcciones pequeñas, como convertir fotos PNG a JPEG o bajar un ajuste de calidad demasiado alto, toman minutos. Arreglar el código de imágenes adaptables, las imágenes de fondo o un servidor lento es trabajo de desarrollo. Nuestra guía sobre cuánto cuesta el mantenimiento de un sitio web muestra cómo suele cobrarse ese tipo de limpieza recurrente.
Repaso rápido: ¿están listas las imágenes de su sitio para subirse?
Elija una respuesta para empezar.
1. Una columna de 600 píxeles de ancho mostrará su foto. ¿De qué ancho debería ser el archivo, aproximadamente?
2. ¿Qué formato es más adecuado para un logotipo transparente?
3. Redujo todas las fotos y la página sigue lenta. ¿Cuál es el siguiente paso sensato?
Preguntas frecuentes sobre cómo comprimir imágenes para un sitio web
¿Cuál es la mejor forma de comprimir imágenes para un sitio web?
Cambie el tamaño de la foto a 1.5 a 2 veces el ancho con el que se muestra, expórtela como JPEG o WebP, y baje la calidad hasta que apenas note una diferencia, y luego súbala un poco. Squoosh hace todo esto gratis en su navegador.
¿Puedo subir fotos del iPhone directamente a mi sitio web?
Puede, y algunas plataformas las reducirán por usted. Aun así, una subida directa del teléfono es mucho más grande de lo que la página necesita, así que cambiar el tamaño y comprimir primero da una página más ligera y una biblioteca de medios más ordenada.
¿WebP es mejor que JPEG?
Para fotos, WebP y AVIF pueden producir archivos más pequeños que JPEG con calidad similar, y MDN describe WebP como ampliamente compatible. AVIF necesita una alternativa donde un navegador no pueda mostrarlo. JPEG sigue siendo la opción segura en todas partes.
¿Qué peso debe tener una imagen de un sitio web?
No hay un límite universal. Una miniatura pequeña y un banner de ancho completo necesitan cantidades distintas de datos. Ajuste el tamaño al ancho de visualización, comprima hasta que la calidad aún se vea bien al tamaño normal y compare el resultado en PageSpeed Insights.
¿Comprimir las imágenes siempre hace más rápido mi sitio web?
Acorta el tiempo de transferencia de esas imágenes, lo cual puede ayudar al LCP cuando la imagen es el elemento más grande. Si el retraso real viene del descubrimiento tardío, del CSS o JavaScript que bloquea, o de un servidor lento, las imágenes más pequeñas no lo arreglarán.
¿Importa el DPI en el tamaño de la imagen?
No. En los sitios web, lo que cuenta son las dimensiones en píxeles y el tamaño del archivo en bytes. El DPI afecta sobre todo a la impresión.
Hacia adelante
Preparar una imagen para un sitio web es una rutina corta: cambie el tamaño a más o menos el doble del ancho de visualización, elija JPEG o WebP para fotos y PNG para logotipos y gráficos nítidos, comprima con una herramienta gratuita como Squoosh y mire el resultado al tamaño normal. Su constructor de sitios web puede agregar su propia optimización encima, pero un original más ligero sigue ayudando.
Luego pruebe la página en PageSpeed Insights. Si su imagen más grande era el problema, lo verá en el informe. Si la página sigue lenta cuando las imágenes ya son pequeñas, la causa está en otro lado, y vale la pena encontrarla antes de dedicar tiempo a más compresión.
Si tiene una biblioteca grande de fotos demasiado pesadas, imágenes de fondo que no se reducen o una página que sigue lenta, Web Leveling puede encontrar la causa con usted. Nuestro trabajo de mantenimiento de sitios web incluye la limpieza de imágenes y las correcciones de velocidad que la acompañan. Si unos minutos gratis en Squoosh resuelven su problema, también se lo diremos. Trabajamos con pequeñas y medianas empresas en todo el país y en el extranjero. Cuéntenos qué páginas se sienten lentas y le ayudaremos a definir el siguiente paso.
Términos
Palabras sobre imágenes en esta publicación
Toque un término para ver qué significa.
Cambiar el tamaño. Modificar cuántos píxeles de ancho y de alto tiene una imagen.
Comprimir. Reducir el número de bytes que ocupa un archivo de imagen, normalmente bajando un poco la calidad.
JPEG. Un formato común para fotos que funciona en todos los navegadores.
WebP. Un formato de imagen más nuevo que hace archivos más pequeños que JPEG y funciona en la mayoría de los navegadores.
AVIF. Un formato de imagen muy eficiente que necesita una alternativa donde un navegador no lo admite.
LCP. Largest Contentful Paint, el tiempo que tarda en aparecer la imagen, el bloque de texto o el video visible más grande.
