Una página sin imágenes puede parecer vacía, pero una con demasiadas se cargará lentamente, lo que podría dar lugar a una alta tasa de rebote. Kissmetrics informa de que el 40 % de los usuarios abandonará un sitio que tarde más de tres segundos en cargarse, y de que cada segundo adicional de retraso supone una pérdida del 7 % en las conversiones.
Una página con varias imágenes bien optimizadas puede cargarse más rápido que una con un único archivo de imagen grande. Encontrar ese punto intermedio en cuanto a las imágenes del sitio depende de varios factores, y hay diversas técnicas que pueden reducir los tiempos de carga de tus imágenes.
Echemos un vistazo a estos factores, a cómo puedes utilizarlos en tu beneficio y a qué límites debes respetar.
Prioridades del diseño de la página
A la hora de diseñar una página y elegir el número de imágenes que incluir en cada una, tu primera consideración será el propósito de la página. Si una imagen es crucial para respaldar el contenido de tu página, entonces debe quedarse; las imágenes no esenciales son candidatas a eliminarse o reducirse de tamaño.
No es el número de imágenes lo que es crítico, sino cuánto tardan en cargarse. Una página que tiene menos imágenes y se carga rápido podría llegar mejor a tu audiencia que una página de carga lenta llena de imágenes atractivas.
El diseño adaptable, que se refiere a lo bien que tu página se renderiza en distintos tamaños de pantalla, es esencial para los sitios modernos. Los dispositivos móviles suelen tener velocidades de datos más lentas que los ordenadores de escritorio, además de menos espacio en pantalla. Por eso, tiene sentido eliminar algunas imágenes al mostrar páginas en un dispositivo móvil.
Por ejemplo, una lista de elementos podría mostrar una imagen en miniatura junto a cada elemento en la versión de escritorio de tu sitio, pero la versión móvil podría beneficiarse tanto en apariencia como en velocidad si las omite.
Reducir el tamaño de las imágenes
Un archivo de imagen no debería tener dimensiones en píxeles significativamente mayores que la resolución máxima en la que se mostrará, ya que cualquier cosa por encima de eso es innecesaria. Tener un archivo de imagen para pantallas grandes y otro más pequeño para pantallas de teléfono acelerará la carga en móviles. Guardar un archivo JPEG con una calidad más baja reducirá su tamaño. Encontrar el equilibrio entre calidad y velocidad depende de cada propietario del sitio.
Si tus imágenes tienen el tamaño correcto y crees que ya estás listo para seguir, prueba a pasarlas por un servicio que las comprima, como TinyPNG o TinyJPG. Al comprimir tus imágenes, reduces el tamaño de sus archivos sin disminuir la calidad. Es una ventaja tanto para ti como para los visitantes de tu sitio.
Entregar imágenes más rápido
Una forma sencilla de hacerlo es mediante una red de distribución de contenido (CDN). Una CDN almacenará imágenes en una ubicación más cercana al usuario. Las guarda en caché en servidores perimetrales, que se sitúan entre el servidor web y el usuario. Un servidor perimetral geográficamente más cercano al usuario entregará los datos más rápido. También reduce la carga de acceso a archivos del servidor principal.
El CDN de imágenes de Jetpack ofrece este aumento de velocidad a los sitios que cumplen los requisitos sin requerir ningún esfuerzo más allá de una configuración única, y todos los sitios alojados en WordPress.com o conectados a Jetpack pueden usar esta función.
Ahorrar tiempo con la carga diferida
Otra forma de mejorar la velocidad de carga de las páginas es cargar las imágenes solo cuando se necesitan. A esto se le llama “carga diferida”, y resulta especialmente útil en páginas largas, como las páginas de inicio de blogs, en las que el usuario no tiene que desplazarse mucho hacia abajo para ver el contenido reciente.
Si una imagen no se encuentra en una parte de la página que se esté mostrando, no hay necesidad de cargarla hasta que aparezca al desplazarse. Los sitios de Jetpack pueden usar la función Carga diferida de imágenes para lograrlo. También te ofrece la flexibilidad de aplicar la carga diferida a todas las imágenes de tu sitio o desactivarla para imágenes o páginas concretas.
Limitar el número total de imágenes
No hay una respuesta definitiva sobre cuántas imágenes de un sitio web son “demasiadas.” Una página con 10 miniaturas podría ser razonable, mientras que una con tres archivos de imagen enormes podría ser excesiva. La métrica real a medir es el tiempo de carga.
Un objetivo razonable de tiempo de carga es de dos segundos (en una conexión de alta velocidad). Si tu sitio tarda de forma constante más que eso en cargarse, deberías plantearte seriamente reducir su contenido o acelerar su entrega.
La velocidad es lo más importante cuando se usan imágenes
El criterio para determinar un exceso de imágenes es el tiempo que tarda el navegador en cargar tus imágenes, no el número de imágenes que se muestran. La optimización del tamaño de las imágenes y su compresión pueden mantener bajos los tamaños de archivo, lo que permite una carga más rápida. Abordar el problema desde el otro lado, usar la caché y utilizar CDN también puede aumentar tus velocidades de entrega. Las mejoras en cada una de estas áreas pueden marcar la diferencia entre una experiencia de visualización agradable y una mala primera impresión.
¿Cuántas imágenes de un sitio web son demasiadas? Cuéntanos lo que piensas en la sección de comentarios.
Jetpack 