Hace poco escribí un artículo en Frikymama donde hablaba sobre cómo optimizar las imágenes antes de subirlas al blog y de ahí surgieron varias dudas.

Hoy me voy a centrar en la primera: ¿Qué diferencia hay entre un JPG y un PNG?

Para entender la diferencia entre tipos de imágenes y cuales es el mejor formato en el que guardar las tuyas, te hago una guía rápida para que lo tengas bien claro ^_^

Si vas a usar tu imagen en internet estos son los tipos de imágenes recomendadas para webs y blogs:

que es un jpg  por estibaiz lopez las mejores imagenes para usar en web y blog

JPG o Joint of Photographic Experts Group

.jpg puede que sea la más conocida, por que en general es la más usada. Es un formato de imagen que «pesa» u ocupa menos que otros, pero con una perdida de calidad mayor. De todos modos si vas a guardar una foto para subirla a tu blog este es el formato más adecuado.

 que es un png por estibaiz lopez  las mejores imagenes para usar en web y blog

PNG o Portable Networks Graphic

Los .png se crearon después de los .gif para intentar mejorar relación entre la calidad ofrecida y el tamaño de la imagen. Es un formato que nos permiten guardar transparencias, pero ocupan más que los .jpg También es cierto que hay distintos tipos de .png: PNG-32, PNG-24 y PNG-8, que te darán la opción de guardar tus imágenes usando más o menos colores y en consecuencia con mayor o menos «peso»

Yo tiendo a guardar casi todo en PNG-24, aunque hoy por variar las imágenes que veis en este post están en jpg.

que es un gif por estibaliz lopez  las mejores imagenes para usar en web y blog

GIF o Graphic Interchange Format

Más tipos de imágenes: Aquí nos encontramos con .gif que como os he dicho anteriormente salió antes que .png.

Para guardar imágenes con muchos colores o degradados pierda demasiada calidad por su tipo de compresión, pero en cambio son geniales si quieres hacer pequeñas animaciones con varias imágenes. Además, como los .png acepta transparencias y su peso es mucho menor.

que es un svg  las mejores imagenes para usar en web y blog

SVG o Scalable Vector Graphics

Son las menos conocidas, aunque son las que mejor funcionan a la hora de desarrollar la imagen de una página web. Como el nombre indica se trata de vectores escalables, pero codificados en XLM, de forma que cuando guardamos una imagen en este formato, se nos creará un código que podremos insertar en la web.

Si queréis profundizar en conocer los SVG os dejo esta web de un tutorial de D3 donde lo explican muy bien en su sección correspondiente. Además, un video cortito para que veáis lo realmente interesante de este formato:

[ct_video src=»https://youtu.be/rlG94kNiBPk»]

 

infografia las mejores imagenes para usar en web y blog: png, jpg, svg y gif

 

¿Te ha parecido útil la explicación? ¿conocías ya estos formatos de imagen, cual es tu favorito?