Tamaños

Tamaños de pantallas

Imágenes "responsive"

Las imágenes de la Web UCM tienen comportamiento "responsive", es decir, se adaptan al ancho disponible y ajustan su altura de manera proporcional.

El ancho máximo con el que se muestra cada imagen depende del área o contenedor de la página donde la situamos.

Cuando la imagen tiene un ancho mayor al ancho de su contenedor la imagen reduce su resolución para adaptarse. No se visualiza con mayor calidad por tener mayor tamaño que el de su contenedor.

Plantillas y anchos disponibles

Según la plantilla seleccionada, podemos encontrar los siguientes anchos disponibles:

Ancho 100%
Ancho plantilla área única: 1140px

Anchos 50%
Ancho plantilla dos columnas (50%): 555px

Anchos 30%-70
Ancho plantilla dos columnas (30% 70%):
Columna 30%: 360px
Columna 70%: 750px

Anchos 33%
Ancho plantilla tres columnas (33%): 360px

Anchos 25%
Ancho plantilla cuatro columnas (25%): 263px

Renderización

Cuando se carga una imagen en una galería se generan 3 versiones adicionales a la original, cada una se puede usar según los tamaños que se vayan a visualizar en pantalla:

El formato miniatura se genera convirtiendo la imagen a 100 pixeles de ancho, se puede usar si se pone, al final de la URL de la imagen, el parámetro ?ver=t
El formato medio se genera convirtiendo la imagen a 300 píxeles de ancho, se puede usar usando el parámetro ?ver=m
El formato normal o estándar convierte la imagen a 850 píxeles de ancho y es el que se inserta por defecto cuando se selecciona una imagen en un widget de texto, se usa con el parámetro ?ver=n

Podemos hacer referencia al tamaño original de la imagen usando una URL acabada en:
?ver sin parámetro de tamaño.

Es importante usar la resolución más próxima al tamaño al que se va a visualizar la imagen en la página, pues conseguiremos un doble beneficio: por un lado, la página se cargará más rápido evitando la descarga de datos innecesarios y, por otro, evitaremos sobrecargar los servidores y la red. Adicionalmente minimizaremos las perdidas de sesión que se sufren en la web cuando se tarda demasiado tiempo en cargar los datos de una página.

Tamaños requeridos. Proporciones

En algunos espacios de nuestra web es necesario insertar imágenes con un tamaño o proporciones (ancho y alto) determinadas.

Si en estos espacios insertamos imágenes que no tengan el tamaño requerido, las imagenes se adaptarán al ancho pero no se verán completas (parte de la imagen queda oculta en la zona inferior), o se verán completas pero no ocuparan todo el espacio disponible (se verá una franja gris).

Los espacios que requieren imágenes con tamaños específicos son: