English Português

Una de las cosas que aprendí mientras empece a bloguear es el tema de las 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.

Pero sino creen como se desgasta un JPG  vean esto.

Generation Loss from hadto on Vimeo.

¿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 imagenes más grandes de lo necesarias.

Escrito por Ulises

Diseñador e ilustrador, Me encanta leer blogs, tutoriales y diseño. Me gusta escribir y compartir cosas interesantes, reflexionar sobre el futuro de la sociedad y sus formas de comunicarse, soy entusiasta del Web 2.0 y me gusta conocer gente; y si a esa charla le añades café, me has dado lo que necesito.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Jordi / Hace 7 años /

      ¡Buen resumen!

      El único comentario es que el formato PNG con transparencias para Internet Explorer 6 no se ve correctamente y te simplificas la vida utilizando GIF.

      Aunque IE6 es un navagador obsoleto, existen muchisimos usuarios con el instalado y más en entornos corporativos.

      Responder a Jordi →
    2. Tomas / Hace 7 años /

      Ehm… Supongo que este fue un articulo un tanto casero.

      El formato PNG existe de 8, de 24 y de 32 bits.
      El 24 es el que soporta “niveles” de transparencia, que IE6 no soporta y ve feo, pero de todos modos es facil de arreglar. Pero vamos, que segun la W3 solo el 10% de la gente tiene IE6. (Aunque en ambientes medicinales, hospitales, etc, es del 20%)
      El de 8 es CASI como GIF, y IE6 lo renderiza perfecto, pues no soporta niveles de transparencia. El 32 nunca lo use.
      Y dije CASI como GIF, porque creo que lo mas importante de los PNG es la forma en que “comprime” el contenido, mientras que los GIF solo sirven para contenidos de pocos colores y de forma “horizontal” (degrade vertical).
      En un degrade horizontal conviene mucho mas usar PNG8 que GIF.

      Responder a Tomas →
    3. Seba / Hace 7 años /

      Yo hace tiempo ocupo solo ocupo gif y png, ya que como dices el jpg se deteriora.

      Responder a Seba →
    4. LJK / Hace 7 años /

      Yo uso PNG y Gif ,

      Responder a LJK →
    5. RUBEN / Hace 6 años /

      las imagese se ven espectaculares. buena tecnologia.

      Responder a RUBEN →
    6. maria / Hace 6 años /

      yo tengo una laptop vaio serie E y la camara es de magic-i visual efects y no se como encender la camara

      Responder a maria →
    7. juank / Hace 5 años /

      hola María.
      Para encender la cámara debes utilizar el software para ello (no se puede activar por hardware). Te sugiero que instales el software que incluye el cd de drivers de tu equipo.

      salutes!
      juank

      Responder a juank →
    8. Marta / Hace 4 años /

      Gracias. súper claro

      Responder a Marta →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad