Biblioteca Complutense

Edición imágenes Web UCM

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:

  1. 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
  2. El formato medio se genera convirtiendo 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 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:

  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

 

Portada Noticias

 


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)

Portada Fotos Fijas

 


Widget Noticias y Avisos carrusel

 

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

 

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