Cómo optimizar imágenes para mejorar la velocidad de la página y el SEO de tu sitio web

Un error común que he visto al mirar páginas web en vivo y redactadas actualmente para su estrategia SaaS SEO es que las imágenes están mal optimizadas para la salud y la velocidad del sitio web en general. Todos hemos escuchado la cita "Una imagen vale más que mil palabras". Aunque es un cliché, es cierto y tal vez vale aún más.

Las imágenes captan nuestra atención y nos ayudan a relacionarnos con lo que estamos viendo. Construyen una historia y tienden a causar una impresión mucho más duradera que solo un gran cuerpo de texto. A muchas personas les encanta obtener imágenes de stock de sitios de fotografía de stock libres de derechos de autor como Unsplash.

Google prioriza mucho las páginas rápidas. Al ignorar los pasos necesarios para la optimización de imágenes, se está preparando para una batalla cuesta arriba. La cantidad de imágenes agregadas a una página afecta directamente el tiempo de velocidad de carga. Cuantas más imágenes tenga una página, más lenta será la velocidad de carga. En esta guía, visitaremos los 5 pasos que realizo cuando optimizo imágenes para la velocidad de la página y los motores de búsqueda.

Recortar y cambiar el tamaño de su imagen

Por defecto, la foto que descargamos es muy grande y de alta calidad. Decidir qué tan grande o qué resolución debe tener esta imagen está determinado por el tamaño más grande que se verá su imagen. La gente piensa que tiene una imagen de la más alta calidad para impresionar a sus clientes o incluso a ellos mismos, pero no se dan cuenta de este impacto tan negativo. Al decidir qué tamaño debe tener la imagen, piense en el tamaño más grande en el que se verá la imagen.

No necesita que las dimensiones de la imagen sean de 6000 x 6000 píxeles si solo se va a usar para una imagen de perfil pequeña o una foto de rostro que se verá a 300 x 300 píxeles. Según mi experiencia, encuentro que la imagen más grande en la página será la imagen principal en la parte superior. Un tamaño seguro en el que permanecer mientras se mantiene la calidad sería convertirlo en el tamaño estándar de alta definición de 1920 x 1080 píxeles.

Sugerencias y trucos: si la imagen de un banner para un blog o una página web tiene una calidad ligeramente inferior a la que le gustaría, considere aplicar una superposición transparente. Esto hará que parezca que es parte del diseño y hará que cualquier texto sea más fácil de leer.

A continuación, estoy usando Figma para cambiar el tamaño y recortar mi imagen. El proceso es muy fácil ya que todo lo que tienes que hacer es arrastrar y soltar y luego cambiar la imagen a tu gusto. Aquí hay dos controles que necesita para editar correctamente su imagen usando Figma en Windows.

• Mayús + Arrastrar: escalará toda la imagen hacia arriba o hacia abajo manteniendo la misma proporción.
• Ctrl + Arrastrar: cambiará solo la altura o la longitud sin estirar la imagen.

Exportación como diferentes tipos de archivos

Es importante pensar en qué tipo de formato de archivo querrá usar. Muchos formatos pueden servir para diferentes propósitos. Cada uno viene con su propio conjunto de pros y contras dependiendo de la vista del usuario. Estos son solo algunos de los más comunes que suelo ver:

• PNG - Bueno para diseños gráficos o imágenes que necesita para ver los pequeños detalles de Esto tiene el costo de un tamaño de archivo más grande.
• JPEG: para fotografías de la vida real de personas y lugares. Se puede comprimir mucho más pero perder un poco más de información ya que no necesita tantos detalles en estos.
• SVG: excelente para íconos y logotipos, ya que se pueden escalar hacia arriba y hacia abajo sin perder calidad. Esto solo puede funcionar en archivos de imagen creados.
• WEBP: una versión más nueva de imágenes que puede reemplazar PNG y JPEG. WEBP tiene una calidad de imagen similar a la de ambos y puede ahorrar entre un 25 % y un 40 % de espacio. El único inconveniente es que, actualmente, el navegador Safari de Apple no admite esto, por lo que necesitará copias de seguridad de archivos JPEG o PNG para cargar.
• GIF: estos son clips de videos o animaciones que tienden a reproducirse en bucle. Estos son buenos para capturar una escena o mostrar cómo puede funcionar la interfaz de un producto. Este artículo da algunos buenos ejemplos de cómo se pueden utilizar. Dado que son una secuencia animada de imágenes, normalmente tendrán un tamaño de archivo mayor en comparación con una sola imagen.

Disfruto usando JPEG siempre que puedo, ya que requiere la menor cantidad de datos, pero aquí estoy usando PNG para dar un poco más de claridad a las capturas de pantalla. Al igual que con WEBP, puede haber incluso formatos más nuevos, por lo que es una buena práctica investigar continuamente cómo Google ve y clasifica cada uno de los que están disponibles para encontrar la mejor y más rápida respuesta para su página web. Aquí hay un enlace a una guía más detallada sobre los tipos de imágenes más populares.

Usa un compresor de imagen

El siguiente paso sería intentar que el archivo que tienes sea lo más pequeño posible comprimiéndolo y reduciendo el tamaño del archivo. Al ir a un compresor de imágenes y procesar la imagen, a veces podemos hacer que nuestra imagen sea hasta un 90% más pequeña en tamaño de archivo. Una herramienta realmente útil que me gusta usar se llama Compressor. Con esta herramienta puedes comprimir hasta 50 imágenes al día en su plan gratuito.

Aquí estoy tomando la imagen que exporté y la estoy arrastrando directamente a la sección de colocación de imágenes. Después de un par de segundos, la nueva imagen está lista para descargar y tiene menos de una décima parte del tamaño original. También puede importar varias imágenes y descargarlas todas a la vez como se muestra con la opción en la parte inferior.

“Perezoso” vs “Ansioso” cargando tus imágenes

Ahora que tiene su imagen en el formato correcto y comprimida al tamaño correcto, puede pensar que todo está bien, pero todavía hay un par de cosas más que debe asegurarse de hacer. En muchas plantillas y sitios web, la velocidad de carga de imágenes está configurada para cargarse de forma predeterminada en el navegador, lo que puede hacer que todas las imágenes de la página se carguen al mismo tiempo. La solución a esto es cargar la imagen de forma diferida.

La carga "perezosa" difiere la carga del elemento hasta que sea visible en la página. Cuando tiene más de un par de imágenes, esto puede mejorar el rendimiento del sitio. Lo opuesto a esto es la carga "Eager" que carga el elemento de inmediato. Esto generalmente se alinea con la configuración web predeterminada, ya que no hay un conjunto de preferencias sobre qué imagen debe cargarse primero o último.

Aquí hay un ejemplo en el editor de blogs de HubSpot. Después de navegar a la opción avanzada para la imagen insertada, podemos ver que podemos establecer su configuración de carga. Seleccione "Lazy" y presione Aplicar. La imagen ahora aparece cada vez que el usuario se desplaza mucho más cerca de ella y reduce esos preciosos tiempos de carga.

Recuerda agregar texto alternativo

Lo último que debe visitar es incluir texto alternativo en sus imágenes. Es posible que esto no afecte la velocidad de carga de su página, pero siempre es importante considerarlo y agregarlo. Cuando deja la sección en blanco, está perdiendo muchas oportunidades para aumentar su clasificación de SERP.

Una cosa importante a tener en cuenta es que el texto alternativo explica el "por qué" de la imagen en relación con el contenido. Está indexado por Google y se lee en voz alta por texto a voz para personas con discapacidad visual. Si solo está metiendo una sola palabra clave en la imagen que no explica lo que está sucediendo, entonces ese podría no ser el mejor enfoque.

Aquí he añadido el texto alternativo en la imagen. Me baso en la frase Salud de la velocidad de la página SEO. En lugar de incluir solo la palabra clave, explica también cómo o cuál es la acción en la imagen. Decidí elaborar utilizando la frase "Comprobación del estado de la velocidad de la página SEO mediante gráficos".

Esto es mucho más informativo en cuanto a lo que podría ser la imagen para la indexación de Google y otorga una mayor accesibilidad a las personas con discapacidad visual.

Repasemos los pasos para crear/optimizar imágenes:

1. Arrastre la imagen a un editor de imágenes como Figma para recortar y cambiar el tamaño.
2. Expórtelo como el tipo de imagen apropiado (PNG, JPEG, SVG, WEBP, etc.)
3. Llévelo a un sitio de compresión de imágenes como Compressor o Image Resizer Online
4. Inserte la imagen comprimida en su contenido como carga diferida.
5. Agregue texto alternativo que describa las imágenes en su página.
6. ¡Ahora tienes la imagen perfecta para tu sitio!
7. Consulte Google Search Console para comprobar cómo aumenta su rendimiento.

Siga estos pasos y estará en el buen camino para mantener y optimizar sus imágenes para SEO y acelerar la velocidad de su página, ¡creando una experiencia de usuario fantástica!