Como usuarios, habitualmente exigimos que los sitios web que visitamos carguen rápidamente y que nuestras preguntas sean respondidas directamente.
Esta es la razón por la que los motores de búsqueda dan prioridad a los sitios web con mejor velocidad de carga, especialmente en dispositivos móviles.
En muchos casos, las imágenes son el principal problema que afecta al tiempo de carga de un sitio web. Todos entendemos que las imágenes de alta calidad contribuyen a una experiencia de usuario positiva, pero la pregunta es si esta percepción está sobreestimada.
Un estudio de 2016 de Google y SOASTA confirmó que páginas web complejas con muchas imágenes tenían tasas de conversión más bajas que aquellas páginas con menor cantidad de imágenes.
Si bien algunos sitios web pueden beneficiarse de incorporar un mayor número de imágenes, deberíamos considerar la velocidad de carga de una página como un recurso escaso. Cuanto más dediquemos a añadir carga de recursos al proceso, menos efectivo será.
A continuación presentamos algunos consejos prácticos que ayudarán a una optimización de imágenes que no afecten la velocidad de carga, pero que a la vez conservan su UX.
Contenido
1. Utilizar imágenes responsivas
El diseño minimalista a menudo da lugar a una buena experiencia de usuario porque proporciona un mayor rendimiento, esto significa que debes preguntarte si una imagen es absolutamente crítica para tu diseño o no.
Para webs más dinámicas, puede ser tentador crear imágenes interactivas e incluso un punto focal en tu diseño.
A menos que seas fotógrafo, puedes aprovechar recursos alternativos en lugar de imágenes para mejorar tu UX, como por ejemplo:
- CSS3 para elementos interactivos.
- Gráficos vectoriales escalables para logotipos y diseños simples.
- Videos incrustados en lugar de GIFs voluminosos.
De hecho, las imágenes vectoriales tienden a mantener una mejor resolución cuando se cargan en dispositivos de alta resolución.
Además, en lugar de codificar el texto dentro de las imágenes, que los motores de búsqueda no pueden leer, podrías recurrir a fuentes web que mejoren la UX.
Google recomienda aplazar las imágenes fuera de pantalla para mejorar la carga. Básicamente, esto significa mover las imágenes por debajo de la primera vista para que al menos la carga inicial sea más rápida.
Para esto, existen algunos métodos que permiten optimizar la presentación de la ruta crítica, como la reducción de procesos, el almacenamiento en caché y la compresión de todos los recursos de la página (CSS, JavaScript, HTML).
Si bien esto puede parecer bastante complicado, existen múltiples herramientas que te permitirán realizarlo rápidamente si tu web esta creada en WordPress, por ejemplo.
2. Compresión automática de imágenes
Probablemente las dos mejores formas de optimizar imágenes para mejorar la velocidad de carga de tu sitio web son reducir su tamaño y comprimir sus archivos. La compresión de imágenes es increíblemente fácil con las herramientas adecuadas a tu disposición.
Si trabajas con WordPress, puedes instalar Imagify y comprimir todas tus imágenes de forma masiva en un solo click. A partir de ahí, todas las imágenes adicionales que se agreguen a tu biblioteca serán comprimidas por la misma herramienta automáticamente.
Si te preocupa que estos plugin reduzcan la velocidad de tu sitio o trabajas con un CMS de código más abierto, puedes utilizar Image Optim para comprimir todas las imágenes en una carpeta en particular. Sus características de arrastrar y soltar hacen que sea increíblemente fácil comprimir imágenes y luego agregarlas a tu sitio.
Además, si te preocupa comprimir imágenes en tu CMS y almacenar archivos demasiado grandes, puedes experimentar con la compresión de Adobe Suite o Affinity Photo.
Una cosa importante a tener en cuenta es que la compresión irreversible (lossy) puede traer como consecuencia sacrificar la calidad de tu imagen.
3. Utilizar formatos de nueva generación
Dependiendo del formato de tus archivos, tendrá que usar compresión reversible (lossless) o irreversible (lossy).
Tradicionalmente, nos hemos basado en dos formatos de imagen JPEG (irreversible) y PNG (reversible). Pero las herramientas han comenzado a recomendar nuevos formatos de imagen, especialmente para permitir mejores velocidades de carga y mantener relaciones de aspecto uniformes en dispositivos móviles.
Actualmente puedes elegir entre diversos nuevos formatos, incluidos JPEG 2000, JPEG XR y WebP.
JPEG 2000 es muy similar al JPEG tradicional, pero con una compresión reversible. Esto significa que los archivos JPEG 2000 comprimidos conservan sus metadatos sin perder mucho de su calidad.
JPEG XR es compatible con la compresión reversible e irreversible en relaciones de compresión más altas.
Desafortunadamente, estos dos formatos todavía no son compatibles con la mayoría de los principales navegadores, incluidos Google Chrome y Firefox. Esto significa que aún tendrás que mantener tener el formato JPEG o PNG como una alternativa de reserva.
El único formato de imagen que es compatible con Google Chrome, así como Firefox, es WebP. WebP ofrece compresión reversible e irreversible, así como soporte para animación.
Hay una variedad de complementos de WebP para experimentar y poder convertir un archivo JPEG o PNG a WebP usando un convertidor en línea o Photoshop.
En última instancia, la opción de servir imágenes en formatos de próxima generación no es demasiado atractiva aún considerando el soporte limitado de los navegadores.
Sin embargo, aprovechar formatos como WebP para dar a las imágenes de su sitio mayores relaciones de compresión y tamaños de archivo más pequeños en los dispositivos móviles hará una notable diferencia en la velocidad de tu página.
