Introducción
Tu web carga lento en el móvil y no sabes por qué. Revisas el servidor, los plugins y el cache, y todo parece estar bien. Lo más probable es que el culpable sean las imágenes: la mayoría de webs sirven fotos pensadas para monitores de escritorio a usuarios que las ven en una pantalla de móvil de 1080 píxeles de ancho. Esos píxeles de más no se ven, pero se descargan, y son los que ralentizan la carga. Bajar la resolución de las imágenes es el cambio que más impacto tiene en la velocidad de navegación móvil. En esta guía te explicamos cómo hacerlo y por qué es tan efectivo.
Por qué ocurre esto
La navegación móvil se ve limitada por dos factores: la velocidad de la conexión y el peso de la página. En redes 4G o conexiones débiles, una página que pesa 5 MB tarda lo suyo en cargar, y la mayoría de ese peso viene de las imágenes. Una foto de cabecera de 4000 píxeles y 3 MB se sirve tal cual al móvil, que la escala a 1080 píxeles para mostrarla: se descargan megabytes que nunca se ven. El resultado es una página lenta, usuarios que rebotan y un posicionamiento en Google que se resiente, ya que el algoritmo premia la velocidad en móvil. Bajar la resolución de las imágenes a lo que realmente muestra el móvil, normalmente entre 1280 y 1920 píxeles de ancho, recorta el peso entre un 60 y un 80 por ciento sin que se note en la pantalla del dispositivo. La página carga en la mitad de tiempo y el usuario percibe la web como rápida y moderna. Es, con diferencia, la optimización con mejor relación esfuerzo y resultado.
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. Las imágenes pesan una fracción del original.
Solución 2: Servir imágenes responsive con srcset. Genera varias resoluciones por imagen y deja que el navegador del móvil elija la más ligera mediante el atributo srcset. Más trabajo pero máximo rendimiento.
Solución 3: Usar un plugin de optimización de imágenes del CMS. WordPress, Shopify y similares tienen plugins que comprimen y sirven versiones optimizadas automáticamente. Útil pero con menos control.
Guía paso a paso
Empieza por identificar las imágenes más pesadas de tu web. Abre tu CMS o tu carpeta de imágenes y ordena por tamaño de archivo. Las que pesen más de 500 KB son las primeras candidatas. Descarga esas imágenes a una carpeta local. Abre el navegador y carga la herramienta de compresión por lotes. Arrastra la carpeta de imágenes a la página. Pon el formato de salida en JPG. Activa el redimensionado y fija el lado más largo en 1920 píxeles, que cubre cualquier pantalla de móvil y la mayoría de portátiles. Ajusta la calidad al 75 por ciento para fotos y al 80 por ciento si la imagen tiene texto o detalles nítidos. Pulsa Comprimir y descarga el zip. Descomprímelo y sustituye las imágenes originales de tu web por las comprimidas. Comprueba la página en el móvil y mide el tiempo de carga: debería bajar a la mitad o más. Si usas srcset, genera también una versión de 1280 y otra de 800 píxeles para pantallas pequeñas y configura los atributos en el HTML.
Ventajas y desventajas
Bajar la resolución de las imágenes es la optimización que más impacto tiene en la velocidad de navegación móvil con el menor esfuerzo. Las páginas cargan en una fracción del tiempo, los usuarios rebotan menos y Google mejora tu posicionamiento. Lo positivo es que el resultado se nota de inmediato y no requiere tocar código ni cambiar de servidor. El principal inconveniente es que, si bajas demasiado la resolución, las imágenes se ven suaves en pantallas grandes de escritorio o retina, así que hay que encontrar el punto adecuado: 1920 píxeles suele ser seguro para la mayoría de casos. Servir imágenes responsive con srcset es la solución técnica más completa pero requiere 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 rapidez y calidad visual.