Los que nos dedicamos al diseño y desarrollo de sitios web y aplicaciones vivimos rodeados de imágenes. Todos los días hacemos, guardamos, enviamos fotografías, y es muy probable que te hayas preguntado más de una vez la diferencia entre los distintos tipos de formatos.
En este post vamos a hablar de todos ellos y te diremos cuál es la mejor opción para tus proyectos y porque.
En primer lugar, vamos a presentaros los principales tipos de formatos antes de deciros cual creemos que es el más adecuado.
- PNG (Portable Network Graphics)
PNG (Portable Network Graphics), es un formato de imagen universal reconocido por el World Wide Web Consortium (W3C) que apareció por primera vez en la red en 1996. Como alternativa a GIF (Graphic Interchange Format). Moderna y no sujeta a ninguna patente, el formato PNG destaca por la posibilidad de comprimir imágenes sin pérdidas y de ofrecer una profundidad de color de hasta 24 bits por píxel (16,7 millones de colores) con un canal alfa de 32 bits. Al contrario de GIF, con el formato PNG no se pueden generar animaciones.
PNG soporta tanto la transparencia como la semitransparencia, lo que se puede aplicar para todo tipo de imágenes, y por el entrelazado, que permite la composición acelerada de los archivos de imagen durante el proceso de carga. Los mecanismos de corrección del color o del brillo garantizan que los archivos de imagen en formato PNG tengan más o menos la misma apariencia en los diferentes sistemas. Para comprimir un gráfico en formato PNG se pueden utilizar herramientas como pngcrush. A causa del proceso de compresión sin pérdidas, los archivos son relativamente más grandes, de modo que el formato no resulta tan adecuado para la presentación de fotografías en web como lo es, por ejemplo, JPG. El formato PNG también ofrece la posibilidad de reducir el espacio cromático (de 1 a 32 bits por píxel).
Recomendamos utilizar PNG para el almacenamiento y publicación de imágenes y gráficos pequeños como logotipos, iconos, barras, etc. Siempre y cuando no perjudique gravemente la velocidad de carga de nuestra web.
2. JPG
El formato JPG comprime mucho las imágenes, lo que permite obtener tamaños de archivo muy ligeros y prácticos. Comprime todos los píxeles que la componen en bloques o mosaicos. Un mismo bloque puede llegar a contener desde miles a millones de bits. Por eso las imágenes en JPG cuentan con diferentes niveles de calidad y de tamaño.
La gran ventaja del formato JPG es la compatibilidad. Se trata de un estándar internacional que es ampliamente compatible con los programas de imagen y otros software digitales. Todos los ordenadores, navegadores, smartphones, etc. son capaces de leer el formato JPG.
La desventaja es que el formato JPG no es editable, cada vez que guardamos un JPEG nuevo, la imagen va perdiendo calidad. Por eso suele utilizarse para distribuir contenido definitivo o final.
Este Formato es el más utilizado actualmente para el desarrollo de Páginas web aunque el Formato Webp está llamado a desbancarlo de esta posición.
3. GIF
Las siglas GIF se hacen referencia a Graphic Interchange Format. Este formato de imagen digital solo puede almacenar 8-bits de información. 8-bits equivale a un total de 256 colores. Para que puedas entender las limitaciones de este formato, el ojo humano tiene la capacidad de ver observar más de un millón de colores.
Hablamos por tanto de un formato que sólo es apropiado para imágenes donde esa limitación de colores no sea un problema.
La gran fortaleza del formato GIF reside en la animación. Podemos incluir imágenes digitales animadas, siempre y cuando se encuentren representadas bajo los 256 colores. Otra gran ventaja, a diferencia del anterior formato de imagen JPG, es que con GIF no se pierde calidad cada vez que se guarda la imagen.
Eso sí, puede que no nos sirva para imágenes de alta calidad, pero el formato GIF nos puede almacenar tipografías de forma ligera. Algo que no pueden conseguir tan exageradamente el resto de formatos de imagen.
4. TIFF
Si necesitamos imprimir bajo un sistema de impresión una imagen en mapa de bits necesitaremos garantizar que la imagen cuenta con una alta resolución y por lo menos 300 ppp de resolución.
El formato TIFF se corresponde con Tagged Imaged File Format y es el formato de mapa de bits que prevalece en el sector gráfico. Fue desarrollado inicialmente por Microsoft y Aldus, aunque actualmente es propiedad de Adobe.
Es un formato muy versátil que no cuenta con una compresión agresiva. Es muy práctico, ya que soporta el tratamiento de imagen por capas. Vamos a poder almacenar más de una imagen en el mismo archivo.
Es el formato ideal cuando el objetivo final es la impresión. Ya sea para Dípticos, Folletos, Manuales de identidad, etc. Sin embargo, no es nada recomendable para su uso en web por su escasa capacidad de compresión.
5. WEBP
WebP es un nuevo formato de compresión de imagen que está causando sensación, sobre todo, entre los desarrolladores web
Este formato empezó a desarrollarse por On2 Tecnologies y fue adquirido por Google en el año 2010.
Por tanto, puedes imaginar que es el formato recomendado para el desarrollo de sitios web (está recomendado por su herramienta PageSpeed Insights de optimización web).
WebP es de código abierto, por lo que puede ser utilizado por todo el mundo, y consigue reducir el peso de la imagen por encima del 30% respecto a la misma imagen en otros formatos como PNG o JPEG sin perder calidad.
Una de sus principales fortalezas es que soporta tanto la compresión con pérdidas como sin ella, y es un formato derivado del estándar de vídeo VP8.
En definitiva, este formato desarrollado por Google consigue disminuir el tiempo de carga de las imágenes en Internet y reducir su tamaño.
Es por ello que actualmente, es el formato recomendado para las imágenes de las páginas webs, porque cuando navegas con el móvil produce un ahorro grande en el ancho de banda y carga de forma más rápida la web.
Ahora que ya hemos reconocido que este formato es el más adecuado para las imágenes de tu web vamos a compararlo con los demás formatos a modo de conclusión.
¿Qué diferencias tiene con GIF, JPG y PNG?
En el formato GIF las imágenes se comprimen sin pérdida de calidad, pero tiene una paleta limitada en 256 colores. Se usa en gráficos con pocos colores y sobre todo en secuencia de imágenes, uso por el que se suele conocer a este formato.
El formato JPG es el formato estándar de las fotografías, ya que reproduce muy bien los colores y las imágenes con sombra. Admite distintos niveles de compresión, en la que a más menor espacio tenemos una carga más rápida.
Este formato es el más usado en Internet porque, como acabamos de ver, podemos ahorrar mucho espacio gracias a su función de compresión con pérdidas. Estamos perdiendo detalles de la fotografía, pero a cambio ahorramos tiempo de carga.
El formato PNG tiene dos versiones: 8 y 24 Bits. El primero es muy similar al formato GIF, y el segundo reproduce de misma manera los colores que el JPG. El PNG comprime sin pérdidas, y se utiliza principalmente cuando no tenemos problema en tener un archivo muy grande, en logos o en imágenes con transparencia.
Finalmente, formato WebP compite directamente con JPG, ya que como hemos visto este último es el más utilizado para las imágenes de Internet, y Google ha desarrollado el formato WebP para optimizar este proceso.
Gracias a la capacidad de compresión sin pérdida del WebP, podemos subir imágenes a Internet, pero sin pérdida de calidad, además de hacerlo con el ahorro de espacio que suponía la compresión con pérdida del formato JPG.
Os mostraremos una imágen para que valoréis vosotros mismos:
Como podemos comprobar podemos conservar la misma calidad ocupando mucho menos espacio lo que la convierte en la mejor opción para trabajar nuestro sitio web.
Esperamos que os haya sido útil este Post de AccioNext y que confiéis en nosotros para vuestros proyectos de desarrollo y diseño web así cómo para sus servicios de consultoría digital.