SEO 3/10 en Jekyll: Imágenes que cargan en un parpadeo sin sacrificar calidad

¡Saludos de nuevo! En los últimos dos posts, hemos sentado las bases del SEO on-page en Jekyll: primero, con URLs amigables, y luego, con la optimización de títulos y meta descripciones. Hoy, vamos a abordar uno de los mayores culpables de la lentitud en la web: las imágenes.

Todos amamos las imágenes de alta calidad. Ilustran nuestros puntos, rompen la monotonía del texto y hacen que una página sea visualmente atractiva. Sin embargo, un archivo de imagen pesado puede anular por completo la ventaja de velocidad que un sitio Jekyll te da. La buena noticia es que puedes tener lo mejor de ambos mundos: imágenes espectaculares y una velocidad de carga asombrosa.

¿Por qué la optimización de imágenes es vital para el SEO?

• Velocidad de carga: Google considera la velocidad de carga como un factor de clasificación crucial. Un sitio lento frustra a los usuarios y hace que reboten, lo que afecta negativamente tu ranking.
• Experiencia de usuario (UX): Los usuarios esperan que las páginas carguen rápidamente. Si tienen que esperar, es probable que se vayan a otro sitio.
• Mejor posicionamiento en Google Imágenes: Al optimizar tus imágenes, no solo mejoras tu ranking en la búsqueda web, sino que también te posicionas para búsquedas en Google Imágenes.

La solución Jekyll: un enfoque de tres pasos

Paso 1: Elige el formato adecuado

No todos los formatos de imagen son iguales:

• WebP: Este formato es el estándar moderno para la web. Ofrece una calidad de imagen superior con un tamaño de archivo mucho menor que JPG o PNG. Es compatible con todos los navegadores modernos.
• JPG: Ideal para fotografías y otros gráficos complejos. Úsalo como respaldo si WebP no es una opción.
• PNG: Perfecto para imágenes con transparencia o gráficos con pocos colores.

Paso 2: Optimiza el tamaño y el peso

• Comprime tus imágenes: Puedes usar herramientas en línea como Compressor.io o scripts en tu terminal. La idea es reducir el tamaño del archivo sin perder calidad perceptible.
• Dimensiones correctas: No uses una imagen de 4000px de ancho si solo va a mostrarse a 800px. Redimensiona las imágenes antes de subirlas.
• Automatización: Si manejas muchas imágenes, puedes automatizar este proceso con scripts de optimización integrados en tu flujo de trabajo con Jekyll.

Paso 3: Aprovecha los atributos HTML

• Nombre de archivo: Usa nombres descriptivos, separados por guiones. Por ejemplo, optimizacion-imagenes-jekyll.webp en lugar de IMG_54321.webp. Incluye una palabra clave si es relevante.
• Etiqueta alt: Este es el texto que se muestra si la imagen no carga y es leído por los lectores de pantalla. También es un factor SEO importante. Describe la imagen de manera precisa.

Ejemplo:

<img src="/assets/img/optimizacion-seo-jekyll.webp" alt="Proceso de optimización de imágenes para SEO en Jekyll">

• Carga diferida (Lazy Loading): Con el atributo loading="lazy", las imágenes solo se cargarán cuando el usuario se acerque a ellas en la página. Esto mejora drásticamente el rendimiento inicial de carga.

Ejemplo:

<img src="/assets/img/optimizacion-seo-jekyll.webp" alt="Proceso de optimización de imágenes para SEO en Jekyll" loading="lazy">

Resumen: Un sitio rápido y visualmente atractivo

Optimizar tus imágenes es una de las tareas con mayor retorno de inversión en términos de rendimiento y SEO. Con estos sencillos pasos —elegir el formato correcto, optimizar el tamaño y usar los atributos HTML—, te asegurarás de que tu blog en Jekyll no solo sea ultrarrápido, sino que también se vea espectacular.

¡En el próximo post, exploraremos cómo organizar la estructura de tu sitio para que sea aún más amigable con Google!