Formatos de imagen png, gif, jpg y svg. ¿Cuándo usarlos?

¿Qué diferencia existe entre los formatos de imagen jpg, png, gif y svg?

Antes de nada debes saber que no soy un experto en estos temas y que en esta entrada vas a encontrar un resumen de los puntos clave para poder hacer una elección rápida cuando lo necesites.

Si de verdad quieres profundizar te recomiendo este recurso de ensalza.com dónde se explica muy bien.

Aquí sólo encontrarás las ideas clave y alguna cuestión adicional.

¿Conserva o pierde la calidad de compresión?

Google penaliza las webs que pesan mucho y tienen un tiempo de carga demasiado prolongado.

Este es el motivo por el que las imágenes tomadas con una cámara de fotos no son adecuadas para web. Necesitamos transformarlas a alguno de los formatos adaptados al ecosistema de internet. (Además de optimizar la imagen para web mediante Photoshop o parecido)

La diferencia más importante que debes retener entre todos los formatos jpg, png y gif es si la compresión de las imágenes pierde o no calidad.

En resumen:

• El formato .png comprime las imágenes sin pérdida de calidad.
• El formato .jpg comprime las imágenes con pérdida de calidad. Pero mantiene una calidad correcta para web.
• El formato .png comprime mejor que el formato .gif.

Cuando prime la velocidad de carga usa .jpg. Usa este formato con fotografías.

Cuando prime la calidad de la imagen normalmente usa .png.

Atención: calidad se refiere a contornos bien definidos por ejemplo en logotipos y/o letras.

Transparencias

Como no experto del tema durante mucho tiempo no he sabido exactamente a que se refiere la palabra transparencia.

Atención porqué el concepto tiene trampa si eres neófito.

Si imaginas una circunferencia negra centrada dentro de un lienzo, la parte exterior es una transparencia y la interior otra transparencia. En total 2.

Dicho esto…

• El formato jpg no tiene transparencias.
• El formato .gif admite sólo una transparencia.
• El formato .png admite tantas transparencias como se requiera.

Volviendo al ejemplo anterior, usaríamos .png de necesitar la transparencia exterior y la interior al círculo.

Animaciones

En ocasiones queremos hacer un pequeño guiño al visitante web.

El formato de imagen que permite pequeñas animaciones es el gif. Los demás no lo permiten.

Usar el .gif tiene muchas ventajas.

• Podemos reproducir la animación en bucle.
• Al reproducirlo iterativamente nos ahorramos los molestos anuncios de youtube o la plataforma dónde podríamos haber colgado el vídeo.
• El consumo de ancho de banda es muchísimo menor.

Webs famosas que han hecho uso de gif es la propia web de Apple.

Pero atención, no debemos abusar de este recurso para no saturar al visitante web.

Seguridad

Fijaros que todavía no he hablado del formato .svg.

El formato svg es un formato vectorial que nunca pierde calidad.

Por ejemplo, si necesitaras imprimir una lona lo enviarías a la imprenta en svg y jamás en png.

Recientemente se ha extendido su uso porqué es un formato amable con el responsive. Sin embargo su mayor riesgo es la seguridad.

El formato svg es en realidad una derivado de xml y aquí empiezan los problemas de seguridad.

Mira en la imagen adjunta que fácil es…

De hecho, en wordpress por defecto si intentas subir una imagen .svg te dirá que no está permitido por motivos de seguridad.

Querido lector,

Resumiendo:

• Usa normalmente el formato jpg para imágenes.
• Cuando tengas transparencias usa el formato .png. A poder ser png8 en lugar de png24. Esta será el caso de logotipos e iconos.
• Para vídeos cortos usa .gif.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!