Formatos de Imagen más Comunes y Usos

A la hora de poner imágenes en las entradas (o en cualquier otro lugar), nos pueden surgir de dudas de que formato usar. Dependerá de factores como si es una animación, si tiene transparencia o el tamaño que ocupe. Cada formato nos conviene para un factor distinto. Voy a dar algunas aclaraciones sobre los formatos.

 

Primero decir que en esta entrada voy a usar esta imagen para los ejemplos sobre los formatos:

Y de paso comento que tarde o temprano haré una entrada sobre Battlestar Galactica Razz.

 

Los tres tipos de imágenes que más veremos en internet son tres:

 

Dependiendo del uso que vayamos a darle a una imagen nos interesará un formato u otro. Si es estática tenemos dos posibilidades dependiendo del tipo de fondo donde vayamos a situarla:

  • Liso: Preferentemente JPG, por su menor tamaño.
  • No liso: GIF o PNG, según lo requiera la transparencia de la imagen y/o la calidad.

En caso de ser una animación no nos queda otra que tirar del GIF.

La transparencia de una imagen puede ser total o parcial, siendo la parcial posible unicamente en el formato PNG:

100% de transparencia:

90% de transparencia:

80% de transparencia:

70% de transparencia:

60% de transparencia:

50% de transparencia:

40% de transparencia:

30% de transparencia:

20% de transparencia:

10% de transparencia:

0% de transparencia:

 

En las imágenes con transparencia los bordes de la imagen puedentener defectos a la vista al tener borden dentados. Para evitar estose puede recurre principalmente a un par de opciones:

  • Difuminar los bordes: En los bordes de la imagen se aplican una serie de "capas de píxeles", cuya cantidad dependerá del tamaño de la imagen pero que nunca serán muchas, que hacen que en los bordes poco a poco se vuelvan gradualmente trasnparentes (1).
  • Degradar los bordes hacia un color: Se hace un degradado en los bordes hacia un color determinado, el cual se elige en función del color del fondo donde vaya a situarse (2).

(1), difuminado de bordes:

(2): Degradado a un color:

Los cuadrados grises y blancos simbolizan la carencia de fondo, es decir, esc como tener la imagen sobre un cristal perfectamente transparente y bajo el pondremos la imagen o el color que servirá de fondo a la imagen.

 

JPG

El formato JPG comprime las imágenes perdiendo calidad en el proceso, pudiendo regular la calidad y, con ello, el tamaño final. A más tamaño más calidad. No permite animación ni transparencias, por lo que en casos de fondo con alguna trama como el de este blog su uso a veces es muy reducido.

Calidad Baja (36.18 KB):

Calidad Media (37.26):

Calidad Alta (39.37 KB):

Calidad Muy Alta (42.54):

Calidad Máxima (52.17 KB):

En casos de imágenes relativamente pequeñas como esta la pérdida de calidad a simple vista no es mucha, pero en imágenes más grandes o en capturas de pantallas donde se vean textos si es muy notable:

Calidad Baja (30.78 KB):

Calidad Máxima (46.6 KB):

GIF

Este formato admite un máximo de 256 colores, de manera que al guardar una de estas imágenes se "repinta" ajustándose a las limitaciones del formato, veamos un ejemplo:

Al guardarla como gif queda:

Muy notable, ¿no?

Además, recuerdo que el formato permite transparencia, pero no de gran calidad, sólo de tipo totalmente transparente o totalmente opaca. Debido a esta particularidad de la transparencia del gif tenemos un problema cuando guardamos una imagen en este formato, ya que quedan unos bordes dentados que muchas veces saltan a la vista y estropean el conjunto de la imagen:

Como solución más práctica, al guardar la imagen pueden añadirse bordes que coincidan con el color del fondo de la página donde colocaremos la imagen y realicen un pequeño degradado para disimular el problema, pero si la usamos en otros fondos veremos un borde en un color distinto y no queda nada bien. Poniendo como ejemplo un fondo amarillo:

Imagen con borde amarillo:

Sobre fondo amarillo:

Sobre fondo verde:

Vista detallada del borde (zoom x16):

Imagen con borde amarillo:

Sobre fondo amarillo:

Sobre fondo verde:

 

Resumiendo, si queremos poner la imagen sobre fondo negro la guardaremos con degradado hacia negro, si es para un fondo rojo degradado hacia rojo etc.

 

PNG

Este formato emplea compresión de imagenes sin pérdida de calidad. Permite únicamente imágenes estáticas, para animaciones existe el formato MNG pero su es mucho menos que anecdótico y actualmente los navegadores no reconocen el formato. Admite transparencias alpha, que podríamos llamar parcial o semitransparencia. Al disponer de transparencia alpha el problema que teníamos con los gif de los bordes de sierra desaparece si son correctamente difuminados, de manera que parte del borde tenga la semitransparencia justa para disimularlos en cualquier fondo que usemos, por lo que para páginas cuyos fondos sigan una trama como pueda ser este blog es un formato que nos viene muy bien.

Imagen con borde con semitransparencia:

Sobre fondo amarillo:

Sobre fondo verde:

Vista detallada del borde (zoom x16):

Imagen con borde con semitransparencia:

Sobre fondo amarillo:

Sobre fondo verde:

 

En la vista detallada vemos como las zonas semitransparentes de la imagen permiten que se fundan el borde la imagen y el fondo, disimulando así los bordes de sierra.