La velocidad de carga de tu página web tiene mucha importancia en el posicionamiento de los buscadores. Google otorga muchísima importancia a este factor y el tamaño de las imágenes de una web es una de las razones principales que afecta a la velocidad de carga. Por lo tanto, comprimir imágenes de una web es una de las maneras más eficientes de mejorar la velocidad de carga e incluso el posicionamiento.
La tarea de optimizar el tamaño de las imágenes de una web no es sencilla. Puede que sea la razón por la que es habitual encontrar webs con imágenes demasiado pesadas. Hay multitud de factores a tener en cuenta para optimizar imágenes. Los principales, la calidad de las imágenes, la resolución de los dispositivos y el formato de las imágenes
Calidad de las imágenes
El aspecto visual de una web es muy importante, no cabe duda. Pero, hay que guardar un compromiso razonable entre la calidad de las imágenes y su tamaño. Al fin y al cabo, si un usuario no llega a visitar la página porque la velocidad de carga es demasiado lenta, nunca llegarán a quedar impresionados por el aspecto de tu web. Es más, asociarán la marca a una imagen poco profesional y de mala calidad.
Por lo tanto, no es lo mismo la calidad necesaria para impresión en papel (alrededor de unos 300 ppi) o para web. La calidad recomendada para web suele ser de unos 72ppi. PPI, quiere decir pixels por pulgada (Pixels Per Inch).
Resolución de los dispositivos
Hace años que las páginas web se consumen en diferentes dispositivos, ya sean ordenadores, televisores, tablets o sobre todo teléfonos móviles. Hoy en día la mayoría de las tecnologías para construir webs proporcionan herramientas para adaptar el aspecto de una página al dispositivo en el que se está consumiendo (responsive).
Puede que una imagen se esté visualizando en 2 o 3 columnas en una resolución grande (ordenador por ejemplo) y en una única columna en un dispositivo con una resolución de anchura más pequeña (típicamente un móvil). O puede simplemente que aunque la disposición de pantalla sea la misma, la resolución del dispositivo no sea la misma. En estos casos, se deberían de usar imágenes con resoluciones diferentes dependiendo del dispositivo (si la tecnología lo permite). Si no es posible, se deberían dimensionar las imágenes a la resolución mínima que requiera el peor de los casos.
Vamos a explicar esto con un ejemplo. Supongamos que nuestra web tiene un ancho de contenido máximo de 1400px. Supongamos que la disposición en el ordenador (ancho mayor 1024px) y tablet (menor que 1024px) es de 2 columnas. En el móvil la disposición es de 1 columna (ancho menor que 761px). Por lo tanto, una imagen ubicada en una columna no debería de exceder de 760px de ancho ya que esa será la resolución máxima a la que visualizará (en el móvil). En la tablet no necesitaremos imágenes de más de 512px de ancho y 700px de ancho máximo en el ordenador.
Formato de las imágenes
El formato de las imágenes también influye en el tamaño de las mismas. Existen múltiples formatos de imagen como son JPEG, TIFF, FIG BMP… Simplificando mucho, JPEG y PNG son los formatos más populares para la web. PNG es un formato sin perdida de calidad y JPEG con pérdida de calidad. Son formatos que son interpretados por todos los navegadores. Normalmente se usa PNG cuando se necesita transparencia y buena calidad y JPEG cuando prima el tamaño. En los últimos años WebP se está haciendo muy popular. Este formato ha sido diseñado por Google para reemplazar a JPG y permite obtener muy buena calidad de imagen con un tamaño reducido. El mayor problema que tiene este tipo de formatos de imagen es que aún no están soportados por todos lo navegadores. Por esta razón, existen herramientas como Optimole. Este producto permite que se usen imágenes en formatos como JPG y que sea esta herramienta la que convierta las imágenes a formatos como WebP si el navegador del usuario lo interpreta.
Otros aspectos
Hay otras técnicas como el Lazy Loading que permiten acelerar la carga de webs ya que retrasan la llamada a la carga de la imagen o vídeo hasta que realmente sea necesario.
Comprimir imágenes en tu web
Independientemente si queremos implementar Lazy Loading, tener en cuenta la calidad de las imágenes, los formatos y resoluciones existen multitud de herramientas que facilitan la vida. En WordPress por ejemplo, existen multitud de plugins para implementar Lazy Loading como son: A3 Lazy Load, Speed Up Lazy Load etc. También existen múltiples plugins para comprimir imágenes como Smush o WWW Image Optimizer. También para gestionar imágenes de próxima generación con el plugin del ya mencionado Optimole.
En Uau Webs tenemos mucho cuidado en hacer webs que sean eficientes y visuales, pero, cuidando siempre su velocidad de carga y posicionamiento.
