¿No está seguro de por qué su sitio no está bien posicionado en Google o por qué los consumidores no interactúan con él? Los tamaños de imagen de los sitios web y la velocidad de los sitios web y los problemas de SEO a menudo se ven que afectan las tasas de rebote y las clasificaciones.
Para muchas personas, guardar imágenes para la web siempre ha sido un misterio. Las imágenes pesadas (tamaños de imagen originales de 5000 píxeles de ancho, imágenes no optimizadas) no solo degradarán la experiencia del usuario en su sitio, sino que también tendrán un impacto negativo en su estrategia de SEO (velocidad de carga, tasa de rebote, clasificación, etc.).
Desglosemos la lista de pautas de tamaño de imagen del sitio web.
¿Por qué son importantes el Tamaño de las Imágenes y el Rendimiento del Sitio web?
Los sitios web tardan más en cargarse cuando los gráficos no están optimizados. Los sitios web lentos resultan en una mala experiencia de usuario, una menor probabilidad de posicionarse en las búsquedas de Google y, como resultado, menos consultas y consumidores.
Las pautas de tamaño de imagen del sitio web mencionan que guardar sus fotografías en las proporciones correctas y optimizarlas para la web puede ayudar con una variedad de cosas, incluidas:
• Velocidad
Según la investigación de Google, si una página web tarda más de 5 segundos en cargarse, la probabilidad de que un visitante móvil abandone la página aumenta en un 90%. Puede acelerar las páginas de su sitio web al reducir y reducir el tamaño de las imágenes.
* Experiencia de usuario
Los visitantes tendrán una experiencia más atractiva al navegar por su sitio web si utiliza imágenes atractivas y de alta calidad. Estás proporcionando una experiencia fluida y fluida a tus visitantes al mantener esas fotos optimizadas y cargarlas rápidamente, lo que les anima a pasar más tiempo en tu sitio y explorar tu contenido.
* Ranking SEO
Cuanto antes se cargue tu sitio, más alto podrás posicionarte. Tanto en dispositivos móviles como de escritorio, las páginas web con gráficos optimizados se cargan considerablemente más rápido.
* Ventas
Velocidades de carga más rápidas y SEO mejorado pueden ayudar a atraer más visitantes a su sitio, aumentando sus posibilidades de ser contactado y reservado.
¿Cuáles son los Tamaños de imagen Más Apropiados para Sitios Web?
Strikingly está diseñado para trabajar con una amplia gama de tamaños de imagen para diferentes tamaños de pantalla, secciones, estilos y diseños. Sin embargo, a veces es útil tener un concepto aproximado de qué dimensiones cargar.
¡Aquí hay algunas pautas generales de tamaño de imagen del sitio web a seguir!
La imagen se toma de Strikingly
1. Imágenes para el fondo
Las fotos de fondo de Strikingly están diseñadas para adaptarse a una amplia gama de tamaños de pantalla, desde el monitor hasta la tableta y el teléfono. Para garantizar que el telón de fondo se vea excelente en todas las pantallas, recomendamos un tamaño de 1600 píxeles de ancho por 900 píxeles de altura. Incluya fotos de personas, marcas y otra información que no sean de fondo con precaución.
2. Configuración para el fondo
Para ajustar el tamaño/alinear el fondo, tiene algunas alternativas.
Estirar/Cubrir predeterminado: Esta opción estira la imagen para llenar toda la pantalla, tanto en altura como en anchura. Debido a que la imagen funcionará como fondo en cualquier tamaño de pantalla, esta suele ser la mejor solución. Sin embargo, si tu imagen tiene contenido a los lados (especialmente a la izquierda y a la derecha), es posible que no sea visible en los teléfonos móviles.
Contain: Contain mostrará la imagen completa, asegurando que no se corte parte de ella. Sin embargo, en algunos dispositivos, esto puede generar un espacio en blanco.
Centro: La imagen se mostrará en el centro de la sección y no se escalará si elige el centro. Por otro lado, el fondo mostrará que el espacio en blanco alrededor de los bordes de la imagen es demasiado pequeño. Algunos elementos de la imagen pueden cortarse si es demasiado grande, especialmente en pantallas más pequeñas.
Mosaico: El mosaico se centrará y luego repetirá una imagen, lo que es útil para crear patrones.
Para comenzar las pautas de tamaño de imagen del sitio web, anote el ancho de la imagen que aparece en la página.
La imagen se toma de sorprendentemente
El tamaño ideal de las imágenes de fondo es de 1600x900px
• Imágenes de ancho completo
Deben tener al menos 1400 píxeles de ancho para obtener los mejores resultados. Según las pautas de tamaño de imagen del sitio web
* Las imágenes de medio ancho
Las imágenes de medio ancho deben tener al menos 700 píxeles de ancho para obtener la mejor calidad.
Las imágenes deben tener al menos 480 píxeles de ancho para obtener imágenes de 1/3 de ancho de la mejor calidad.
* Imágenes de ¼ de ancho
Para obtener imágenes de 1/4 de ancho de la mejor calidad, deben tener al menos 360 píxeles de ancho.
* Los iconos y logotipos pequeños
Deben tener al menos 100 píxeles de ancho.
* Imágenes de galería
Cualquier tamaño está bien para imágenes de galería! Las imágenes de la galería se abrirán en una caja de luz en la parte superior de su sitio web.
¿Qué Tamaño de imagen se requiere para su Sitio web?
Las imágenes deben ser tan grandes como sea necesario para adaptarse a sus «contenedores» para obtener el máximo rendimiento del sitio web, dependiendo del diseño de su página. Las fotos de diapositivas, por ejemplo, a menudo son más grandes; las imágenes de blog son de tamaño mediano (con un ancho igual al ancho de la página menos la barra lateral); las miniaturas son más pequeñas, y así sucesivamente.
De acuerdo con las pautas de tamaño de imagen del sitio web, es fundamental determinar primero las dimensiones de la imagen para calcular el ancho del área de contenido de su sitio. Puede usar un complemento de navegador » regla de página «para ayudarlo a tomar las medidas, o puede usar las herramientas para desarrolladores integradas en su navegador web si tiene experiencia: Haga clic con el botón derecho en cualquier elemento de página y seleccione» Inspeccionar » en el menú desplegable.
La imagen se toma de Strikingly
Luego, en la barra de herramientas, use la herramienta selector de elementos para pasar el cursor sobre la sección de imagen o contenido que le interesa:
La imagen se toma de Strikingly
La imagen se toma de Sorprendentemente
En este caso, la columna de arriba requiere una imagen con un ancho de al menos 525 píxeles.
Decimos » al menos «porque las imágenes en teléfonos inteligentes más nuevos con pantallas» retina » de alta densidad deben ser más grandes que eso para verse lo más nítidas posible.
Considere los siguientes escenarios:
A. Tamaño de imagen Web de presentación de diapositivas de ancho completo
Las pautas de tamaño de imagen del sitio web recomiendan 2560 píxeles de ancho para presentaciones de diapositivas de ancho completo (que se extienden automáticamente al tamaño completo del navegador). Este es el ancho de resolución habitual para monitores de 27″ y 30″.
Las imágenes pueden ser tan altas como desee para lograr la relación de aspecto que elija. Las presentaciones de diapositivas a página completa, por ejemplo, que son comunes en los sitios web de fotografía de bodas, mantienen la relación de aspecto original de las fotografías. Otros sitios web hacen uso de una presentación de diapositivas que abarca todo el ancho de la página, pero tiene menos altura (lo que lleva a una relación de aspecto de alrededor de 3:1).
El siguiente es un ejemplo de presentaciones de diapositivas» panorámicas » de sitios web fotográficos:
La imagen se toma del sitio web de Strikingly usre
Las imágenes deben tener 2560 (redondear a 2500px) píxeles de ancho y cualquier altura que elija para imágenes que abarquen todo el ancho del navegador (dependiendo de si desea conservar la relación de aspecto nativa de sus imágenes o optar por un corte más panorámico).
Este no es un caso en el que necesitemos duplicar el tamaño de imagen para pantallas retina, ya que daría lugar a imágenes masivas de 5000 píxeles (sin agregar los peligros del robo de imágenes, con tamaños de archivo grandes).
Ajuste el tamaño de imagen requerido para presentaciones de diapositivas más pequeñas que no ocupen todo el ancho de la página, sino solo una parte de ella (tal vez 2000px, o 1800px, etc.).)
La imagen se toma del sitio web de Strikingly usre
B. Los tamaños de imagen en Galerías (y Miniaturas que se agrandan en una Vista de Caja de luz)
Las galerías de miniaturas son situaciones únicas en las que se ignora el tamaño de las miniaturas para garantizar que las fotos sean lo suficientemente grandes cuando se amplían.
Una cuadrícula de fotos en miniatura que, al hacer clic, se abre en una presentación de diapositivas a pantalla completa (normalmente con una superposición semitransparente debajo) se conoce como «vista de caja de luz»:
Debido a que esas fotografías se abrirán en modo de pantalla completa, las pautas de tamaño de imagen del sitio web recomiendan hacerlas de al menos 1500 píxeles de ancho (en el borde más largo) para que se vean bien en computadoras de escritorio y tabletas.
Incluso puedes subir hasta 2000 píxeles si quieres añadir un «factor sorpresa» extra, aunque normalmente no es el caso.
Las imágenes son ajustadas por el navegador en dispositivos móviles de todos modos, y 1500px es lo suficientemente grande como para verse nítidas en teléfonos inteligentes con pantallas «retina» de alto PPI.
Las imágenes verticales / verticales con una altura máxima de 1200 píxeles (como 800×1200 píxeles para una imagen vertical de 2:3 o 900×1200 píxeles para una imagen vertical de 3:4) pueden ser incluso más pequeñas.
Si la presentación de diapositivas permite navegar entre fotos usando flechas laterales, viñetas, deslizar en el móvil o flechas de teclado en el escritorio, limitar las dimensiones de la imagen de esta manera mantendrá el tamaño del archivo razonablemente corto, lo que resultará en cargas de imágenes más rápidas:
C. Tamaños de imagen recomendados para Publicaciones de blog y Otras Imágenes estáticas en Diseños de página
Si las fotos de su blog no requieren una función de clic para agrandar (o «caja de luz»), ancho de columna o área de contenido.
Tome el siguiente ejemplo de una sola publicación de blog:
La imagen está tomada del sitio web de Strikingly usre
Puede determinar el ancho real del área de contenido midiendo cualquier párrafo de texto utilizando los métodos descritos anteriormente, por ejemplo:
La imagen está tomada del sitio web de Strikingly usre
Alternativamente, si ya tiene imágenes, puede ver a qué tamaño las está redimensionando el navegador.
Para adquirir la misma información, puede usar un complemento de navegador como Ver Información de imagen (propiedades).
Con esa información (825 píxeles, por ejemplo), ahora puede duplicar el tamaño para tener en cuenta las pantallas retina (es decir, 1650 píxeles de ancho).
Dependiendo del tema de su sitio y de su tolerancia al riesgo de robo de imágenes, puede reducir esa cantidad a 1200 píxeles más sensibles en el borde más largo (por lo que las imágenes horizontales deben tener 1200 píxeles de ancho y las imágenes verticales deben tener 1200 píxeles de alto, conservando su relación de aspecto original).
Las fotos más pequeñas utilizadas como miniaturas (que no necesitan expandirse) están sujetas al mismo proceso de toma de decisiones.
Conclusión
Estas pautas de tamaño de imagen del sitio web no se aplican realmente a los servicios de archivo fotográfico como PhotoShelter o SmugMug (que tienen medidas de seguridad integradas y generan miniaturas de baja resolución a partir de sus archivos de alta resolución originales según lo necesite el sitio), o cuando vende esas imágenes como descargas o impresiones, como se mencionó al principio.
Seguir estas pautas de tamaño de imagen del sitio web es una práctica obligatoria si tiene un sitio auto hospedado y solo necesita presentar sus fotografías en la web.
Elegir las imágenes adecuadas es un aspecto importante de la creación de un sitio web visualmente atractivo y de carga rápida. Hay, sin duda, una curva de aprendizaje. Sin embargo, hay otras ventajas que se tenía, y todo es parte de la emoción de crear y mantener un sitio web!