Cómo optimizar imágenes para web paso a paso [+ TRUCOS SEO] 

¿Sabías que el 53% de los usuarios que visitan un sitio web desde un dispositivo móvil lo abandona si tarda más de 3 segundos en cargar? 

Esto significa que si tienes un portal lento, 5 de cada 10 usuarios que aterricen en él se van a ir por donde han venido. Imagínate la cantidad de clientes potenciales que se pierden por el camino. 

Y, ¿cómo podemos corregir este problema? La clave consiste en optimizar las imágenes para la web. 

Ten en cuenta que uno de los factores más importantes que inciden en el aumento o la disminución de los tiempos de carga de una página web son el peso y el tamaño de las imágenes. 

Ahora bien, ¿cómo optimizar imágenes para web sin morir en el intento? Nosotros te lo contamos en esta guía. 

Vas a aprender paso a paso cómo dejar las fotografías de tu web niqueladas, incluso aunque no tengas conocimientos técnicos. 

Además, descubrirás cuáles son las mejores prácticas para optimizar esos archivos de tal forma que te ayuden a mejorar el posicionamiento SEO para que la página web de tu negocio despegue en Google como un cohete. 

Preparados, listos… ¡Ya!

¿Qué significa optimizar imágenes para web y por qué es importante?

¡Ojo! Que igual nos hemos puesto a hablar de optimizar imágenes para web sin que tengas realmente claro qué significa esto. Si es así, aquí tienes un resumen rápido.

La optimización de imágenes se refiere al proceso de crear fotografías en el formato, dimensión y resolución correctos, siempre garantizando que el tamaño del archivo sea lo más pequeño posible sin que ello suponga reducir la calidad general de la imagen. 

Pero, ¿por qué los desarrolladores y diseñadores web insistimos tanto en que este proceso se lleve a cabo? Estos son los beneficios que implica.

Mejorar velocidad de carga

Las fotografías son el segundo elemento más pesado en una página web después de los vídeos. Esto implica que si no están optimizadas, la velocidad de carga (tiempo que tarda una página web en mostrar todo el contenido completo) se va a resentir 👎. 

Optimizando las imágenes que, junto con los textos, constituyen uno de los pilares básicos de cualquier página web, conseguirás que se carguen y descarguen rápidamente, lo que nos lleva al siguiente punto.

Favorecer la experiencia de usuario

Cuando una página carga de forma ágil gracias a unas imágenes optimizadas, la experiencia de navegación y la usabilidad se ven beneficiadas, dos aspectos clave dentro de cualquier proyecto digital. 

Permitir que los usuarios accedan a tus páginas rápidamente y que interactúen sin interrupciones hará que se muestren más predispuestos a la conversión. 

Ahorrar recursos

Más allá de ralentizar tu portal, el contenido gráfico ocupa espacio en el disco del servidor que alimenta tu sitio. La mayoría de los proveedores de hosting fijan un límite de ancho de banda por plan. 

Esto significa que no tienes recursos ilimitados y, si no llevas a cabo la optimización de tus imágenes, pronto ocuparán el espacio disponible, lo que puede suponer el cobro de una tarifa adicional de alojamiento.

Por otro lado, el hecho de optimizar imágenes para web también ayuda a reducir el consumo de ancho de banda o de datos móviles por parte del usuario. 

Impulsar el posicionamiento SEO

No optimizar las imágenes web puede suponer un tiro directo al corazón de tu estrategia SEO. ¿Por qué? La explicación se encuentra en las Core Web Vitals. 

Se trata de un conjunto de métricas establecidas por Google que miden la experiencia de usuario general en una página web en cuanto al rendimiento de carga, la interactividad y la estabilidad visual. 

Una de las métricas a tener en cuenta es el LCP (procesamiento de imagen con contenido) que evalúa cuánto tarda en cargar el elemento más pesado de una página y que suele corresponder con una imagen. 

Tal y como señala Google, el umbral máximo de esta métrica debería situarse en 2,5 segundos.

Por tanto, unos archivos muy pesados pueden suponer un lastre para estas métricas tan importantes que Google tiene en cuenta a la hora de clasificar una página. En consecuencia, si apruebas la evaluación de métricas, estás más cerca de posicionarte entre los primeros resultados del buscador.

¿Cómo optimizar las imágenes para web?

Si hasta ahora te habías dedicado a crear y subir tus fotografías sin preocuparte por asuntos de formatos, pesos o resoluciones, igual la has liado un poquito parda 🤔. Pero tranqui que te contamos cómo solucionarlo.

Y, aunque quizá lo de optimizar imágenes suena a algo complicado, vas a ver que es bastante sencillo de lograr si sabes el camino. 

Para ponértelo fácil, hemos dividido el proceso en 4 etapas.

Paso 1: Elige el formato de archivo adecuado

Es fundamental elegir el formato de imagen adecuado en función del tipo de fotografía que vas a utilizar. Los más comunes para imágenes en la web son JPEG, PNG y GIF. 

Sin embargo, tenemos a los recién llegados WebP y AVIF, formatos que respetan la calidad de las fotografías al detalle y que permiten mayor reducción a tus archivos de imagen. 

El problema con los formatos de próxima generación es que no son compatibles con todos los navegadores, aunque esto es algo que se va a ir solucionando con las futuras actualizaciones.

Conozcamos un poquito más sobre los formatos recomendados:

▶️ JPEG (o .jpg): Es el archivo estándar que se ha venido utilizando desde hace años para web. Es perfecto para fotos con muchos colores porque otorga calidad y no “pesan” demasiado.

▶️ PNG: Se trata de un formato de imagen que no está comprimido, lo que significa que la calidad es mayor, pero con la desventaja es que el tamaño de los archivos también es mucho mayor frente a otros formatos. Por ello, se recomienda reservar su uso para fotografías con fondo transparente. 

▶️ GIF (.gif): Este formato solo emplea 256 colores con una calidad inferior a JPG, por ejemplo, lo que lo convierte en la mejor opción para imágenes animadas, decorativas e iconos.

▶️ WebP: Estamos ante un formato de imagen desarrollado por Google que permite mostrar imágenes de alta calidad y animaciones, pero con tamaños de archivo más reducidos frente a los tradicionales JPEG o PNG.

▶️ AVIF: Es otro formato de imagen de nueva generación muy optimizado para la compresión sin pérdida de calidad.

Lo ideal es que elijas entre los diferentes formatos de imagen disponible en función de las necesidades de cada diseño. No te quedes solo con uno.

Paso 2: Cambia el tamaño para reducir el peso de las imágenes web

Antes de guardar tu diseño en el formato elegido y subirlo a tu plataforma web, debes redimensionar la imagen al tamaño exacto en que se mostrará en la página (recuerda que la dimensión de las fotografías se mide en píxeles). 

Por ejemplo, imagina que estás preparando la imagen para un banner de la home de tu web. Si el diseño que muestra la imagen es de 600 x 600 píxeles, ¿para qué quieres subir una foto con una resolución de 1024 x 1024? 

Esos píxeles de más solo aumentarán el peso del archivo —y con ello la carga de la web— sin necesidad porque la imagen nunca se mostrará al usuario en tamaño de 1024 x 1024 px.

Puedes evitarlo recortando el tamaño o cambiar las dimensiones de las imágenes web antes de subirlas a tu servidor. Para ello, puedes emplear cualquier software de edición como puede ser Photoshop, otros más sencillos como Paint e incluso herramientas online tipo Canva o Iloveimg.

Te recordamos que no es recomendable redimensionar la imagen en el código HTML o CSS, ya que esto puede aumentar el tiempo de carga ❌. 

Paso 3: Comprime las imágenes 

Ya tienes tu imagen en el formato correcto y el tamaño adecuado. Ahora llega un paso esencial en el proceso de optimizar imágenes para web: comprimirlas. O, lo que es lo mismo, minimizar su tamaño en bytes sin degradar la calidad visual de la imagen. 

Al comprimir una fotografía, se eliminan los detalles que no son perceptibles para el ojo humano a la vez que se conserva la calidad suficiente para que la imagen se vea bien en la web. 

Ahora bien, debes saber que existen dos tipos principales de compresión: con pérdida y sin pérdida. Testea cada resultado a ver cuál encaja más con las necesidades del proyecto.

▶️ Compresión con pérdida: Reduce los píxeles redundantes dentro de la foto sin que afecte a su apariencia.

▶️ Comprensión sin pérdida: Reorganiza los datos dentro de una imagen sin afectar los píxeles. Así, la imagen mantiene el mismo nivel de calidad que tenía al inicio del proceso. 

Algunas herramientas populares con las que podrás reducir el tamaño del archivo sin comprometer demasiado la calidad de la imagen son TinyPNG y Optimizilla. Asimismo, si trabajas con WordPress, el plugin WP Smush es genial para comprimir automáticamente.

Paso 4: Elimina los metadatos de la imagen

¡Venga! Ya casi hemos terminado el proceso de optimizar imágenes web. 💪 Ahora toca eliminar los metadatos de las fotografías. 

Meta ¿qué? 😶 

Los metadatos son información incrustada en una imagen que incluye detalles como la hora y fecha en que se tomó la foto o la configuración de la cámara con la que se hizo, entre otros. 

Para que te hagas una idea, según señalan los estudios sobre el impacto de los metadatos en el rendimiento de las imágenes: hasta el 16% del tamaño total de los archivos de imágenes online son metadatos.

Sin embargo, la mayor parte de esta información es inútil para los visitantes del sitio y los navegadores tampoco la requieren para representar ese contenido. Por tanto, lo mejor es eliminarla para conseguir optimizar imágenes web al máximo. 

Puedes hacerlo fácilmente en sistemas operativos Windows desde la pestaña de propiedades del archivo (clic derecho) y, en caso de trabajar con Mac, recurrir a herramientas como ImageOptim te facilitará el proceso.

Con esto listo… ¿la subimos a la web? No. Todavía hay una serie de buenas prácticas que aconsejamos implementar para dar un empujón al SEO de tus imágenes ⬇️.

Cómo optimizar imágenes web para SEO

Las fotografías no solo consiguen mejorar el diseño de una página web y hacerla más atractiva y accesible, sino que también son claves para el SEO. 

Sin embargo, debes tener presente que, a día de hoy, Google no es capaz de ver las imágenes de tu web más allá de los datos que le facilitamos. Optimizar esos datos te va a permitir mejorar tus oportunidades de posicionar en el buscador. 

Y, ¿cómo puedes hacerlo?

Renombra el archivo utilizando una palabra clave

El nombre de archivo de una imagen da pistas a Google sobre el tema que trata la foto. Generalmente, estamos acostumbrados a verlos como “IMG_556913” o parecido. Este nombre no le dice nada al motor de búsqueda. 

En cambio, si estás subiendo una imagen con una máquina industrial de paletizar y renombras el archivo como “maquina-paletizar”, ya le estás dando a Google información de valor.

A la hora de renombrar los nombres de archivos utiliza palabras clave o descriptivas separadas por guiones (no uses guiones bajos porque los motores de búsqueda no los reconocen).

Observa el ejemplo.

Redacta los atributos alt y título

Las etiquetas alt son una alternativa de texto a las imágenes que ayudan a los navegadores a comprender el contenido de la fotografía. Además, esto es lo que muestra el navegador en la esquina superior izquierda cuando, por el motivo que sea, no puede representar las imágenes correctamente. 

Por su parte, la etiqueta título aparece cuando los usuarios sitúan el ratón sobre una imagen.

La mayoría de CMS (WordPress, Magento, Prestashop, Shopify…) incluyen un apartado donde te permiten cumplimentar la etiqueta alt de cada imagen que subes. A la hora de redactar estos textos alternativos usa textos descriptivos y concisos que reflejen el contexto de la imagen. 

Recuerda incorporar de forma natural aquellas palabras clave que te interesen posicionar con cada página siempre que sea posible.

Y ahora sí. ¡Has logrado optimizar imágenes para web con éxito! 👏

Optimizar imágenes web nivel pro: 6 tips extra

Si has seguido el proceso anterior, tus fotografías estarán perfectamente optimizadas. Te aseguramos que ya habrás hecho algo que la mayoría de negocios web no hacen y con ello estarás aumentando tu ventaja competitiva en el mercado. 

Pero, si quieres ir un paso más allá y mejorar al máximo el rendimiento de las imágenes en tu portal, con estos tips lo lograrás.

1. Habilita la carga diferida en tu web

Se trata de una técnica que retrasa la carga de imágenes en una página web hasta que el usuario se desplaza por ella para visualizarlas. 

Por ejemplo, una tienda online muestra en una sección de categoría un total de 30 imágenes de productos y 5 de ellas aparecen en la parte superior. 

Gracias a la carga diferida, cuando un usuario visite la página, inicialmente solo se cargarán esas cinco primeras imágenes y, a medida que se desplace hacia abajo, las restantes se irán cargando y apareciendo a la vista. 

Habilitar la carga diferida en las imágenes de tu web te ayudará a reducir el tiempo de carga inicial y mejorar la experiencia de usuario.

2. Utiliza una red CDN

Una CDN (content delivery network), definida de forma simple, es una red de servidores interconectados y ubicados en diferentes puntos geográficos que almacenan información del sitio web, incluidos textos, imágenes, videos o GIFs. 

Cuando un usuario visita una página web, la CDN le entrega la información desde la ubicación más cercana, acelerando así la velocidad de carga de páginas web.

3. Recurre al almacenamiento en caché

El almacenamiento en caché es una técnica empleada con el fin de servir contenido de forma ágil. Se consigue almacenando los archivos de imagen en un servidor proxy o en la memoria caché del navegador del usuario de tal forma que pueda acceder a ellos rápidamente la próxima vez que visite la página sin necesidad de cursar ninguna solicitud de red. Así se acelera el rendimiento.

4. Limpia tu biblioteca multimedia

Con el paso del tiempo, la biblioteca multimedia de un proyecto web puede convertirse en un auténtico baúl de los recuerdos, llena de imágenes que ya no son útiles y que ocupan un valioso espacio de tu hosting, además de ralentizar la web. 

¿Qué puedes hacer al respecto? Muy sencillo: hacer limpieza. Basta con ir eliminando uno a uno los archivos innecesarios como imágenes duplicadas, de baja calidad, mal optimizadas o que no se utilizan en ninguna publicación o página.

5. Emplea imágenes propias

Las imágenes de stock pueden parecer atractivas, pero a menudo resultan repetitivas o no se ajustan bien al diseño de la página web. Siempre que puedas, emplea contenido gráfico propio donde mostrar tu producto, instalaciones o servicios. 

Este tipo de fotografías únicas te ayudarán a destacar en los motores de búsqueda, a mejorar la experiencia de usuario y a impulsar el branding de tu marca.

6. Respeta la coherencia visual de tu marca

Mantén la consistencia en el estilo y el tamaño de las imágenes en la página web. Esto ayuda a crear una experiencia visual coherente para los visitantes de la página. El diseño de nuestra página debe mantener una coherencia no solo con las propias páginas internas sino con la marca. Un estilo visual armónico y consistente hará una identidad memorable.

Optimizar imágenes web está en tu mano

Como has visto, optimizar imágenes web no es un proceso complicado, aunque sí es laborioso y requiere tiempo. No obstante, te garantizamos que será un tiempo bien invertido en tu proyecto digital. 

Un último consejo…

De esta manera, podrás evaluar el impacto que han tenido tus acciones y, créenos, sentirás un orgullo tremendo de haber dedicado esfuerzos a la optimización de tus imágenes. 

Y recuerda, si ves que la presencia online de tu empresa se te hace bola, desde Isimo Agencia estamos para ayudarte. Solo tienes que contactar con nosotros y juntos haremos brillar a tu empresa en Internet.