Cómo optimizar imágenes para web
4.5 (90%) 2 vote[s]

Voy a explicarte cómo optimizar imágenes para web porque desde hace algunos años, Google le ha dado más importancia a la velocidad de carga de una web para situarla en los primeros resultados.

Uno de los contenidos que más influyen en el tiempo que tarda en abrir una web son las imágenes, por lo que se hace cada vez más necesario optimizarlas.

Casi todos los portales recurren a una cantidad considerable de imágenes para atraer la atención de sus visitantes, y la tendencia es hacerlas más grandes.

Aprende a optimizar imágenes para web sin perder calidad Clic para tuitear

Pero lo cierto es que en el mundo del SEO poco vale tener una cuidada jerarquía de títulos, etiquetas ALT, listas o direcciones concisas y descriptivas, si las imágenes pesan muchos megabytes, y hacen que el tiempo de carga se prolongue.

Y es que si bien estamos en la era de la banda ancha, para casi todos los usuarios de móvil la carga es muy lenta. El porcentaje de usuarios que se cansan de esperar es alto, y una web pesada es más difícil de posicionar, por el tiempo que le toma a Google rastrearla.

Reducir el peso del archivo de la imagen es fundamental para el mejor rendimiento de tu web, aunque con frecuencia estas modificaciones vienen acompañadas de la pérdida de calidad de la imagen.

Elegir la herramienta apropiada para cambiar el tamaño y comprimir el peso, y escoger el formato de imagen adecuado, son pasos ineludibles para optimizar imágenes sin perder calidad y conseguir una mejor posición para tu web, por lo que no está de más aprender cómo hacerlo.

 

Te recomiendo leer: Qué es WPO y cómo mejorar la velocidad de tu web

 

Qué es optimizar imágenes

Optimizar imágenes es contraer el tamaño de un archivo, por medio de un script o un plugin, con el fin de acelerar el tiempo de carga de una página.

La optimización de imágenes implica la puesta en práctica de un conjunto de tareas, no sólo para conseguir que las imágenes de un portal tengan un peso y un tamaño manejable sin perjudicar la calidad, sino también para hacer que las imágenes sean indexables.

A menudo, los términos redimensionar y comprimir se emplean como sinónimos de optimizar. Aunque no es del todo cierto, porque la compresión y el redimensionado son sólo parte del proceso de optimización.

Además de acelerar la velocidad de carga, el comprimir y redimensionar imágenes tiene el propósito de racionalizar el consumo de recursos del hosting, y liberar espacio en el servidor.

La compresión puede ser con pérdida o sin ella:

▶️ La comprensión con pérdida suprime algunos datos, degradando la imagen. Este método exige observar el equilibrio entre el tamaño del archivo y la calidad de la imagen, y puede hacerse con cualquier herramienta que permita configurar sus propiedades.

▶️ La comprensión sin pérdida comprime los datos sin suprimirlos, lo que requiere la descompresión de las imágenes antes de renderizarlas.

Experimentar con distintas técnicas te hará dar con el equilibrio adecuado para cada formato.

 

Cómo optimizar las imágenes para SEO 

Existen al menos dos maneras de optimizar imágenes para SEO.

▶️ Una consiste en utilizar una herramienta que permita reducir el peso de la imagen y controlar la calidad de forma individual.

▶️ La otra, en la instalación de un plugin en la plataforma de gestión de contenidos de la web, para comprimir de forma simultánea la totalidad de las imágenes de manera automática.

Sea cual sea el medio que se utilice, hay dos aspectos que deben tenerse en cuenta: el formato del archivo y la clase de compresión admitida. La combinación correcta de estos dos puede reducir el tamaño de la imagen hasta 5 veces.

Lo ideal es que el peso de la página esté entre 1 y 2 MB. Herramientas como Imsanity o WordPress Media permiten establecer un límite, para que todas las páginas subidas al sitio web tengan un tamaño que no afecte la velocidad de carga.

El primer paso que debes seguir para optimizar tu imagen para SEO es elegir el formato adecuado.

 

Seleccionar el formato apropiado

Una cuestión muy importante es saber escoger el tipo de archivo que mejor se adapte a tus necesidades.

Es imprescindible que sepas cuál te conviene más antes de empezar a editar. Un error en la elección podría hacer que el archivo tenga un peso tan grande que afecte la velocidad de carga de la web.

▶️ GIF

Sólo admite compresión sin pérdida. Es un formato de 256 colores para imágenes animadas. Las imágenes con más colores pierden calidad.

Aunque fue un formato muy utilizado en el pasado, hoy en día se usa bastante menos, ya que la mayoría de las animaciones se generan con html5, que reduce el peso del archivo de forma considerable.

Sin embargo, este formato aún puede emplearse en animaciones con zonas de colores planos, escasas áreas degradadas y pocos marcos.

▶️ JPG

Con este formato se obtiene un buen equilibrio entre tamaño y calidad.

Admite la compresión con pérdidas. Es decir, sacrifica la calidad para disminuir su tamaño. Así se pierde nitidez, dando lugar a aberraciones cromáticas en ciertas áreas, aunque el resultado depende de la cantidad de información que haya en el original.

En líneas generales, una compresión de el 70 % hará que la pérdida de información sea imperceptible, pero hay otros factores que influyen en el resultado.

Este tipo de archivo es el adecuado para fotos con abundantes colores y detalles, e imágenes fijas.

▶️ PNG

Las imágenes en formato PNG son más pesadas que las JPG, pero de mayor calidad. Se trata de archivos comprimidos sin pérdida, pero pueden ser también con pérdida.

Este formato es óptimo para las imágenes con colores planos y fotos con transparencia. En fotografías con muchos espacios lisos, es incluso más eficaz que JPG.

Este formato acepta transparencia, sustituyendo al GIF. Es perfecto para imágenes planas o con enormes espacios vacíos, como logos, botones, gráficos, iconos, imágenes con texto y capturas de pantalla.

Se recomienda menos para guardar fotos, ya que puede hacerlas más pesadas.

▶️ SVG

Este formato vectorial XML permite guardar imágenes o gráficos sin pérdida de calidad. Google también indexa archivos en este formato, por lo que su uso no añade complicaciones al SEO.

Funciona bien con iconos, logotipos, imágenes y textos sencillos y, en general, formas de colores planos y carentes de fondo.

Son escalables en navegadores y herramientas de edición, por lo que facilitan la vida de los diseñadores gráficos.

Por norma general son más ligeros que los JPG o PNG, contribuyendo a agilizar la carga.

▶️ Otros formatos

Además de estos existen varios otros, como WebP o JPEG XR, pero no todos los navegadores los soportan. También formatos vectoriales como EP o SVG, que pueden escalarse a cualquier resolución.

Después de la selección de formato, los siguientes pasos de cómo optimizar imágenes para SEO son los siguientes:

DESPEGAMOS TU NEGOCIO EN INTERNET

Adaptar el tamaño y modificarlo 

Agregar imágenes a tu blog o página web contribuye a sumar visitas, pero un gran peso podrá hacerte perder posición en los motores de búsqueda. De ahí la importancia de subir imágenes comprimidas a tu gestor de contenidos.

Para alcanzar un tamaño ideal para tus imágenes, lo primero que tienes que hacer es conocer las dimensiones adecuadas para adaptarlas a cierto formato. Lo más común es que, cuanto más sea grande la imagen, mayor sea el tamaño del archivo.

Otro punto a tener en cuenta es que de nada sirve subir imágenes de un ancho superior al que vas a mostrar, por lo que es mejor ajustar el ancho de la imagen al predeterminado en tu página.

 

Comprimir la imagen y disminuir su peso

La compresión con pérdida es un proceso que disminuye la información disponible en la imagen. No obstante, puede hacerse de tal modo que esta pérdida funcione, manteniendo una calidad aceptable.

Software como Photoshop, Corel Photo-Paint, Affinity Photo y otros programas de edición pueden ir más lejos en la compresión de imágenes, pero también existen plugins y herramientas en línea que pueden servirles de complemento.

Dos de estas últimas son Kraken.io y Optimizilla.

 

Reescribir los atributos para facilitar la indexación

Si quieres optimizar imágenes para SEO, es bueno que sepas que los buscadores no tienen la capacidad de leer imágenes ni el texto dentro de ellas. Por lo que la indexación de las imágenes requiere de la optimización de atributos, como:

▶️ El nombre de la imagen: lo mejor es una keyword que te interese posicionar. Archívala como si fuera una URL, separando las palabras con guiones y evitando el uso de caracteres especiales.

▶️ La descripción: un conciso texto alternativo (<alt>) que debería contener también la palabra clave, y cuyo propósito es proporcionar una referencia de la imagen en caso de no poder cargarse.

▶️ Title: el título que aparece cuando se pasa el ratón sobre la imagen.

Para acceder, comprobar y modificar los atributos de una imagen, inspecciona su código fuente.

 

Cómo optimizar imágenes en Photoshop

La herramienta más popular para la edición profesional de imágenes, Photoshop, contiene un módulo para almacenar y comprimir imágenes, y comparar la original con su versión comprimida, para mejorar la optimización.

Puedes guardar tus imágenes en Photoshop en la ruta Archivo > Exportar > Guardar para web.

Una vez guardada la imagen, aparecerá la opción 2 copias, en la que podrás visualizar tanto el archivo original como el comprimido.

Arriba a la derecha deberás elegir el formato para exportar la imagen. Abriendo varias pestañas a la vez, podrás comparar compresiones y formatos de distintas versiones, y evaluar su relación calidad/peso.

▶️ Si exportas JPG, considera que el 0 en la barra de calidad representa la máxima compresión y el 100 ninguna, alta calidad.

Pulsando Progresivo, harás que JPG guarde capas de distintas calidades, de modo que en la medida en que la imagen se carga en el servidor, irá definiéndose a una mayor resolución.

▶️ Al exportar PNG, tendrás que escoger entre comprimir hasta 256 colores, con PNG-8, y 16 millones de colores, con PNG-24.

La opción Entrelazado funciona como el Progresivo, y debes seleccionarla según la velocidad de carga del navegador desde el que será vista la imagen.

Abajo, a la izquierda de cada imagen, verás su peso una vez comprimida, y el tiempo que le tomaría cargar con tu ancho de banda.

Una vez termines de editar, haciendo clic en Guardar y señalando un carpeta para la imagen, podrás exportarla fuera del programa.

 

Plugins para optimizar imágenes en WordPress

Optimizar tus imágenes en WordPress te eximirá de tener que comprimirlas y formatearlas a mano. Algunos plugins hacen el trabajo en el momento de subir las imágenes, incluso optimizan las que estaban ya en la web.

Con estos optimizadores de imágenes para WordPress, tu portal tendrá un mejor rendimiento:

 

Imagify Image Optimizer

Desarrollado por WP Rocket, se le considera el mejor plugin para WordPress.

Potente y sencillo de manejar, este plugin cuenta con tres grados de comprensión:

▶️ Normal.

▶️ Agresivo.

▶️ Ultra.

Con la versión gratuita puedes optimizar hasta 25 MB de imágenes mensuales. Superado ese tope, la versión de pago te permitirá seguir disfrutando de sus funciones.

Con en el botón de restaurar podrás deshacer los cambios con sólo un clic, y volver a comprimir la imagen a un nivel que cumpla tus expectativas.

Optimole

Este optimizador de imágenes para WordPress tiene características únicas, como una velocidad de carga con base en la nube y una carga diferida, que recorta la calidad de la imagen si la conexión a Internet del visitante es lenta.

Además, examina el WebP y el navegador del usuario para verificar su compatibilidad.

 

ShortPixel Image Optimizer

La versión gratuita de este plugin permite optimizar un máximo de 100 imágenes por mes con pérdida o sin pérdida de compresión, pero además este optimizador para WordPress comprime archivos en PDF.

Otras de las funciones que hacen que se merezca la categoría Premium son el procesamiento de imágenes en la nube, creación de copias de seguridad, conversión de archivos de galería a bloques y el formato de color CMYK a RGB.

Comprime sin importar el tamaño del original.

La versión por suscripción de ShortPixel Image Optimizer comprime las imágenes subidas antes de haber instalado el plugin. Las nuevas imágenes también serán comprimidas de manera automática.

 

Conclusiones

Ya que te hemos mostrado todo lo que tienes que hacer para que las imágenes en tu web te garanticen los favores del SEO sólo falta que te pongas a trabajar en elegir el mejor formato, adaptar el tamaño de tus imágenes y reducir su peso, para ocuparte luego de los atributos y hacer que los motores de búsqueda te adoren.

Optimizar imágenes te deja más espacio en tu hosting web, y hace la navegación más ligera.

Poner en forma tus imágenes no sólo te deja más espacio para nuevos contenidos, sino que las hace más accesibles a los buscadores, poniendo su potencial en beneficio de tu fama y de tu negocio.

 

Te recomiendo leer: Qué es el Link building y cómo ayuda al SEO

 

¡Compártelo y dame tu puntuación!

Cómo optimizar imágenes para web
4.5 (90%) 2 vote[s]

Raúl consultor SEO freelanceRaúl Sánchez

Consultor SEO y diseñador web. Apasionado del Marketing Digital, ayudo a empresas y autónomos en la transformación digital de sus empresas en internet.
Con mis conocimientos en SEO y diseño web consigo lograr que las empresas tengan visibilidad en internet y consigan los objetivos.

Sígueme

Síguenos en Linkedin Síguenos en Google + Síguenos en Instagram

Agencia de Marketing Digital en Sevilla

RECIBE ANTES QUE NADIE LO ÚLTIMO DE MI BLOG

Blog de Marketing Digital, especializado en SEO, Diseño Web y Social Media. ¡DESPEGAMOS TU NEGOCIO EN INTERNET!

Prometo no hacer SPAM 😉

* indicates required
Consentimiento

*** RESPONSABLE: Raúl Sánchez Campos *** FINALIDAD: enviarte mis nuevos contenidos y lo que vea que puede interesarte (Nada de SPAM) *** LEGITIMACIÓN: tu consentimiento (que estás de acuerdo) DESTINATARIOS: los datos que me facilitas estarán ubicados en los servidores de MailChimp (proveedor de email marketing de seowebsevilla.com) fuera de la UE en EEUU. MailChimp está acogido al acuerdo EU-US Privacy Shield, aprobado por el Comité Europeo de Protección de Datos. *** DERECHOS: por supuesto tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

You have Successfully Subscribed!

WhatsApp chat
64 Compartir
Twittear
Pin
Compartir64
Compartir