Contenidos
Tamaño recomendado imagenes web
Directrices sobre el tamaño de las imágenes del sitio web 2020
Los sistemas de gestión de contenidos (CMS) han hecho mucho más accesible la gestión de un sitio web, o incluso su creación. Atrás quedaron los días en los que el conocimiento y la comprensión de HTML (y CSS y PHP y todo tipo de siglas) era una necesidad para simplemente cambiar una línea de texto en su sitio web. Ahora sistemas como WordPress, SquareSpace y Shopify (por nombrar algunos) han cambiado el juego del desarrollo web. Y aunque podría aburrirte con las muchas y excelentes razones por las que no deberías intentar construir tu propio sitio web, hoy me gustaría bajar de mi tribuna y hablar de un pequeño detalle que deberías entender absolutamente si estás gestionando tu propio sitio web: El tamaño de las imágenes.
A veces me preguntan, después de entregar las llaves del nuevo sitio web de un cliente, “¿Qué tamaño deben tener mis fotos?”. El problema con esta pregunta es que no hay una sola respuesta. No hay un tamaño perfecto de sitio web a sitio web, y no hay probablemente un tamaño perfecto de página a página en su sitio. Al igual que un marco que se cuelga en una pared, las áreas de imagen de su sitio web están construidas para contener una imagen de una dimensión particular. No esperarías que una foto de 4 x 6 cupiera en tu marco de 8 x 10, y del mismo modo, no puedes esperar subir una foto que no tenga el tamaño correcto y que mágicamente encaje (y se vea bien) en un área de imagen desarrollada para albergar una foto de un tamaño determinado.
Mejor formato de imagen para la web 2020
El punto focal puede variar, pero funcionará mejor si sigue la regla de los tercios. La imagen puede quedar oscurecida por un texto superpuesto en el tercio izquierdo o derecho (abajo o arriba en los móviles). Algunas partes de la imagen serán recortadas para ajustarse a ciertos tamaños de pantalla. Puedes elegir qué parte de la imagen debe tener prioridad.
Foto de portada: 820 x 312Aparecerá en la página a 820 x 312 píxeles. Todo lo que sea menos se estirará.Tamaño mínimo de 400 x 150 píxeles.Se muestra a 820 x 312 píxeles en el escritorio y a 640 x 360 píxeles en los teléfonos inteligentes.No se muestra en los teléfonos con funciones.Para obtener los mejores resultados, sube un archivo JPG sRGB de menos de 100 KB.Las imágenes con un logotipo o texto pueden ser mejores como archivo PNG.Las dimensiones de la página de empresa son exactamente las mismas que las de las cuentas personales.
Imagen compartida (en un post): 1.200 X 630Tamaño de subida recomendado de 1.200 x 630 píxeles.Aparecerá en el feed con un ancho máximo de 470 píxeles (se escalará a un máximo de 1:1).Aparecerá en la página con un ancho máximo de 504 píxeles (se escalará a un máximo de 1:1).
Tamaño de las fotos: 1080 x 1080El tamaño de las imágenes de Instagram se ha incrementado a 1080 x 1080 píxeles.Instagram sigue escalando estas fotos a 612 x 612 píxeles.Aparecerán en el feed a 510 x 510 píxeles.Fotos cuadradas o rectangulares: asegúrate de mantener una relación de aspecto entre 1,91:1 y la relación 4:5.Las imágenes de cabecera destacadas más pequeñas aparecen como 204 x 204 píxeles, y las imágenes de cabecera destacadas más grandes aparecen como 409 x 409 píxeles.
COMPARTIR Una imagen puede decir 1.000 palabras. Las imágenes son más importantes que nunca para transmitir su mensaje. Sin embargo, las imágenes mal exportadas pueden tener un aspecto de baja calidad, hacer que su sitio se cargue lentamente y perder el compromiso de los usuarios. Estos son algunos consejos que puedes utilizar para asegurarte de que cada gráfico sea bonito y nítido.
Hay dos espacios de color que los ordenadores utilizan para mostrar las imágenes: RGB y CMYK. RGB (rojo, verde, azul) es el espacio de color estándar para los dispositivos digitales. Por defecto, cualquier imagen creada por una cámara u ordenador se guarda en este perfil de color. Sin embargo, es posible que tengas imágenes que sean CMYK, un perfil de color utilizado por las impresoras. Antes de utilizar estas imágenes en la web, un programa como Adobe Photoshop puede convertir los colores a RGB para que sus imágenes sean vívidas y brillantes.
Para convertir una imagen CMYK a RGB, abre la imagen en Adobe Photoshop. Ve a Imagen en tu barra de menú, y en el desplegable pasa por encima de Modo y selecciona Color RGB. Esto convertirá la imagen al espacio de color RGB y puede notar que algunos colores son más vibrantes. A continuación, ve a Archivo y luego a Guardar como y guarda el archivo. Asegúrate de cambiar el nombre del archivo para que tú o alguien más sepa que es un archivo para aplicaciones digitales.
Directrices sobre el tamaño de las imágenes del sitio web 2021
Tengo más de 10 años de experiencia en la creación de sitios web de fotografía, y habitualmente tengo que encontrar el equilibrio adecuado entre la creación de un impacto visual impresionante y la elaboración de una experiencia de sitio web rápida y fácil de usar.
En esta guía detallada, te enseñaré todo lo que necesitas saber sobre el tamaño y la compresión de las imágenes antes de subirlas a tu sitio web, qué herramientas utilizar, cómo probar la velocidad de tu sitio y mucho más.
Encontrará consejos directos y prácticos sobre cómo optimizar las imágenes para la web y cómo mejorar los resultados de rendimiento de su sitio rápidamente, con montones de ejemplos y recursos, y una completa sección de preguntas frecuentes al final.
El rendimiento del sitio web se ha convertido en los últimos años en un factor esencial para el SEO y la experiencia del usuario, ya que la velocidad de conexión ha mejorado mucho. Cualquier retraso en los tiempos de carga de las páginas puede hacer que los visitantes de su sitio web pierdan interés y se marchen.
Todo empieza por averiguar las dimensiones correctas de las imágenes necesarias para tus páginas, para poder prepararlas mejor en tu ordenador primero. Subir imágenes de gran tamaño a tu sitio, sin tener en cuenta el tamaño real al que se utilizan, es lo que provoca grandes problemas de rendimiento.
