20 de Diciembre de 2014
Jun
7

Formatos de Imagen más Comunes y Usos

Categorías: ,

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 pueden tener defectos a la vista al tener borden dentados. Para evitar esto se 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.

 

 

5
Valoración media: 5 (14 votos)

11 Comentarios:

Impresionante el trabajo

Impresionante el trabajo que has realizado para esta entrada. Que sin duda, será muy útil a los que no tengan por mano este tipo de formatos. Tanto para el diseño del blog, como para edición de imágenes.

5 estrellas, que se quedan cortas.

¡Saludos! 

Super currado! :-)

Te enlazo desde la página de ayuda, sección diseños de blog. Además, lo pongo el primero de la sección porque esto es básico. T'ha quedau de frutísima mazre! (adjetivo a juego con el título de tu blog) LMAO

El difuminado se puede usar

El difuminado se puede usar con los JPG pero solo para hacer la imagen IN SITU (O sea, después no permanece la transparencia. Es lo que se llama marca de sol). El collage maker 2 hace este efecto del que hablo. (Ojo, no digo en ningún momento que lo que digas tú no sea cierto, lo mío es un aporte curioso)

¡5 estrellazas para un articulón! 

¡Buenísimo!

Pues sí que te has ganado las 5 estrellazas, sí.

Se agradecen muchísimo explicaciones de este tipo, sobretodo para aquellos que no tenemos ni idea de formatos, diseño o photoshop.

Te podrías tirar el rollo y darme una masterclase para aprender a hacer transparencias de esas tan chulas Innocent

Un abrazo. 

Te doy 5 estrellas porque no hay 6!!!

  Muy buena aportación FRdeTorres, que currada te habrás pegado solo con capturar imágen tras imágen. Será esencial a la hora de mis caprichos blogerísticos.

 Saludos

:O Menuda entrada te has

:O Menuda entrada te has currado!! Tremenda, para algunas cosillas me va a venir muy bien, asi que zenkiu very mach por el trabajo ^^

Te doy 5 estrellas como 5 soles.

PD - Lo que pusiste en mi blog es por los videos de ff? X-D Creí qeu ya no tenías problemas! 

Shaiyia escribií:

LoganKeller escribió:


El difuminado se puede usar con los JPG pero solo para hacer la imagen IN SITU (O sea, después no permanece la transparencia. Es lo que se llama marca de sol). El collage maker 2 hace este efecto del que hablo. (Ojo, no digo en ningún momento que lo que digas tú no sea cierto, lo mío es un aporte curioso)


Eso de marca de sol no sé que es, como mucho me suena marca de agua pero creo que por lo que dices son cosas distintas xD. En la composicion con el JPG lo que puede hacerse y se me pasó decir es que se puede poner una capa lisa de fondo, unir las dos y difuminar los border de la imagen si han aparecido los dientes de sierra.
 

Shaiyia escribió:


PD - Lo que pusiste en mi blog es por los videos de ff? X-D Creí qeu ya no tenías problemas!

Exactamente, ya no tengo el problema de que se me cuelgue el navegador o incluso el ordenador si hay varios vídeos en una misma página, con una extensión de firefox se me bloquean automaticamente todos Smile.

 

Muy currada la entrada, y

Muy currada la entrada, y muy útil para saber diferenciar los distintos formatos.

Un saludo.

Joer... si esto parece el

Joer... si esto parece el ABC del uso de imagenes... y yo no tenia ni idea xDDD

Buena entrada y muy

Buena entrada y muy útil.

Estas cosas las aprendí hace poco con mis comienzos en el retoque de imágenes ¿por qué has tardado tanto? :P

Oys, oys, oys...

Entradas así son las que me sacan mi vena de profesora no titulada y empezar a querer imitarte en clases magistrales. No me oyes, pero estoy aplaudiendo (mentirosa, que estás escribiendo en el teclado!), porque estas entradas así, no sabes en realidad lo útiles que son.

Me dan ganas de hacer una sobre el RGB, la cuatricomia CMYK, los Pantones y todo eso,... Surprised

P.D.: Lo de las transparencias del PNG supongo que es porque el formato es originario de Fireworks/Macromedia, que te permite tocar el Alfa, como lo llaman ellos, o lo que es lo mismo, la intensidad del color.