Ir al contenido principal
Todas las coleccionesGestión de la plataforma
¿Cuáles son las dimensiones y tamaños recomendados de las imágenes de la plataforma?
¿Cuáles son las dimensiones y tamaños recomendados de las imágenes de la plataforma?

Todo lo que necesitas saber sobre tamaños, dimensiones y visualización de imágenes. Encuentra también algunos ejemplos buenos y menos buenos.

Joost Vandenbroele avatar
Escrito por Joost Vandenbroele
Actualizado hace más de 6 meses

Hay múltiples lugares donde puedes personalizar tu plataforma con imágenes (fotos o gráficos diseñados) para hacerla más atractiva y comunicar el aspecto y la sensación adecuados. Aquí tienes las directrices exactas por tipo de imagen para asegurarte de que tus imágenes se recortan correctamente y no aparecen borrosas.


1. Tipos de imágenes en tu plataforma

Una imagen puede ser una simple foto o un diseño visual o gráfico. Estos son los diferentes tipos de imágenes que puedes construir en tu plataforma y proyectos:

  • Banner de la página de inicio

  • Tarjeta de proyecto/carpeta

  • Banner de proyecto/carpeta

  • Tarjeta de entrada (idea)

  • Logotipo

  • Imágenes in-text

  • Propuestas

2. Tamaño de las imágenes

Para evitar imágenes pixeladas, asegúrate siempre de que tu imagen tiene el peso suficiente, es decir, debe tener una resolución (ppp) de 72 ppp como mínimo. Las imágenes deben ser png o jpg y tener un tamaño máximo de 5 MB.

* dpi, o puntos por pulgada, es una medida de la resolución de una imagen. Cuanto mayor sea la densidad de puntos, mayor será la resolución de la imagen.

3. Dimensiones de la imagen, proporción y capacidad de respuesta

Las dimensiones recomendadas son diferentes según el tipo de imagen. Es importante tener en cuenta que las imágenes se muestran de forma diferente según el dispositivo que utilices para visitar la plataforma. Consulta el punto 4 para ver las recomendaciones de exposición.

En esta tabla se indican las dimensiones sugeridas y la proporción por tipo de imagen. La herramienta de carga de imágenes te ayuda a recortar cualquier imagen a la proporción correcta en todo momento.

Tipo de imagen

¿Dónde se muestra?

Dimensiones

Relación


Ratio móvil

Banner de la página de inicio

Puede ser un banner de ancho completo o de 1 fila o columna, según tu configuración.

1440 x 480 px

3:1

Puede mostrarse como aproximadamente 1:1 en los teléfonos móviles

Tarjeta de proyecto/carpeta

- Cuadrado

En la página de inicio o en una carpeta para representar un proyecto

500 x 500 px

4:3

También se mostrará como 4:3 en los teléfonos móviles

Banner de proyecto/carpeta

Se muestra en la parte superior de la página de tu proyecto o carpeta de proyecto

1440 x360px

4:1

Puede mostrarse como aproximadamente 3:1 en los teléfonos móviles

Tarjeta de entrada (idea)

Se muestra en la parte superior de la entrada (idea e.a) o en la vista general de la entrada



575 x 574 px

1:1

Puede mostrarse como aproximadamente 2:1 o 3:1 en los teléfonos móviles

Logotipo del sitio

Arriba a la izquierda en el menú de navegación

Altura mínima 45 px; sin anchura mínima ni máxima

Tarjeta de evento dentro de un proyecto

Se muestra en la parte inferior de las páginas de tu proyecto

no se aplican dimensiones de imagen forzadas

(proporción clásica recomendada de 3:1 para los banners)

Tarjeta de propuesta

La imagen principal aparece en la lista con todas las demás propuestas.


1000x500px

Imagen In-text

en las descripciones de los proyectos/fases o en las preguntas de las encuestas

Los títulos de las imágenes son obligatorios por razones de accesibilidad

se pueden redimensionar en el texto

Tu plataforma es receptiva. Esto significa que las imágenes se muestran de forma diferente según el tipo de pantalla (ordenador, tableta, teléfono móvil). Por tanto, te recomendamos que evites incluir texto o información en la imagen y que sólo utilices imágenes decorativas.

  • ¿Por qué recomendamos no incluir texto o información en las imágenes?

Esto no sólo es mejor para la accesibilidad y la legibilidad, sino que además es probable que cualquier texto quede recortado en diferentes tamaños de navegador. Piensa que tus imágenes aportan interés visual más que contenido crítico: puedes utilizar los campos de título y descripción para transmitir información escrita y añadir imágenes adicionales a las descripciones de tus proyectos y carpetas si quieres proporcionar más información a los visitantes de tu plataforma.

4. Visualización de imágenes en el banner de la página de inicio (+ejemplos)

Para el banner de la página de inicio puedes elegir entre 3 opciones: "Ancho completo", "Dos filas" o "Proporción fija".

Para cualquiera de las 3 opciones de diseño es importante elegir una imagen que preferiblemente no tenga texto ni información.

Para cada tipo de imagen, hay un comportamiento diferente, para asegurarnos de que la plataforma funciona bien en todos los dispositivos. La "Zona Segura" es el área que se muestra en todo momento.

Banner de ancho completo

El banner de ancho completo da el mejor efecto visual, pero es el que más redimensiona los cultivos de & . Utilízalo sólo con imágenes abstractas.

Banner de dos filas

Este banner es especialmente útil con imágenes que no funcionan bien con el texto del título, subtítulo o botón. Estos elementos se empujarán por debajo del banner.

Banner de proporción fija

El banner de proporción fija mantiene su altura y la mayor parte de su anchura en todo momento. Este es un buen tipo de banner si quieres que el área principal de la imagen esté visible en todo momento.

La proporción recomendada para el banner de proporción fija es de 3:1. Esta imagen siempre se recorta a una determinada proporción para garantizar que todos los aspectos cruciales se muestren en todo momento. Si subes una imagen que aún no tiene una proporción de 3:1, podrás arrastrar la imagen hacia arriba y hacia abajo para asegurarte de que las partes importantes se muestran en el área fija.

5. Visualización de imágenes en proyectos

En un proyecto hay tres lugares donde puedes añadir imágenes: Tarjeta de proyecto/carpeta, Banner de proyecto/carpeta y Tarjeta de entrada (idea).

Cuando subas una imagen para utilizarla como tarjeta de proyecto/carpeta o como banner de proyecto/carpeta, puedes arrastrar la imagen y elegir qué parte de la imagen es siempre visible. La cuadrícula muestra lo que siempre será visible y la parte imprecisa de la imagen se cortará. Si subes una imagen que ya tiene las dimensiones correctas, no podrás arrastrarla.

Las tarjetas de ideas siempre se mostrarán en una proporción de 4:3. Aquí no hay opción de arrastrar la imagen en la cuadrícula.

6. Encontrar una buena imagen

💡 ¿Te cuesta encontrar una buena imagen? Las galerías de imágenes libres de derechos de autor como Pexels y Unsplash o Burst pueden ser a menudo un buen punto de partida para encontrar imágenes bonitas y de buena calidad.



¿Necesitas más ayuda o apoyo? Contacta con nuestro Equipo de Soporte a través de la burbuja de chat .

¿Ha quedado contestada tu pregunta?