• Categoría de la entrada:blog / News
  • Última modificación de la entrada:septiembre 12, 2022

La última actualización de Google aumentó aún más la importancia del contenido visual en el ranking de páginas. En efecto, optimizar imágenes, especialmente en e-commerce, reduce la velocidad de carga y mejora significativamente el ranking de una web.

Entonces, ¿por qué deberías optimizar imágenes en todos tus sitios en este momento? Muy simple: si no lo haces, corres el riesgo de que los consumidores detengan su navegación en una web por completo. Según lo reporta Adobe, el 53 % de las personas abandonan una página si no pueden visualizarla correctamente. Sigue leyendo para aprender más sobre esto.

10 HERRAMIENTAS DE MARKETING DE CONTENIDOS

6 consejos para optimizar imágenes en e-commerce

Recientemente, Google Search Central (GSC) publicó un video imperdible acerca de cómo se debe abordar la optimización de imágenes. Es Alan Kent, desarrollador encargado del área de e-commerce de Google, quien realiza una revisión de puntos clave que hay que considerar al realizar este proceso:

1. Eliminar el desplazamiento de diseño acumulado (CLS), clave para optimizar imágenes

Imagina que estás tratando de leer una página y todo comienza a cambiar a tu alrededor. O que agregas un elemento al carrito y un repentino pop-up mueve el botón de compra de su lugar. Este tipo de experiencias generan ruido y se manifiestan como una frustración entre los usuarios. Tal es su importancia que Google lo definió como una de las tres métricas principales de Web Vitals.

Al respecto, GSC recomienda la utilización de herramientas como PageSpeed Insights para reducir el CLS; es decir, el rango de tiempo que le toma a los elementos de diseño cambiar de posición. Al respecto, Kent resalta su utilidad, ya que presenta datos de laboratorio y de campo en un solo informe. Para reducirlo el CLS, también se recomienda evitar:

  • Cambios de diseño invasivos.
  • Imágenes que no tengan ancho y alto explícitos.

Solucionar problemas de almacenamiento en caché de imágenes puede ser simple. Por ejemplo, basta con incluir las dimensiones de la imagen en el marcado HTML. De esta forma, el navegador sabe inmediatamente cuánto espacio reservar para la imagen.

2. Elegir el ancho y la altura correctos para las imágenes

En este nuevo apartado para optimizar imágenes, GSC igualmente resalta la importancia del uso de PageSpeed. Usando esta herramienta se logran detectar anomalías en el tamaño de las imágenes. También, se ​​identifican imágenes en una página que tienen dimensiones más grandes de lo necesario.

Una vez que hayas detectado un problema puedes, por ejemplo, aplicar comandos de atributo en HTML enumerando las URL de diferentes tamaños y formatos de imágenes. De esta manera, el navegador podrá elegir la mejor imagen para descargar en cada caso.

3. Utilizar formatos de imagen actualizados

En este apartado se destaca la importancia de generar una distinción entre las necesidades de diseño, comparadas con los tipos de formatos a usar. Concretamente, se debe tener cuidado con formatos como JPEG y WEBP, en relación con su peso. Estos se pueden reducir utilizando algoritmos de compresión con pérdida de tamaño.

Si requieres optimizar imágenes con píxeles perfectos, como para íconos de botones, debes emplear formatos menos eficientes. Alternativamente, en lugar de elegir un solo formato, puedes hacer que tu sitio web se convierta en el formato más eficiente que el navegador dice que admite.

LA DISTRIBUCIÓN DE CONTENIDOS EN EL MUNDO ACTUAL

4. Codificar las imágenes de manera eficiente

PageSpeed tiene una sección que permite identificar imágenes candidatas para compresión. Para encontrar un factor de calidad con el que estés satisfecho, agrega en tu herramienta de optimizar imágenes favoritas diferentes valores de calidad. Un valor predeterminado común para WEBP es 75. Al respecto, Kent señala: «Si bien las imágenes de menor calidad pueden sonar como una mala idea, recuerda que la degradación de la calidad puede no ser percibida por los compradores».

5. Caché de imágenes usado en el navegador

Decirle al navegador cuánto tiempo y dónde puedes almacenar imágenes en caché beneficia el tiempo de carga de una web. Usando el informe de análisis podrás detectar oportunidades para optimizar imágenes.

Si es tu caso y eres de los que no cambia las imágenes con frecuencia, entonces puedes establecer una duración de caché más larga. Otro truco es almacenar imágenes en múltiples ubicaciones alrededor del mundo, más cerca de donde se conectan tus usuarios.

6. Secuenciar el orden en que se descargan los recursos, necesario para optimizar imágenes

Cualquiera que sea el enfoque que utilices para optimizar imágenes, existe un cuello de botella en el ancho de banda de la red. En general, desearás programar la descarga imágenes destacadas de gran tamaño en la parte superior de la página.

Luego las imágenes serán visibles sin necesidad de desplazarse en tu página. Una técnica común para mejorar el orden de carga de imágenes es la carga diferida. Aquí es donde las imágenes no se descargan hasta que el usuario se desplaza a esa parte de la página.

Para finalizar, sabemos que las imágenes en realidad producen tráfico a tu contenido, lo que tiene el potencial de generar permanencia y aumentar el rango de tu página. Como consecuencia, todos los esfuerzos que apliques siguiendo estos consejos pronto darán frutos. 

¿Qué tan útil fue esta publicación?

¡Haz click en una estrella para puntuarla!

Puntuación media 5 / 5. Recuento de votos: 2

No hay votos hasta ahora! Sé el primero en calificar esta publicación.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

ebook-formatos-de-contenido
Cerrar menú
account android arrow-alt-circle-down arrow-alt-circle-left arrow-alt-circle-right arrow-alt-circle-up arrow-down arrow-left arrow-right arrow-up author bars behance blogger buffer caret-down caret-left caret-right caret-square-down caret-square-left caret-square-right caret-square-up caret-up cart-menu-1 cart-menu-2 cart-menu-3 cart-menu-4 categories chevron-down chevron-left chevron-right chevron-up clock close comments cookies copyright coupon-discount date-modified date-published discord double-arrows-down double-arrows-left double-arrows-right double-arrows-up dribbble envelope-open envelope eye facebook fax flickr foursquare github gmail google-drive grid-view hashtag hollow-ring homepage instagram ios level-down-alt level-up-alt line link linkedin list-view login logout long-arrow-alt-down long-arrow-alt-left long-arrow-alt-right long-arrow-alt-up medium messenger mobile-menu mobile phone pinterest place qq quote-left quote-right quotes reading-time-hourglass reading-time-stopwatch reddit rss scroll-to-top search shazam shopping-bag shopping-cart side-panel-opening-2-left side-panel-opening-2-right side-panel-opening-left side-panel-opening-right skype slack small-arrow-down small-arrow-left small-arrow-right small-arrow-up sms snapchat soundcloud spinner spotify stackoverflow sync telegram tiktok times-circle tinder trello tripadvisor tumblr twitch twitter viber vimeo vine vkontakte website wechat whatsapp windows wishlist xing yelp youtube zoom