los mejores tipos de imágenes para usar en la web
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:
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.
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.
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.
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: