PNG, JPG, GIF o WEBP ¿Qué formatos de imágenes existen y cuál es mejor para la web?

¿Cuál es el mejor formato de imagen?

Por lo general, conocemos algunas extensiones de las imágenes, cuando nos descargamos una imagen o subimos un GIF a WhatsApp, aunque raramente sabemos su significado y las características de una u otra.

Suele ocurrir cuando tenemos un sitio web y necesitamos una imagen para ilustrar o complementar el contenido que nos preguntan sobre el formato de imagen adecuado, aunque puede parecer algo intranscendente, una mala elección en el formato de imagen puede provocar problemas innecesarios en nuestro sitio web, como, por ejemplo, gráficos grandes, gráficos con textos borrosos…

Según el formato podremos comprimir la imagen o dejarla con fondo transparente, incluso podremos animarla, pero… ¿Cómo saber cuál es el formato más adecuado para una determinada imagen? A continuación, vamos a realizar una comparativa de varios de los formatos más usados: PNG, JPG, GIF y WEBP. Para realizar el análisis, nos vamos a basar en tres factores fundamentales.

PNG vs JPG: Compresión

Todos los gráficos que se incluyen en una página web deben de ser descargados desde el servidor y, por ello, es importante que las imágenes pesen poco para que el contenido pueda ser descargado lo más rápido posible.

En este sentido, JPG es un buen formato ya que nos permite comprimir hasta 10 veces el tamaño de una fotografía. Con JPG se pueden guardar fotografías con gran colorido y el tamaño del archivo será bastante ligero, lo que lo hace ideal para utilizarse en un sitio web. Hay que tener en cuenta que es un formato comprimido, por lo que al convertir la imagen, habrá una pérdida mayor o menor de calidad, en función del ratio de compresión que utilicemos, y que aumentará con sucesivas conversiones. Recomendamos no comprimir con un ratio inferior al 70% de calidad, lo que nos dará imágenes generalmente de menos de 200 KB pero con suficiente calidad para verse bien en el sitio web desde cualquier dispositivo.

Por otro lado, PNG es un formato de imagen sin pérdidas. Esto quiere decir que se puede guardar la imagen tantas veces como se quiera sin perder calidad. Dentro de los formatos de imágenes sin compresión, este es el más utilizado hoy en día en web. Es muy útil para fondos de la web, iconos o gráficos que no son fotografías.

JPG

Todos los gráficos que se incluyen en una página web deben de ser descargados desde el servidor y, por ello, es importante que las imágenes pesen poco para que el contenido pueda ser descargado lo más rápido posible.

En este sentido, JPG es un buen formato ya que nos permite comprimir hasta 10 veces el tamaño de una fotografía. Con JPG se pueden guardar fotografías con gran colorido y el tamaño del archivo será bastante ligero, lo que lo hace ideal para utilizarse en un sitio web. Cada vez que reduzcamos su tamaño iremos perdiendo calidad. Recomendamos no comprimir con una ratio inferior al 70% de calidad, lo que nos dará imágenes generalmente de menos de 200 KB, pero será suficiente para verse bien en el sitio web desde cualquier dispositivo.

PNG

El formato PNG es el que mejor capacidad para la transparencia tiene. Este formato puede tener hasta 8 bits de información adicionales en cada píxel, lo que nos permite crear gráficos traslúcidos independientemente del color de fondo. Eso sí, hablamos de imágenes que ocupan más KB y, por lo tanto, de archivos de mayor tamaño.

PNG es un formato de imagen sin pérdidas. Esto quiere decir que se puede guardar la imagen tantas veces como se quiera sin perder calidad. Dentro de los formatos de imágenes sin compresión, este es el más utilizado hoy en día en web. Es muy útil para fondos de la web, iconos o gráficos que no son fotografías.

GIF

El formato de moda gracias a su integración con WhatsApp, GIF es un formato que permite el movimiento en un bucle normalmente infinito (debido a su fama han aparecido portales especializados como Giphy).

Puede soportar transparencias y una paleta de 256 colores. Además de para animaciones, el GIF puede usarse en imágenes sencillas, de poco peso y con colores planos (no quedan bien los degradados debido a la limitación en el número de tonalidades). No es aconsejable su uso en el caso de la fotografía: las fotografías pierden demasiada calidad si las conviertes a GIF.

Te puede interesar: 20 recursos gratuitos para desarrolladores/diseñadores web 

WEBP

Es un formato de imagen recién llegado y que ha venido a revolucionar el mundo de la compresión de imágenes. Desarrollado por Google y recomendado en su herramienta de optimización web PageSpeed Insights. Sus inicios datan del 2010 como una iniciativa de código abierto que consigue compresiones tanto en imágenes estáticas como animaciones del 30%.

El único problema es precisamente que debido a su reciente salida no todos los navegadores soportan este formato. Lo podemos encontrar en Google Chrome, Opera y Safari. Es el futuro en los formatos de imagen.

Conclusión: ¿Cuál es el mejor formato de imagen?

Por ahora no hay un formato único que pueda servir para todo por lo que tendremos que usar uno u otro según nuestras necesidades en cada caso.

El formato JPG es el más adecuado para las fotografías e imágenes realistas que en su formato de origen ocuparían varios megabytes, ya que, al comprimirse, pueden ocupar unos pocos cientos de Kb o menos.

El formato PNG es el más adecuado para usar en fondos de los sitios web, en iconos y gráficos o imágenes con fondo transparente, o con trazos finos o texto.

El GIF lo usaremos para animaciones y archivos que contengan poca información o colores.

Y siempre que podamos filtrar por navegador usaremos WebP para mejorar nuestra puntuación general en PageSpeed y además aumentar la velocidad de descarga de las imágenes.

Esperamos que esta sencilla comparativa de formatos de imagen os resulte de utilidad para mejorar el rendimiento y calidad de las imágenes de vuestra web.