Para la óptima gestión de contenidos de una Web informativa, es necesario el aprendizaje de 2 variables esenciales: el manejo de imágenes en el sitio y la redacción de textos.
En el artículo de hoy profundizaremos en el primero de los temas y, te mostraremos cómo tratar las imágenes y cómo realizar la carga de las mismas a la Web de manera eficaz. Además, al final del post te diremos cuales son los mejores sitios en donde puedes medir la velocidad de carga de tu página Web.
El peso de las imágenes incide de forma directa en la velocidad de carga de una página. Recuerda que cuanto más pesado sea un sitio, el tiempo de carga aumentará, haciendo que la experiencia de usuario (UX) empeore. Esto provoca un aumento de tasa de rebote, además de que se tengan menos posibilidades de aparecer en las primeras posiciones de los resultados de las búsquedas.
Calidad y tamaño ideal para las imágenes
Google es uno de los buscadores más utilizados y su algoritmo emplea más de 100 variables diferentes para mostrar resultados. Además de verificar la velocidad de carga de las páginas, una de las variables más importantes es el peso de las imágenes. Conseguir el equilibrio entre calidad y tamaño es primordial para mejorar el resultado de esta métrica.
Para ello, no se trata de reducir el tamaño de las imágenes simplemente afectando a su calidad, sino de disminuir el tamaño de sus pixeles. Cuanto mayor sea la cantidad de píxeles de una imagen, mayor será el peso de la misma. Por lo tanto, para subir imágenes a una web lo recomendable será reducir los píxeles.
En cuanto a tamaños de imagen ideales, la medida puede variar según el área y tipo de publicación de la página. Por ejemplo, una portada por lo general sería una foto de mayor tamaño y visibilidad que el resto de los elementos. No obstante, esta imagen no debe sobrepasar los 300 KB.
¿Qué formatos de imagen hay que utilizar para Web?
Existen diferentes alternativas para realizar la carga de imágenes. Formatos como PNG y JPG son las más utilizados, pero no son las únicas opciones. Revisar la definición y usos de estas alternativas resultaría muy útil para una toma de decisiones acertada:
1. Imágenes en formato JPG
Es el formato de uso universal por excelencia y es compatible con la mayoría de los principales navegadores. Plataformas conocidas como Facebook, Instagram y otras convierten de manera automática los archivos cargados a formatos JPG. A nivel visual, esta es una de las mejores alternativas.
La desventaja principal es que, en el proceso de compresión, este formato también reduce la calidad de las imágenes. Además, no soporta fondos transparentes.
2. Imágenes tipo PNG
Un tipo de formato muy popular. Su principal característica y diferencia con el anterior es que el uso de este formato no supone una pérdida de calidad de la imagen. Además, permite la configuración de imágenes con fondos transparentes.
No es recomendable utilizarlo con imágenes de alta resolución, pues aumentará el peso. Son ideales para el trabajo con gráficos o imágenes con mucho texto.
3. GIF o imágenes animadas
Un formato muy conocido y muy utilizado en aplicaciones de mensajería. La compresión en este formato no genera pérdida de calidad, aunque tiene algunas restricciones: Solo trabaja a 8 Bits por pixel y su paleta de colores está limitada a 256.
Su mayor ventaja es la capacidad de animación. Usada de manera estratégica puede ser muy eficaz para hacer llamadas a la acción.
4. Imágenes de formato SVG
Este tipo de formato es muy interesante ya que su estructura es vectorial. Casi todos los navegadores de hoy en día tienen compatibilidad con este formato.
Una ventaja notoria es que, al ser de tipo vectorial, la calidad de la imagen siempre se mantiene sin importar a qué tamaño se escale. El uso más recomendado es para la creación de iconos o logos para usar en Internet.
Opciones para optimizar las imágenes antes de subirlas a una Web
A continuación explicaremos las 3 mejores formas de comprimir las imágenes antes de que se muestren en tu sitio Web. Lo recomendable es combinar estos 3 métodos para lograr la máxima ligereza.
1. Optimizar las imágenes con un software cómo Photoshop
Este software es el más utilizado para la edición y maquetación de imágenes y, con el que trabajamos en Bisign. Tiene la capacidad de reducir una imagen de 5 MB a una en el rango de 20 a 100 kB. Además, lo hace manteniendo un equilibrio ideal entre calidad y tamaño de archivo.
Es necesario contar con una licencia para usar este programa. No obstante, hay alternativas de uso gratuito y código abierto como Inkscape.
2. Comprimir las imágenes Online
En este caso, el mercado cuenta con algunas opciones gratuitas que ofrecen excelentes resultados. Por ejemplo, Tiny png te permite procesar hasta 20 imágenes de manera simultánea, siempre y cuando estas imágenes no excedan los 5 MB. Por otro lado, tenemos Web Resizer está disponible de forma gratuita y online. Tiene características similares y muy intuitivas.
En el caso de escoger formatos como JPG o PNG, que son los más utilizados, es necesario tener algunas opciones para la compresión de imágenes. Entre ellas podemos destacar:
3. Plugins de WordPress para comprimir las imágenes
Al utilizar plataformas como WordPress se pueden emplear algunos plug-ins para optimizar y comprimir las imágenes. Smush, por ejemplo, permite entre otras cosas adaptar primero el tamaño de la imagen para después comprimirla.
Otra opción útil para optimizar la velocidad de carga es SG Optimizer o Lite Speed Caché. Este gestiona la velocidad de carga en general de la página y también tiene un compresor de imágenes.
Beneficios de cara al SEO y UX
Cada uno de estos aspectos son realmente importantes. Hay que tener en cuenta que algoritmos como el de Google se han especializado en optimizar la experiencia del usuario (UX). El objetivo será orientar las acciones de mejoras del SEO para conseguir la mejor experiencia del usuario. Estas deben ser amigables, fluidas y rápidas.
BONUS: ¿Cómo medir el tiempo de carga de una página Web y sus imágenes?
La velocidad de carga de una página es determinante para un mejor posicionamiento, por lo que cada segundo cuenta. Según las estadísticas, por cada segundo adicional de carga de un sitio, disminuyen las probabilidades de ser vista en un 11%. Por otro lado, el 40% de los usuarios abandona una página si esta tarda más de 3 segundos en cargar.
Existen varias herramientas para medir la velocidad de carga: una de las más utilizadas PageSpeed Insights. Al introducir el link, esta herramienta genera varias sugerencias útiles incluso para las versiones optimizadas para móviles. Otra muy conocida es GTmetrix, cuyas funciones son similares.
¿Todavía tienes alguna pregunta sobre cómo gestionar las imágenes en tu Web? ¡Háznoslo saber en los comentarios e intentaremos ayudarte!
