Cómo optimizar imágenes para la web

Para muchos emprendedores y especialistas en marketing, las imágenes son esenciales para su negocio. Las imágenes pueden tener un impacto tremendo tanto en los usuarios como en el rendimiento de un sitio web, por lo que dominar la optimización de imágenes es esencial para el bienestar de su sitio.

¿Qué es exactamente la optimización de imágenes y cómo optimiza las imágenes para sitios web? Compartiremos con usted todos los pasos necesarios de los que debe ocuparse para garantizar que sus imágenes se carguen sin problemas.

En este resumen, lo guiaremos a través de los siguientes temas:

Optimización de imágenes y sus beneficios

Cuando optimizas imágenes, reduces su tamaño sin comprometer la calidad de la imagen.. Y cuando reduce el tamaño de sus archivos, sus páginas se cargan más rápido. Esto es importante tanto para su SEO como para sus visitantes. Cuanto más rápido se cargue completamente su contenido, menor será la tasa de rebote. Otra cosa a tener en cuenta cuando se trata de imágenes es el imperativo de una buena resolución, lo que significa imágenes de alta calidad. Aumentar la resolución de una imagen con herramientas como Photoshop es bastante fácil, así que tienes que disculparte por escatimar en eso. Pero, volvamos a nuestro tema de hoy, que es la optimización de imágenes con fines de velocidad.

Hace aproximadamente una década, Google decidió incluir la velocidad del sitio entre sus factores de clasificación relevantes. Uno de sus webmasters, John Mueller, escribió en 2016 que los sitios web deberían tardar menos de 2 a 3 segundos en cargarse, y esto sigue siendo relevante hasta el día de hoy.

Con el tiempo, Google incluso ha desarrollado herramientas como PageSpeed ​​Insights de Google, para ayudar a las personas a evaluar la velocidad de su sitio web. Innumerables otras herramientas tienen el mismo propósito, por ejemplo, Pingdom, GTmetrix o Page Weight (que le dice cuánto afectan las imágenes a la velocidad de su página), pero PageSpeed ​​Insights sigue siendo bastante popular entre los expertos en SEO.

No olvide utilizar herramientas de optimización para una mejor clasificación, algunas de las cuales son completamente gratuitas.

Si sus imágenes son demasiado grandes, es probable que Google no pueda rastrearlas e indexarlas, y esto podría ser otro factor que contribuya a una clasificación más baja.. No olvide que algunos de sus visitantes provienen de la Búsqueda de imágenes de Google (puede verificar el tráfico de sus imágenes en Google Analytics), así que haga todo lo posible para conservarlos.

Otro beneficio de utilizar archivos de imagen más pequeños es que puede crear copias de seguridad en poco tiempo. Ellos también ocupa menos espacio de almacenamiento (lo que reduciría el costo del almacenamiento de respaldo) y absorbería menos ancho de banda. La mayoría de los planes de alojamiento vienen con ciertos límites de ancho de banda por plan, por lo que debe usar sus imágenes de manera inteligente.

Cómo optimizar imágenes

Para optimizar idealmente sus imágenes, hay varias cosas de las que debe ocuparse:

Formateo de archivos

Comencemos mostrándole cómo elegir el formato de archivo apropiado. Existen numerosos formatos de imagen, pero los tres más comunes son:

Dimensiones de la imagen

Las imágenes que toma con su teléfono inteligente o una cámara profesional tienen grandes resoluciones de alrededor de 300 ppp y dimensiones de al menos 2000 px y más. Pero las fotos tan grandes no son adecuadas para sitios web, tardan una eternidad en cargarse. Claro, desea que sus imágenes se vean impresionantes, pero aún así, el tiempo de carga debe ser bajo. Es por eso que necesita cambiar el tamaño de la imagen en Photoshop u otro software de edición de imágenes de su elección antes de agregarlos a su sitio web. En última instancia, la resolución en sí no importa tanto como el peso de la imagen, que debe permanecer por debajo de 100 kb o 150 kb como máximo. Pero más sobre eso en el próximo capítulo.

Compresión de imagen

Si se excede y comprime demasiado su imagen, resultará en un tamaño de archivo pequeño y una imagen de baja calidad. Por otro lado, cuando la tasa de compresión no es grande, las imágenes tienen una gran calidad pero también son grandes.

Como una regla de oro, el peso total de su sitio web no debe superar los 2 MB. Idealmente, el tamaño del sitio web de carga rápida debería ser de alrededor de 1 MB.

Con eso en mente, considere mantener sus imágenes en alrededor de 150 KB o menos. Si está utilizando el formato PNG, no sobrepase los 100 KB.

Hay dos tipos de compresión: con pérdida y sin pérdida.

Compresión con pérdida o irreversible significa que algunos de los datos y la calidad se perderán de la versión original. Incluso después de reducir considerablemente el tamaño del archivo, parecerá que no hay diferencias notables. Por supuesto, en una inspección más cercana, esas diferencias serán más evidentes. Si el nuevo tamaño de archivo es demasiado pequeño, es posible que vea algunas áreas pixeladas y bordes irregulares en su imagen.

Compresión sin perdidas es un método que le permite reducir el tamaño de la imagen sin degradar su calidad. No se pierden datos cuando un archivo se comprime sin pérdidas, lo que significa que los datos originales se pueden recuperar en cualquier momento. Sin embargo, dado que no se eliminan datos, los archivos no se pueden comprimir en más del 50%.

Nombre de la imágen

No pase por alto este paso. Dar nombres propios a sus archivos de imagen es importante para el SEO de imágenes, ya que Google y otros motores de búsqueda rastrean los nombres de sus archivos de imagen.. Evite los nombres genéricos, sino más bien siga la ruta descriptiva y incluir palabras clave. Por ejemplo, si hay una imagen de un automóvil en su sitio web, puede especificar su marca y modelo en el nombre del archivo.

Es también importante optimizar los atributos alt también conocidos como alternativas de texto a las imágenes. Si, por alguna razón, un navegador no puede representar una imagen, aparecerá el texto alternativo en su lugar. Incluso cuando una página se carga por completo, si pasa el cursor sobre una imagen, aparecen los atributos alt. Importan bastante ya que afectan el SEO de su sitio web y aumentan las posibilidades de que sus imágenes aparezcan en la búsqueda de imágenes de Google.. Solo tenga cuidado de no sobrecargar sus atributos alt con palabras clave, ya que los motores de búsqueda pueden penalizarlo por hacerlo.

Vista previa de imagen borrosa

Este paso se trata de creando la impresión de imágenes de alta calidad y carga rápida cargando primero la versión de menor calidad de una imagen. Mientras sus visitantes esperan que el sitio web se cargue por completo, aparece la versión más pequeña de la imagen. Está estirado al tamaño original y parece borroso, pero esto dura solo un poquito de tiempo, antes de que se cargue la imagen de tamaño completo. Aunque requiere algunos conocimientos básicos de CSS, crear el efecto de desenfoque es bastante factible.

Herramientas de optimización de imágenes

Las herramientas de optimización de imágenes le permiten modificar sus imágenes según sus necesidades. Puede comprimirlos, cambiar los tipos de archivos, modificar las dimensiones de la imagen, etc.

Adobe Photoshop

La herramienta de edición de imágenes más popular es, sin duda, Adobe Photoshop. Incluye algunas funciones de edición de imágenes impresionantes, pero el Guardar para Web opción es particularmente interesante.

Cuando necesite reducir el tamaño de una de sus fotos sin poner en peligro su calidad, utilice esta opción. Te permitirá elija el tipo de imagen, la calidad de la imagen y las dimensiones. Presta atencion a Calidad y desenfoque opciones. Modificándolos (incluso sin tocar otras configuraciones), puede mantener una imagen de alta calidad que no pesa mucho.

Además de Photoshop, también puede utilizar Gimp, TinyPNG, JPEG Mini, Paint.NET, ImageOptim (para usuarios de Mac), Trimage, Ezgif y otros.

Complementos de optimización de imágenes en WordPress

WordPress viene con muchos plugins ingeniosos que pueden ayudarlo a optimizar sus fotos sin demasiado alboroto. Pero, no importa cuán poderoso sea cada uno de ellos, aún debe cambie el tamaño de sus imágenes antes de subirlas a WordPress, o de lo contrario podría perder mucho espacio de alojamiento precioso.

Algunos de los mejores plugins para la optimización de imágenes incluyen Optimole, EWWW Image Optimizer Cloud, Imagify, Smush, Optimus - WordPress Image Optimizer y Compress JPEG & PNG Images.

Smush es el más popular, con más de 1 millón de descargas activas, pero sin importar el plugin que elija, todo lo ayudará a optimizar las imágenes para que su sitio web se cargue más rápido. Lo único que puedes buscar es que un plugin que instale puede comprimir y optimizar imágenes externamente, en sus propios servidores. De esa manera, el tiempo de carga de su página no se verá afectado por el tamaño de las imágenes.

Conclusión

La optimización de la imagen es uno de los factores determinantes para el rendimiento impecable de su sitio web. Si se hace mal, corre el riesgo de clasificaciones bajas, tiempos de carga altos, así como un gran rebote y bajas tasas de conversión. Optimizar las imágenes correctamente no solo lo ayudará a dirigir un negocio en línea más exitoso, sino que también le ahorrará mucho espacio de almacenamiento que seguramente necesitará a medida que su sitio web continúe desarrollándose y expandiéndose.

Nunca vino nada bueno de una mala UX, así que siga nuestros consejos sobre cómo optimizar imágenes para la web, y su sitio web funcionará como un reloj.