Skip to main content

Edición imágenes Web UCM

Guía de apoyo a la edición Web

Formatos, Resolución, Profundidad de Color, Tamaño y Nombre del Archivo

Los formatos admitidos en la Web UCM son:

  • JPEG (admitido para toda la Web)
  • PNGGIF (no admitido para imágenes de fondo de portada y widget "Noticias y avisos") .

JPEG (Joint Photographic Experts Group)

JPG. Admitido para toda la Web

El formato JPEG, archivos con extensión .jpg o .jpeg, es uno de los formatos más utilizados en Internet.

Formato adecuado para imágenes realistas de gran tamaño en origen.

Las imágenes JPG pueden mostrar un elevado número de colores (más de 16 millones de colores).

No soporta transparencias.

Formato de compresión con pérdida, es decir, acepta alguna degradación de la imagen en beneficio de una mayor compresión. Esta degradación se produce cada vez que comprimimos la imagen, es acumulativa. Conviene trabajar siempre sobre la imagen original.

PNG (Portable Network Graphics)

PNG. No admitido para imagenes de fondo de portada y widget "Noticias y avisos".

Recomendado para imágenes que contengan áreas de colores planos, icónos, gráficos, imágenes de texto...

Soporta transparencias. A diferencia de la transparencia ofrecida por GIF que solo puede tomar dos valores, el canal alfa de PNG permite utilizar mayor profundidad de bits para lograr efectos de semi-transparencia.

Formato de compresión sin pérdida, es decir, permite comprimir la información sin degradarla. La compresión es reversible y podemos recuperar la imagen exacta a la original.

  • El PNG-24 utiliza el mismo número de colores que JPEG preservando un alto grado de resolución.
  • El PNG-8 utiliza una paleta de 256 colores (2⁸) a partir de los colores originales de la imagen. Codificando imágenes en este formato podemos obtener archivos muy pequeños con alta resolución. El requisito es que la imagen original tenga, como máximo, 256 tonos o colores, para poder almacenar la imagen sin pérdidas

GIF (Graphics Interchange Format)

ADN animado

GIF. No admitido para imagenes de fondo de portada y widget "Noticias y avisos".

Su principal utilidad es el despliegue de imágenes animadas. También es útil para guardar imágenes que tengan grandes bloques de colores planos como ilustraciones simples, logotipos, iconos... con un número de colores limitado.

El formato GIF utiliza una paleta de 256 colores.

Soporta animaciones y transparencias.

La transparencia ofrecida por GIF solo puede tomar 2 valores (completamente transparente o completamente opaco).

La resolución de una imagen digital es el resultado de multiplicar el ancho (resolución horizontal) por el alto (resolución vertical) en píxeles.

Resolución total = píxeles de ancho x píxeles de alto

La resolución de una imagen indica la cantidad de detalles que puede observarse en esta. A mayor resolución, mayor cantidad de detalles.

Una imagen de 1140 píxeles de ancho ocupa todo el ancho de una página UCM. Cuando insertamos una imagen mayor de 1140 px., esta se adapta al ancho disponible, es decir, se muestra con una resolución horizontal máxima de 1140 píxeles. Poner una imagen de gran tamaño no supone que se muestre en la web con mayor calidad. Podría tener sentido poner imágenes de gran tamaño para, por ejemplo, poder ampliarlas manteniendo la calidad.

Tamaños requeridos

La relación entre el ancho y el alto se llama "relación de aspecto" y determina las proporciones de la imagen.

Algunos espacios de la web UCM requieren imágenes con una relación de aspecto y tamaño determinado. Cuando las proporciones de la imagen no se ajustan a las proporciones requeridas, la imagen se muestra recortada o con espacios vacios aldededor.

Los espacios que requieren imágenes con proporciones determinadas son:

  1. ​Portada de noticias con imágenes laterales:
    • Las imágenes del carrusel: 798 × 400 píxeles.
    • Imágenes laterales: 331 × 200 píxeles.
  2. Portadas Fotos Fijas:
    • Imágenes de fondo de portada: 1140 x 400 píxeles.
  3. Widget Noticias y Avisos:
    • El ancho de las imágenes del carrusel depende del lugar de la página dónde se sitúe el widget (el ancho de la imagen será el mismo ancho que el de su contenedor) , la altura de la imagen siempre será 280 píxeles.

La profundidad de color o bits por píxel, es la cantidad de colores que puede mostrar una imagen.

Si utilizamos un solo bit para representar cada píxel de color, tenemos 2 valores por píxel, encendido y apagado, es decir, blanco y negro:

  • 1 bit por píxel: 2¹ = 2 colores (blanco y negro).

 

Cuando utilizamos 8 bits por píxel podemos representar hasta 256 colores por cada píxel. Los formatos que usan esta profundidad de bits son GIF y PNG8. Se utiliza una paleta de 256 colores creada a partir de los colores originales de la imagen (color indexado). Se corresponde con los estándares de visualización VGA o SVGA:

  • 8 bits por píxel: 2⁸ = 256 colores (VGA, SVGA).

 

Con una profundidad de color de 24 bits podemos representar más de 16 millones de colores. Los formatos que usan esta profundidad de bits son JPG y PNG24. Se habla de color verdadero porque es aproximadamente el número de colores que el ojo humano puede distinguir:

  • 24 bits por pixel: 2²⁴= 16.777.216 color (true color).

 

Cuando se utilizan 32 bits para representar un color se agrega, para cada tono primario, un cuarto canal denominado alfa que representa la transparencia. Este valor se utiliza cuando, por ejemplo, superponemos imágenes:

  • 32 bits: agrega un cuarto canal (alfa) que representa la transparencia de cada tono primario.

Cuanto más pequeño es un archivo de imagen, más fluida es la navegación. Se trata de conseguir la máxima calidad posible con el menor tamaño.

El peso o tamaño de un archivo de imagen sin comprimir es el resultado de multiplicar la resolución (ancho por alto en píxeles) por la profundidad de bits:

Tamaño archivo no comprimido = píxeles ancho x píxeles alto x profundidad de bits.

Los formatos de archivos de imagen que usamos en nuestra Web comprimen la información y reducen el tamaño del archivo. Las imagenes pueden degradarse en beneficio de la compresión.

Formatos y Tamaños del Archivo

  • JPG permite ratios altos de compresión manteniendo una buena calidad de imagen. Comprimir la imagen con un ratio inferior al 70% puede producir imágenes de mala calidad.
  • La compresión PNG no degrada la imagen, sin embargo, se pueden reducir notablemente el tamaño del archivo dependiendo, en gran medida, de la imagen de entrada.
    Da buenos resultados con imágenes con áreas de colores planos, icónos, gráficos, imágenes de texto... Se puede obtener archivos muy pequeños y de gran calidad.
  • PNG-8 y GIF utilizan una paleta limitada a 256 colores que reduce el tamaño del archivo.
    En general, PNG comprime mejor que GIF, aunque esto puede depender de cómo esté implementados los métodos de compresión en las aplicaciones de edición de imágenes.

Debemos tener en cuenta que elegir una resolución adecuada al lugar de la página donde vamos a situar la imagen (contenedor), así como elegir una profundidad de color adecuada a las características de la imagen, es fundamental para conseguir adecuados tamaños de archivos de imagen.

Hay una serie de reglas para nombrar archivos que nos ayudan a evitar problemas en la edición web:

  1. No usar espacios en nombres de archivo (podemos separar las palabras con guiones medios o bajos).
  2. Utilizar solo caracteres alfanuméricos.
  3. No usar eñes ni signos diacríticos, como acentos.
  4. Eliminar los caracteres especiales, como por ejemplo: / : * ? " < > | ! @ # $ % & . Algunos de estos signos son caracteres reservados para lenguajes, protocolos o estándares.
  5. Todos los archivos deben llevar la extensión del programa que los genera (jpg, png...).
  6. Escribir los nombres de archivo con minúsculas. Windows no distingue entre mayúsculas y minúsculas, sin embargo, algunos sistemas operativos de los servidores pueden ser sensibles a mayúsculas y minúsculas.
  7. Usar nombres cortos que describan el archivo (Windows tiene un límite de 260 caracteres, incluida la ruta).
  8. También nos puede ayudar usar siempre la misma estructura para nombrar archivos. Es una buena práctica usar nombres que nos ayuden a diferenciar y organizar los archivos. Por ejemplo fachada-derecho-1024x798.png (en este caso el nombre nos indica el objeto de la imagen, sus dimensiones y su formato).

Estos consejos nos evitarán problemas a la hora de añadir, sustituir y organizar los archivos de nuestra web, así como para utilizar esos archivos en aplicaciones de edición de imágenes.