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 un mayor tamaño que el de su contenedor.

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

Ancho plantilla área única: 1140 px.

 

​
Ancho plantilla dos columnas (50%): 555 px.

 

​Ancho plantilla dos columnas (30% 70%):
Columna 30%: 360 px.
Columna 70%: 750 px.

 

Renderización

Cuando se carga una imagen en una galería se generan 3 versiones adicionales de la original en diferentes tamaños:

1. El formato miniatura convierte la imagen a 100 pixeles de ancho. Para usar este tamaño debemos escribir, al final de la URL de la imagen, el parámetro ?ver=t
2. El formato medio convierte la imagen a 300 píxeles de ancho, se puede usar usando el parámetro ?ver=m
3. El formato normal o estándar convierte la imagen a 850 píxeles de ancho y es el tamaño por defecto cuando insertamos una imagen en nuestra página con el 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.

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:

1. Portada de noticias con imágenes laterales.
2. Portadas de fotos fijas.
3. Widget "Noticias y avisos" en apariencia Carrusel.

Portada plantilla noticias con imágenes laterales

• Imagen carrusel: 798 × 400 píxeles
• Imágenes laterales: 331 × 200 píxeles

Portadas fotos fijas

• 1140 × 400 píxeles. Máxima altura 400 px. (Las imágenes con una altura mayor a 400 px. se mostrarán recortadas)

Widget Noticias y Avisos carrusel

• El ancho de las imágenes del carrusel depende del lugar dónde situemos el widget.
• La altura siempre será 280 píxeles:

Ancho plantilla área única: 1140 px.

 

​
Ancho plantilla dos columnas (50%): 555 px.

 

​Ancho plantilla dos columnas (30% 70%):
Columna 30%: 360 px.
Columna 70%: 750 px.

 

Recursos