¿Cómo optimizar imágenes y mejorar la carga de tu sitio web?

La optimización de imágenes es un factor muy importante para un obtener un buen rendimiento y velocidad de carga en nuestro sitio web, muchas veces es pasado por alto pero para nadie es un secreto que si bajas el peso de tus imágenes tu sitio web será más rápido y liviano. Con esto tendrás un punto a favor dentro de tu estrategia de posicionamiento web y mejorarás el nivel de experiencia de usuario. Los gráficos constituyen la mayor parte del peso en una web, por lo que debe ser de suma relevancia optimizar imágenes de forma correcta.

La optimización SEO de imágenes

¿En qué consiste optimizar las imágenes de una web? Es sencillo, cuando un usuario o robot acceden a una página web específica, la optimización reduce y mejora el proceso de descarga de una imagen, haciéndolo rápido y amigable.

El peso y el tamaño de la imagen son los 2 factores principales en el que se basa el proceso de mejorar la carga de imágenes, entre otros tantos menos relevantes.

Velocidad de carga del sitio web

Con la correcta optimización de imágenes por peso y tamaño, llegaremos con efectividad a acelerar la velocidad de descarga de una página al ingresar a ella. En consecuencia, al servidor que aloja nuestra página web le costará mucho menos trabajo la descarga de todos los elementos que la conforman.

Beneficios de la optimización de imágenes para el posicionamiento web

Una vez se hayan mejorado y reducido los tiempos de descarga de las imágenes, mejoraremos considerablemente la satisfacción de experiencia de usuario y nuestro posicionamiento web.

Al acelerar la velocidad de descarga, se va a lograr que el usuario vea la página antes y permanezca allí, evitando a toda costa la probabilidad del “rebote”, en donde los usuarios llegan a una página y se van sin realizar ninguna acción en concreto. Asimismo, lograremos mejorar nuestro posicionamiento web mediante el rastreo fácil y sin mayor trabajo de nuestra página web por parte de las arañas de Google, de forma que reciban una mejor experiencia web y  apunten a posicionarla mejor. Además, les queda tiempo para rastrear otras páginas internas a través del interlinking.

Variables fundamentales para la optimización de imágenes

¿Qué se necesita saber para aprender a optimizar correctamente las imágenes de nuestro sitio web? Existen 3 aspectos esenciales a tomar en cuenta:

• PNG:

  Brindan alta calidad de imagen, pero los archivos suelen ser pesados. Sin embargo, si su paleta de colores es pequeña, el peso sería menor al de JPG. Es el indicado si tu imagen necesita transparencia.

• JPG:

  Es utilizado para archivos con una gran variedad de colores en su paleta, para obtener una relación de calidad y peso buena en las imágenes.

• GIF: Se usa para imágenes animadas.
• SVG:

  Estas imágenes vectoriales son usadas para logos, íconos o imágenes simples. Su peso es menor a los archivos .jpg y .png, son indexables y se pueden escalar a diferentes resoluciones.

• JPEG 2000:

  Es una extensión de imagen de nueva generación que no todos los navegadores soportan. Se creó para reemplazar el original estándar .jpeg.

• JPEG XR:

  Al igual que el anterior, es una extensión de imagen de nueva generación no soportado por todos los navegadores. Ofrece la misma calidad de las imágenes de .jpeg, pero reduce su peso hasta en la mitad.

• WebP:

  Igualmente, es una extensión de imagen de nueva generación no soportado por todos los navegadores. Compite directamente con las imágenes .jpeg y de las extensiones de nueva generación anteriores, ya que ofrece una mejor calidad y peso en la imagen.

En función a tus necesidades, tú decides con qué formato trabajar. Para simplificar la tarea, es recomendable usar jpg y png, que son los más usados. De lo contrario, si tu objetivo es ser más competente en carga web y subir la puntuación en Google PageSpeed (o alguna otra herramienta para testear velocidad de carga), es ideal usar el formato WebP, tomando en cuenta en todo momento que puede causar algunos problemas en algunos navegadores y cms.

• Optimización de tamaño: Se trata de que el tamaño de la imagen ya sea sea en ancho y largo, resulte ser igual al que se descarga en nuestra página web. Pues si el tamaño es más grande o más pequeño, se producirá la redimensión de la imagen al tamaño que se indica mediante programación, lo que conllevará realizar más trabajo a la hora de servir nuestra web al navegador de usuario. Nuestra página se mostrará completamente más rápido mientras menos procesos se tengan que realizar. Para confirmar si los tamaños son distintos, solo tenemos que ir a una imagen en nuestro sitio web, dar click a botón derecho y a inspeccionar. En la pestaña que se abrirá encontraremos el código de la web en html y en la parte superior la imagen sombreada. Al pasar el mouse por encima de ella, veremos el tamaño real y el tamaño en el que se muestra la imagen.

• Optimización de peso: Con este proceso, reducimos el peso de las imágenes a un ideal debajo de los 100kb, para acortar los tiempos de carga y acelerarlos. La optimización de peso de la imagen consiste en reducir el tamaño, bajar la calidad, utilizar nuevos formatos de imagen o reducir escala de colores. De esta forma, al final debemos llegar a un equilibrio entre calidad y peso, tarea que podría ser complicada sobretodo para webs con sliders o imágenes grandes.

Herramientas online y offline para la optimización de imágenes

Una amplia variedad de eficaces herramientas están disponibles para ayudar a mejorar la creatividad y efectividad de una web. Las aplicaciones se dividen en tipo online y en las de escritorio.

Herramientas online: Son perfectas para el proceso de optimización de imágenes de forma rápida y para rematar imágenes con el fin de asegurarnos que están comprimidas.

• Compressor.io: Se usa generalmente en imágenes publicadas en artículos. Permite mantener la calidad de la imagen y reducir considerablemente su peso. La única desventaja es que aquí los archivos deben subirse uno por uno.

• Squoosh.app:  Es un lanzamiento oficial de Google como compresor de imágenes, con opciones para reducir la calidad y paleta. Permite descargar la imagen en formato WebP, que no aceptan todos los compresores, además de mostrar exactamente cuánto se reduce el peso de la imagen.

• Imagecompressor.com:  Si necesitas subir diversas imágenes en simultáneo, este es el compresor de imágenes ideal. Permite descargar hasta 20 imágenes al mismo tiempo.

• Imageresize.org: Con esta herramienta podrás subir la imagen o directamente insertar el URL, sin necesidad de descargarla y volverla a subir para su compresión. Esto constituye una gran ventaja a la hora de optimizar un artículo rápidamente.

• TinyPNG: Otra buena opción que además comprime formato PNG.

Herramientas de escritorio: Con su uso, las imágenes saldrán comprimidas, de buena calidad y con un peso ideal.

• Photoshop: Es la herramienta de diseño gráfico más importante y por excelencia de Adobe. Con un ideal conocimiento de uso, podremos guardar en varios formatos las imágenes y optimizar al máximo su relación calidad y peso.

• Gimp: Sirve como una alternativa gratuita al Photoshop. Si bien esta herramienta no lo iguala en rendimiento, sigue siendo lo suficientemente potente y eficaz siempre y cuando también se sepa usar correctamente.

• File Optimizer: La eficacia de esta herramienta radica en su capacidad de comprimir masivamente no solo imágenes, sino todo tipo de archivos como pdf, video y audio.

La optimización automática de imágenes en WordPress

La tarea fundamental de optimizar imágenes no es ajena a WordPress, que es uno de los CMS más usados actualmente. Con ayuda de los plugins, el proceso de optimización puede ser automatizado, ya sea para ahorrarnos tiempo en nuestro trabajo, por si no optimizamos inicialmente o  porque ya tenemos una página web establecida y llena de miles de imágenes que haga que se ralentice el proceso de optimizarlas y subirlas al servidor una vez más.

En cuanto a la optimización de peso y tamaño de imágenes, existen los siguientes plugins:

• WP Super Cache: Es una opción de pago que permite optimizar imágenes a través de créditos. Tiene diversas funcionalidades de optimización.

• Swift: Es otra opción de pago de optimización de WPO. Con ella, lograremos optimizar automáticamente todas las imágenes de la web sin ningún límite.

• Smush: Está orientado específicamente a la optimización de imágenes.

Además, estos 3 plugins permiten la optimización de carga asíncrona, la cual únicamente descarga las imágenes cuando se muestra por pantalla al usuario, por lo que si se tiene una imagen en el footer, hasta que el usuario no llegue allí la imagen no se mostrará. Para este tipo de sincronización también se puede usar Lazy Load, un plugin más conocido.

La importancia de saber realizar la optimización de imágenes resulta un factor primordial a tomar en cuenta para el éxito de nuestra web, ya que hemos visto que, si bien existen varios factores para acelerar la carga, solo de esta forma lograremos seguir optimizando y mejorando nuestra web a gran escala.  Al final, el SEO trata, a grandes rasgos, de optimizar lo máximo posible y sacar el mayor provecho de pequeñas cosas.