Introducción
Tu web consume más ancho de banda del que debería y tu proveedor de hosting te avisa de que estás rozando el límite del plan. Revisas el tráfico y descubres que la mayoría no viene del texto ni de los scripts, sino de las imágenes: cada visita se descarga megabytes de fotos que están pensadas para monitores de escritorio y que se sirven tal cual a todos los dispositivos. Comprimir esas imágenes web es la forma más eficaz de reducir el consumo de ancho de banda sin tocar el diseño ni el contenido. En esta guía te explicamos cómo hacerlo de forma masiva y con resultados inmediatos.
Por qué ocurre esto
El ancho de banda de una web es la cantidad de datos que se transfieren del servidor al navegador de cada visitante. Las imágenes suelen representar entre el 60 y el 80 por ciento de ese ancho de banda, porque son los archivos más pesados de una página. Una página con cinco fotos de 2 MB cada una transfiere 10 MB por visita, y con 1000 visitas al día son 10 GB diarios solo en imágenes. El problema se agrava con fotos de móvil o réflex que se suben sin optimizar: pesan 5 o 8 MB cada una y se sirven completas a un móvil que solo muestra 1080 píxeles. Comprimir y redimensionar esas imágenes a dimensiones de web y a una calidad moderada reduce el peso entre un 60 y un 90 por ciento, lo que se traduce directamente en menos ancho de banda consumido, páginas más rápidas y menor coste de hosting. Es la optimización con mejor relación esfuerzo y ahorro.
3 soluciones
Solución 1: Comprimir y redimensionar todas las imágenes antes de subirlas. Pasa tus imágenes por el compresor por lotes de piczen, fija el lado más largo en 1920 píxeles y la calidad al 75-80 por ciento. El peso cae entre un 60 y un 90 por ciento.
Solución 2: Servir imágenes en formatos modernos como WebP. WebP pesa entre un 25 y un 35 por ciento menos que JPG a igualdad de calidad, lo que reduce aún más el ancho de banda.
Solución 3: Usar srcset para servir imágenes responsive. Genera varias resoluciones por imagen y deja que el navegador del móvil elija la más ligera, así un móvil no se descarga la versión de escritorio.
Guía paso a paso
Empieza identificando las imágenes más pesadas de tu web. Abre tu CMS o tu carpeta de imágenes y ordena por tamaño. Las que pesen más de 500 KB son las primeras candidatas. Descárgalas a una carpeta local. Abre el navegador y carga la herramienta de compresión por lotes. Arrastra la carpeta a la página. Pon el formato de salida en JPG o WebP si tu CMS lo soporta. Activa el redimensionado y fija el lado más largo en 1920 píxeles para imágenes a pantalla completa o 1200 para imágenes de contenido. Ajusta la calidad al 75 por ciento para fotos y al 80 por ciento si tienen texto. Pulsa Comprimir y descarga el zip. Sustituye las imágenes originales de tu web por las comprimidas. Si tu CMS soporta WebP, convierte también a ese formato para ahorrar un 30 por ciento adicional. Para ir más lejos, genera versiones de 1280 y 800 píxeles y configura srcset en el HTML para que el móvil reciba la más ligera. Mide el ancho de banda antes y después con tu panel de hosting: debería caer a la mitad o más.
Ventajas y desventajas
Comprimir las imágenes web es la forma más eficaz de reducir el consumo de ancho de banda sin tocar el diseño ni el contenido. Lo positivo es que el ahorro es inmediato y se traduce directamente en menor coste de hosting, páginas más rápidas y mejor posicionamiento en Google. El principal inconveniente es que hay que hacerlo con cada imagen nueva que se sube, así que conviene meterlo en el flujo de publicación. Convertir a WebP amplía el ahorro pero requiere que el CMS y el navegador del visitante lo soporten, algo hoy mayoritario. Usar srcset es la solución técnica más completa pero exige generar varias versiones y configurar el HTML. Para la mayoría de webs, comprimir y redimensionar a 1920 píxeles antes de subir es el equilibrio perfecto entre ahorro de ancho de banda y esfuerzo.