Si hay una buena recompensa cuando trabajas en contenidos aparte de conseguir clientes, es ver el reconocimiento de Google. Afortunadamente, hay muchas cosas que puedes hacer para optimizar imágenes para web que te permitirán cumplir con los requisitos del motor de búsqueda.

En la nueva entrada del blog, te contaré trucos y consejos que te permitirán tachar de tu lista de pendientes la optimización de las imágenes de tu web.

¿Qué significa optimizar las imágenes?

No hay ser un genio para saber que a nadie le gusta una web lenta. No tenemos paciencia, y si la web que visitamos tarda más de un segundo en cargar, lo más probable es que la abandonemos.

Afortunadamente, reducir el tamaño de las imágenes mejorará el rendimiento de tu web rápidamente.

Beneficios de mejorar el rendimiento de tus imágenes

Pero no solo de velocidad vive el hombre, además, la optimización de las imágenes te ayudará a:

• Que Google rastree e indexe más rápido tus contenidos. Sin indexación no hay posicionamiento. Una imagen más pequeña ayudará a que Google rastree e indexe tu página más rápido y así, empezarás a posicionar antes.
• Ocuparás menos espacio en tu servidor. Especialmente si publicas con frecuencia, debes vigilar el tamaño de tus imágenes.
•  Podrás enriquecer tus contenidos y mejorar la experiencia de usuario. Con imágenes más pequeñas, podrás incluir más, de forma que tu contenido sea más atractivo visualmente.

Cómo optimizar imágenes para un mejor rendimiento

Ahora que tienes claro que una imagen más pequeña te beneficia, debes saber una ley universal: es necesario encontrar un equilibrio entre tamaño de archivo y calidad de imagen.

Busca un equilibrio entre tamaño de archivo y calidad de la imagen.

¿Por qué? Porque cuando el tamaño de archivo se reduce, la calidad también. Es decir, una imagen muy pequeña, de unos 20 ks., no ser ve bien. Su aspecto recibe el nombre de “pixelado”, “borroso” o cualquier otro calificativo que puedas imaginar para indicar que no es el aspecto que deseas para los elementos audiovisuales de tu web.

Para optimizar imágenes necesitas estar familiarizado con los conceptos: tipo de archivo y formato de compresión.

Elige el formato de archivo correcto

Antes de nada, debes saber qué tipos de archivos tienes a tu disposición. Estos son algunos de los más comunes:

• PNG: este formato te ofrece, por regla general, una mejor calidad, pero requiere más espacio de archivo.
• JPG: puedes ajustar la calidad para seleccionar un buen equilibrio entre calidad y tamaño de archivo.
• GIF: solo usa 256 colores, pero no tiene compresión sin pérdidas, por lo que los archivos tienden a ser más grandes.
• WEBP: es el archivo favorito desde hacer tiempo para los navegadores.

A continuación tienes un gráfico con el tamaño de archivo de estos tres formatos utilizando la misma imagen y con una calidad similar.

Calidad de compresión frente a tamaño

Hay algunos de los formatos que acabamos de ver que permiten ajustar la calidad. Mi truco es usar primero una tasa de compresión muy alta, de forma que veas claramente que la imagen no es aceptable para tu contenido e ir mejorando a partir de ahí hasta que te satisfaga el resultado.

Mira estas dos imágenes.

La primera usa una compresión muy alta, lo que tiene como resultado una mala calidad, inaceptable en muchos casos a no ser que seas un tío cutre. ? La segunda, tiene un grado de compresión menor y, lógicamente, un tamaño de archivo mayor.

La primera ocupa 11 kB, lo que es muy poco para una imagen de ese tamaño. En líneas generales, lo ideal es que mantengas las imágenes por debajo de los 75-100 kB sin que se resienta la calidad.

Programas y plugins de optimización de imágenes

Existen muchas herramientas y programas, tanto gratuitas como de pago que te permiten optimizar tus imágenes. Algunas hacen el trabajo por ti, y otras te permiten optimizar la imagen hasta que estás satisfecho con el resultado.

Vamos a pasar a enumerar muchas, selecciona la que mejor encaje con tus necesidades.

Imagify, uno de los más utilizados

El primero de los complementos es muy conocido, porque funciona muy bien, para qué nos vamos a engañar. Está desarrollado por el mismo equipo que desarrolló WP Rocket.

Es compatible con WooCommerce, NextGen Gallery y las últimas versiones de WordPress.

Entre las cosas que más me gustan es que permite optimizar en masa, mientras cuentas con diferentes niveles de compresión, normal, agresivo y ultra. Tienes una versión gratuita y una de pago. Con una cuenta gratuita puedes utilizar una cuota de 25 MB.

Short Pixel

ShortPixel Image Optimizer es un plugin para múltiples CMS que comprime 100 imágenes al mes. Acepta varios tipos de imágenes, incluidos los más comunes, como PNG, JPG, GIF, WebP y PDF.

Cuentas con dos opciones de compresión, con pérdida y sin pérdida. También convierte CMYK a RGB. Funciona de la siguiente manera: procesa y optimiza tus imágenes en la nube y luego las devuelve a tu web reemplazando los originales. Si deseas hacer una copia de seguridad, este plugin te permite hacerlo.

TinyPNG

TinyPNG usa técnicas inteligentes de compresión con pérdida para reducir el tamaño de archivo de tus imágenes en formato WEBP, JPEG y PNG. Al disminuir selectivamente la cantidad de colores en la imagen, se requieren menos bytes para almacenar los datos. El efecto es casi invisible, pero lo notarás en el peso de tu web, que se cargará más rápido.

Ahora que conoces las herramientas, vamos a pasar a los consejos:

• Opta por un servicio de compresión y optimización de imágenes externo, lo que reducirá la carga de tu propia web.
• Utiliza imágenes vectoriales (SVG) siempre que sea posible, junto con PNG y JPG.
• Utiliza CDN para mostrar tus imágenes a los usuarios de otros países.
• Guarda las imágenes en el tamaño final, de esta forma WordPress no tenga que crear versiones para mostrar distintas opciones que ralentizarán tu web.
• Evita los degradados, requieren una gran información, lo que provocan que la imagen sea más grande.
• Utiliza, siempre que sea posible, una compresión con pérdida.
• Las ilustraciones planas pueden reducirse con menos pérdida de calidad.
• Elimina los datos de imagen que no sean necesarios.
• Utiliza GIF si necesitas animación, pero recuerda que el peso será mucho más alto.
• Usa PNG si necesitas mucho detalle y alta resolución.
• Para fotos generales y capturas de pantalla, emplea el formato JPG.
• Para imágenes más pequeñas, utiliza el formato WebP.
• Limpia tu biblioteca de imágenes de WordPress de imágenes que no utilices.

La optimización de imágenes es uno de los procesos básicos si quieres mejorar el rendimiento de tu web. Si adoptas una rutina de comprensión y optimización de imágenes, conseguirás mejoras rápidas sin demasiado esfuerzo. Te espero en los comentarios para saber si incorporas rutinas de optimización entre tus labores de mantenimiento.