¿Qué formato es el mejor?
Cada formato de imagen tiene unas características distintas y unas aplicaciones también diferentes. ¿Cómo sabemos que una imagen tiene un formato u otro? Lo normal es que hasta que no la tengamos en nuestro dispositivo y veamos su extensión no podamos hacerlo. Excepto en el formato de imagen GIF.
Para poder saber cuál es la mejor debemos preguntarnos varias cosas: ¿Necesitamos que nuestra imagen se mueva? ¿Necesitamos que el fondo sea transparente? ¿Necesitamos que sea compatible con todos los navegadores? Y podríamos seguir un rato…
Así que lo primero que vamos a hacer es explicar un poco por encima la diferencia entre los distintos tipos de imágenes.
La compresión de imágenes: JPG vs PNG vs WEBP.
Cada imagen que subimos a nuestra página web va a ocupar un determinado espacio. Ese espacio, o peso, de la imagen será aquello que cada uno de los visitantes de nuestra web tendrá que descargarse para poder ver el contenido completo. Por ello necesitamos que nuestras fotos, ilustraciones, animaciones o el formato de imagen que elijamos pese poco… Esto quiere decir que además del tamaño de la imagen, que debería ir acorde al espacio que va a ocupar en pantalla, debe estar comprimida todo lo posible para que pese lo imprescindible.
Pero comprimir lleva aparejada una pega importante y es que a mayor ratio de compresión peor calidad va a tener dicha imagen. Aquí es donde entra en juego: ¿Y entonces qué formato elijo?
JPG
JPG es un buen formato de imagen comprimido. Permite ajustar mucho la calidad perdida respecto al espacio que ocupará. Como buena práctica no es recomendable comprimir más allá del 70% o la calidad de la imagen comenzará a verse resentida. Pero es la solución ideal cuando queremos tener imágenes «grandes» con poco peso y «poca» pérdida de calidad.
JPG es formato más habitual de todas las imágenes que hay en la web. Y sirve para un amplio abanico de posibilidades: fotografías, gráficos, «logotipos», iconos, etc.
¿Qué pega tiene este formato de imagen? Una muy importante es que el fondo no puede ser transparente. Por lo que en casos como los logotipos, mencionados anteriormente, solo nos servirá si queremos que el fondo sea de un color concreto.
PNG
En este caso hablamos de un formato de imagen sin compresión. Es decir, PNG no se comprime o al menos no pierde calidad cuando lo comprimimos.
¿Qué ventaja tiene PNG vs JPG? La principal es que nos permite utilizar transparencias como fondo. Cosa muy útil para recursos de una web como el logotipo, ilustraciones u objetos decorativos situados estratégicamente en un diseño.
¿Y la desventaja de PNG? Que ocupa algo más.
Aún así, es el formato más utilizado para las transparencias por la cantidad de facilidades que nos ofrece.
WEBP
¿Qué es WEBP? Webp es un formato que aunque ya tiene más de 10 años sigue sin estar implantado al 100% en todos los dispositivos y navegadores. En especial aquellos que tienen más años. Ha sido desarrollado por Google y es el formato de imagen que Google recomienda siempre que hacemos un test de velocidad con sus herramientas.
¿Y qué ventajas ofrece? Fusiona lo mejor de los dos tipos de imágenes mencionados anteriormente. Permite transparencias como PNG y además se puede comprimir sin apenas perder calidad como JPG.
¿Y las pegas? Pues tan grandes como sus ventajas. Dependes de que el navegador pueda soportarlo. Y en los dispositivos con cierta antigüedad es un problema recurrente.
GIF
No he añadido GIF en la comparativa porque creo que GIF es más un recurso extra que un problema a la hora de optimizar nuestra web y comprimir las imágenes. GIF es un formato de imagen que permite una animación, en bucle, con hasta 256 colores y que permite el fondo transparente.
No se suele usar como fotografía, pierden demasiada calidad, y no tiene mucha más función que la de «decorar».
¿Qué formato de imagen elijo?
No hay una respuesta única. Dependerá de lo que necesites en cada momento. ¿Para una imagen estática sin fondo transparente? Utiliza un JPG. ¿Necesitamos transparencias? Utiliza la extensión PNG. ¿Puedes ofrecer distintas imágenes mediante un plugin o de otra manera? Ofrece entonces en tu web el formato WEBP que será más rápida y a Google le gustará eso. ¿Que necesitas poner una animación? GIF es la solución a ese problema.
No podemos decir que exista un tipo superior a todos los demás. Existen momentos en los que cada imagen cobrará su protagonismo.
Esperamos que os haya gustado este artículo. Hace tiempo os hablamos de los 7 mejores sitios para descargar imágenes. Puede que ahora podáis hacerlo con otro criterio.
