Guía de uso correcto de imágenes para tu página web
Es fundamental el uso de imágenes adecuadas en tu página web, tanto en formato como en tamaño, no solo mejora la experiencia de usuario, si no también el desempeño de tu sitio y el SEO técnico.
Proporciones y Imágenes en tu página web
Existen diferentes recomendaciones sobre las dimensiones que se deben utilizar para las imágenes de un página web, por lo que antes de entrar en un debate sobre píxeles, debemos ponernos de acuerdo en las proporciones. Identificar la forma de la imagen para cada sección de tu sitio (qué proporciones deben utilizarse) es un paso crítico inicial.
Proporciones Comunes:
Favicons, Logos y Imágenes de Plantillas para páginas web
Los favicons son los pequeños iconos que se encuentran en la pestaña de tu navegador, en tus marcadores y en los resultados de búsqueda de Google. No se utilizan en muchos lugares, pero todavía es importante tenerlos en tu página web.
Los archivos de favicon deben ser .ico o .png y deben tener una proporción de 1:1 (cuadrado) con un tamaño mínimo de 16×16 píxeles y recomendamos que hoy en 2023, lo subas en 512×512 pera una mejor experiencia de usuario.
Para convertir un archivo PNG a un archivo ICO, puedes utilizar herramientas como favicon.io.
¿Quieres crear tu próxima página o proyecto web?
Logos en la Barra de navegación de páginas web
Si estás utilizando el logotipo de tu página web en la barra de navegación superior, te recomendamos que el tamaño de tu imagen de logotipo sea:
“Hero image” y Tamaños de Imágenes a Pantalla Completa
Tu “Hero image” probablemente tenga una proporción de 16:9 si tienes la intención de utilizar toda la altura del navegador. En esta proporción, el ancho de tu imagen probablemente oscilará entre 1500 píxeles (mínimo absoluto) y 2560 píxeles (máximo recomendado). Recomendamos optar por un ancho de 1920 píxeles, ya que es el ancho de navegador más común en América del Norte.
¿Cuáles son las resoluciones de pantalla más comunes?
Según StatCounter, desde abril de 2022 hasta mayo de 2023, las resoluciones de pantalla de escritorio más comunes en todo el mundo son:
Ten en cuenta que incluso el tamaño de navegador más común no representa ni siquiera el 20% de la cuota de mercado. Puede ser sumamente esclarecedor consultar el Informe de Resolución de Pantalla de Google Analytics para ver cuáles son los tamaños de pantalla más comunes para tu audiencia específica. En el ejemplo a continuación, vemos que, de lejos, los visitantes consumen el contenido de esta página web en dispositivos móviles pequeños (que notablemente no se incluyen en las estadísticas de ‘vista de escritorio’ mencionadas anteriormente).
El Tamaño del Archivo Importa
Si bien “más grande es mejor” cuando se trata de garantizar una experiencia de alta resolución, más grande NO es mejor cuando se tiene en cuenta el tiempo de carga de la página. Dado que el tiempo de carga de la página es un factor clave en el algoritmo de Core Web Vitals de Google, querrás asegurarte de que el tamaño de archivo de tu imagen más grande no sea superior a 20 MB.
Si planeas colocar más de una imagen en tu página web, el tamaño de archivo de cada imagen se sumará al tamaño total de la página. Tamaños de archivo grandes y múltiples archivos afectarán al rendimiento del sitio y a los tiempos de carga de la página.
Tamaños de “Hero Image” para Dispositivos Móviles
La mayoría de las páginas web responsivos redimensionarán automáticamente las imágenes de héroe para que se ajusten al dispositivo en el que se muestran. Sin embargo, si tienes imágenes muy grandes o estás utilizando videos en las secciones de héroe, es posible que desees especificar imágenes alternativas para mostrar cuando alguien visita el sitio en una pantalla más pequeña. Esto puede ayudar con el tiempo de carga de la página en dispositivos que utilizan datos en lugar de Wi-Fi, y también puede ayudar a ahorrar ancho de banda y uso de datos para aquellos que están en sus teléfonos.
Aquí tienes algunas proporciones y tamaños recomendados para imágenes de encabezado en dispositivos móviles:
En resumen
El uso de imágenes en tu página web es esencial para mejorar la experiencia del usuario, el rendimiento de tu sitio y el SEO técnico. Para aprovechar al máximo estas imágenes, es crucial prestar atención a las proporciones adecuadas. Las proporciones comunes como 1:1, 16:9, 3:2, 4:3 y 1.59:1 se adaptan a diferentes propósitos y plataformas, asegurando que tus imágenes se vean bien en cualquier lugar.
No debes pasar por alto los detalles, como los favicons, que son pequeños pero importantes para la identidad de tu sitio. Además, al considerar el tamaño de las imágenes, ten en cuenta las resoluciones de pantalla más comunes. Un equilibrio entre calidad y tamaño de archivo es esencial, ya que imágenes demasiado grandes pueden afectar negativamente el tiempo de carga de tu página.
Para dispositivos móviles, asegúrate de optimizar las imágenes de encabezado con proporciones como 4:5, 1:1 y 1.59:1 para garantizar una experiencia perfecta en pantallas más pequeñas.
Si estás listo para crear tu próxima página web o proyecto, estos consejos te ayudarán a utilizar imágenes de manera efectiva. Ahora, dirígete a nuestra próxima guía sobre el uso de imágenes en páginas web para obtener más información detallada sobre este tema y llevar tu sitio web al siguiente nivel. ¡No te lo pierdas!
