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

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

5
(1)

¿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.

Ejemplo de como insertar código javascript en una imagen .svg
Ejemplo de como insertar código javascript en una imagen .svg

¡Hola!

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!

Ejercicios recomendados

A continuación te propongo un ejercicio no relacionado con .jpg, .png, .gif, .svg pero interesante para repasar los conceptos aprendidos hasta el momento.

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 1

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.