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.

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.

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 como icónos, logos, 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én 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.