Producción de contenidos digitales

¿Cómo optimizar las imágenes de un sitio web?

Una parte importante de las interfaces y contenidos de una plataforma digital está compuesta de imágenes. Aún así, en muchos casos no se les da gran importancia a estos elementos por considerarlos decorativos y complementarios.

Sin embargo, su influencia es tan grande que puede determinar el éxito de un proyecto. La optimización de las imágenes afecta directamente a tres aspectos fundamentales de un proyecto:

• Rendimiento o performace: Influyen en la velocidad de carga y respuesta de un sitio web, afectando la experiencia de usuario. Además, es sabido que Google califica negativamente a los sitios con bajo rendimiento.
• Posicionamiento orgánico: Los buscadores tienen problemas para rastrear e indexar las imágenes que no están correctamente optimizadas.
• Usabilidad y accesibilidad: Las imágenes no optimizadas pueden presentar problemas de visualización, afectando la facilidad de uso y acceso de los contenidos.

Por todo esto, optimizar las imágenes es una tarea clave para poder llegar a los usuarios en canales digitales y ofrecerles una buena experiencia.

Medidas técnicas para optimizar imágenes

Existen algunas medidas técnicas que puedes aplicar para mejorar el rendimiento de los archivos de imagen. Estas deben tomarse en cuenta desde la producción de los contenidos.

Usa una resolución adecuada para pantallas

A diferencia de los medios impresos, en plataformas digitales no es necesario que la resolución sea muy buena. Es más, si es muy alta afectará negativamente al rendimiento del sitio web.

La resolución ideal dependerá de varios factores, como el contexto de uso, el diseño y el ancho del contenedor, entre otros. Como referencia, 72 pp son usualmente suficientes para un sitio web.

Reduce el tamaño de los archivos

El tamaño de los archivos afecta directamente la velocidad de carga de las páginas. Ten en cuenta que la mayoría de los usuarios espera máximo tres segundos para ver los contenidos, después de eso abandonan el sitio.

El desafío es encontrar un buen balance entre peso y calidad. Es decir, debes reducir lo más posible el tamaño del archivo, sin afectar la visualización de la imagen.

Selecciona el formato adecuado

Los formatos de imagen cumplen distintas funciones, por lo que algunos serán más adecuados que otros, dependiendo de la situación. Estos son algunos consejos generales:

• Para un ecommerce o un sitio con muchas imágenes estáticas, JPEGs son la mejor opción. Este formato entrega una buena calidad de imagen en un archivo pequeño.
• Los GIFs son útiles para mostrar animaciones e imágenes decorativas pequeñas.
• El formato PNG destaca por ser liviano y puede ser una alternativa para JPEG y GIF, pero solo en imágenes decorativas, simples y pequeñas.

Guarda las imágenes para la web

Photoshop y otros editores de imagen ofrecen la opción de “guardar para web”. Con esta función se pueden explorar distintas opciones para reducir el tamaño sin afectar la calidad.

Acciones SEO para optimizar imágenes

Existe otro conjunto de medidas que están orientadas a mejorar la visibilidad de las imágenes en los resultados de búsqueda. A diferencia de las medidas técnicas, las optimizaciones SEO pueden aplicarse en los contenidos ya creados.

Usa títulos descriptivos para los archivos

Los títulos son considerados por las arañas indexadoras e influirán en su posicionamiento. Evita usar nombres o nomenclaturas de uso interno, ya que estas no significarán nada para los buscadores.

Para optimizarlos, usa palabras clave relevantes y competitivas. Además, debes considerar que Google cada vez mejora más sus tecnologías de reconocimiento de imágenes. Si el título no calza con el contenido, el buscador lo sabrá y pensará que es una práctica black hat.

Optimiza las etiquetas Alt

Las etiquetas Alt no solo ayudan a los buscadores a identificar las imágenes y clasificarlas, también mejoran la accesibilidad y usabilidad.

El acceso a los contenidos mejora porque las personas que tienen visión reducida usan lectores de páginas web, los que leen las etiquetas de cada imagen. Además, si un usuario tiene una conexión o sistema muy lento y las imágenes no cargan, lo que verá será el texto Alt.

El contenido de la etiqueta Alt es también el texto que aparecerá cuando los usuarios pasen el puntero sobre la imagen. Si esta información es útil, facilitará la comprensión de los contenidos, mejorando la usabilidad.

Crea un sitemap de imágenes

Los sitemaps de imágenes ayudan a que los buscadores encuentren las imágenes incluidas en galerías de JavaScript o cualquier otro medio que las arañas no puedan rastrear por no aparecer directamente en el código fuente.

Además, podrás informarle al buscador sobre los archivos que quieres que indexe y los que no debe considerar.

Recuerda que estas optimizaciones aplican para todo tipo de imágenes, incluso las decorativas. Los fondos, botones y bordes, entre otros, también pueden afectar el rendimiento y posicionamiento de la plataforma. Como recomendaciones generales, usa PNG-8 o GIFs para estas imágenes y CSS para las áreas de colores.

Para asegurar el éxito de tu proyecto, puedes complementar estos consejos con otras técnicas para mejorar el rendimiento web y posicionar orgánicamente una plataforma.