Una de las cosas que aprendí mientras empecé a bloguear es el tema del formato de imágenes, como diseñador que se dedica a los impresos , siempre se tiene la idea de que un archivo más pesado es mucho mejor, o mas aún, pierdes la noción que mientras en el los impresos hablas de MB en web se sigue hablando en KB, definitivamente si inicias con tu proyecto web te será de gran ayuda conocer los diferentes formatos de imágenes para web y saber cual usar en cada momento.

GIF, el gran amigo de la web

Graphics Interchange Format como es su nombre completo del formato GIF, es un formatos que tuvo un gran fama cuando la explosión de la web inicio, gif se mantuvo durante muchos años con un estándar para imágenes de internet, con 256 colores (que ahora ya están en desuso), y su gran característica que reconocía el canal alfa por lo que nos dejaba guardar imágenes con transparencia.

Desgraciadamente este formato tienen una patente, por lo cual los fabricantes de software tenían que pagar a la empresa dueña de los derechos llamada Unisys, esto hizo que otras alternativas como el PNG, pudieran tener gran demanda ya que este tenia una patente libre. Sin embargo, aunque el PNG es uno de los formatos más usados hoy en día el GIF ha pasado a ser el formato para banner animados, ninguno de las alternativas al GIF tiene esta característica por por lo que su utilidad aún sigue siendo buena.

Hablando en cuestiones técnicas el GIF tienen una limitada gama de 256 colores, aunque el formato com tal no representa perdida de calidad, si tu imagen tienen más de los colores que el gif soporta hablando de profundidad de color superior a 8 y entendiendo como profundidad de color a “la cantidad de bits de información necesarios para representar el color de un píxel en una imagen digital”, en el proceso hay una adaptación de los colores, lo que si es una perdida de calidad significativa sobre todo para imágenes como fotografías.

PNG, la patente libre con transparencia pero sin animaciones.

PNG (Portable Network Graphics) fue la  natural del GIF, buscando un formato que dejara atrás los obstáculos de patentes libres y sobre todo que no se limitara a una paleta de 256 colores, cuando las computadoras ya soportaban millones de colores, por lo cual era una limitante el seguir usando gif

Aunque como tal el PNG no  soporta animaciones hay un formato llamado MNG el cual se ha desarrollado para esto, sin embargo ha tenido poca promoción.

Una expoliación sencilla para hacer una comparación de la cantidad de colores entre el GIF y el PNG es que el primero solo es de 8 bits (2 a la 8= 256) mientras que el segundo es de 89 bits (2 a la 89 potencia=millones de colores).

JPG compresión y fotografía

El JPG significa “Joint Photographic Experts Group” que lo que buscaba era crear un grupo de investigación donde se compartieran las experiencia en la digitalización de imágenes. A menudo se le denomina un formato cuando más bien es un método de compresión de imagen.

Aunque se trata de una compresión de imagen con perdida es decir que no obtendremos una versión igual é de la compresión, el poder elegir el nivel de compresión es de gran utilidad ya que podemos hasta cierto punto controlar su calidad segun nuestra necesidades. Por ejemplo el formato JPEG/JFIF es el formato de todas la imágenes de internet. JPEG/EXIF es por ejemplo el formato para casi todas las cámaras de fotografía pero a ambos se les conoce de manera indistinta como JPG a secas. este formato es uno de mis preferidos para llevar archivos portátiles, y sobre todo porque en su máxima calidad es relativamentete poca la información que se pierde pero su peso es considerablemente menor.

¿Y cual usamos?

Como veremos GIF y PNG son los formatos web por naturaleza y la verdad recomiendo ampliamente el formato PNG, sobre todo si tus archivos son con transparencia, este puede ser una opción inmediata y dejar el GIF solo para animaciones o imágenes que tengan colores planos y cosas muy sencillas  (lo que nos hará un tamaño de imagen extremadamente pequeño y sobre todo que cargara de manera inmediata.

Por otor lado las únicas observaciones que le haría el png es que si  se tratan de fotografías, o imagenes muy elaboradas solo se use si se necesita transparencias, la calidad de la imagen es muy bueno pero suele ser un poco más pesado que un JPG.

El JPG es mi formato favorito cuando en nuestra web o blog ponemos fotos, ilustraciones, etc, la calidad del JPG la manejo en “high” o “medium” lo cual no me hace un gran perdida de calidad, una de los tips que me han funcionado mucho es dejar la imagen del tamaño exacto a usarse, sucede que muchas veces tenemos la imagen mas grande y eso nos da un peso innecesario en el archivo. Su único problema son las transparencias pero para eso existe PNG.

Por último. el peso es lo importante en web

Quizás les parezca extremo, pero debo decirles que un JPG o PNG de Kb de peso pueden parecer poco, pero les invito a pensar de manera integral en su proyecto web, ¿Qué les gusta más cuando navegan cargar una imagen de manera rápida o lenta?, Opino que aunque no deba de ponerse en riesgo nuestra calidad de las á siempre tratemos de guardar un estándar en el peso de estas que nos brinde la certeza de una experiencia de usuario buena ante una web que se carga en segundos, esto va muy de la mano con no desperdiciar bits con imágenes más grandes de lo necesarias.