Formatos de imagen para la web
A menudo, en nuestra web o en nuestras redes sociales utilizamos distintos formatos de imágenes. Pero, ¿conoces exactamente la diferencia entre cada uno de ellos, o el tipo de formato que debes utilizar en cada caso? Aunque existen otros, PNG, JPG, TIFF y GIF son los formatos más conocidos, y sobre los que hoy queremos hablar para dejar claras sus características, a los que añadiremos un recién llegado como WEBP. Te lo contamos a continuación.
Imágenes JPG
Quizás el formato de imagen más conocido y extendido entre los usuarios es el JPG. ¿Qué es un JPG? Un formato de imagen con pérdida de calidad; es decir, cada vez que lo manipulas o reduces su tamaño, la imagen en cuestión perderá en calidad.
Es un formato pensado para la compresión de imágenes digitales y fotográficas, y es capaz de guardar información de color CMYK o RGB, así como de escalas de grises. Es el formato estándar que utilizan las cámaras digitales, aunque en casos en que hablemos de fotografía profesional es recomendable utilizar otros formatos.
También es muy utilizado en páginas web y en redes sociales, tanto por su compatibilidad con distintas plataformas y programas, como por el hecho de que es un tipo de imagen que no pesa demasiado. Aunque para ello antes deberás reducir su peso a través de programas de edición como Photoshop (en este caso el propio software cuenta con una opción de Guardar para web, muy recomendable en estos casos).
Imágenes GIF
Tan de moda últimamente, el GIF es un formato de imagen que permite crear imágenes en movimiento sin necesidad de instalar un software específico (de ahí su reciente fama, que ha motivado la aparición de portales especializados como Giphy).
Soporta animaciones, transparencias y paletas de 256 colores (a diferencia de los PNG, que soportan millones de colores).
Además de para animaciones, el GIF suele utilizarse para guardar logotipos sencillos o ilustraciones simples con colores planos y poco peso. No es demasiado apto en el caso de la fotografía: las imágenes fotográficas pierden demasiada calidad en estos formatos GIF.
Imágenes PNG
En el lado opuesto al JPG está el PNG, que es un formato de compresión sin pérdida de información. Además, es un formato que permite utilizar transparencias, mientras que el JPG siempre se verá con un fondo blanco. Por otro lado, su tamaño también es mayor, por lo que si se utiliza en fotografías, hay que tener en cuenta que el archivo final será considerablemente pesado.
¿Cuándo utilizarlo? Al igual que el JPG, el PNG suele utilizarse para web y plataformas online cuando quieres mantener una calidad alta de la imagen final, o en aquellos casos en que la imagen no tenga un fondo. También es utilizado cuando se trata de dibujos vectoriales o logotipos, que se verán mejor y con mayor calidad de color en este formato que en JPG. Sin embargo, no es una extensión útil para trabajos cuyo fin sea la impresión digital, puesto que este formato no admite colores en CMYK.
Imágenes WebP
En el lado opuesto al JPG está el PNG, que es un formato de compresión sin pérdida de información. Además, es un formato que permite utilizar transparencias, mientras que el JPG siempre se verá con un fondo blanco. Por otro lado, su tamaño también es mayor, por lo que si se utiliza en fotografías, hay que tener en cuenta que el archivo final será considerablemente pesado.
¿Cuándo utilizarlo? Al igual que el JPG, el PNG suele utilizarse para web y plataformas online cuando quieres mantener una calidad alta de la imagen final, o en aquellos casos en que la imagen no tenga un fondo. También es utilizado cuando se trata de dibujos vectoriales o logotipos, que se verán mejor y con mayor calidad de color en este formato que en JPG. Sin embargo, no es una extensión útil para trabajos cuyo fin sea la impresión digital, puesto que este formato no admite colores en CMYK.
Imágenes SVG
El formato gráfico vectorial SVG (Scalable Vector Graphics) es un lenguaje de estándar abierto que forma parte de HTML5 y permite crear dibujos vectoriales (formas, imágenes y texto) en 2D por medio de etiquetas.
Por las diversas ventajas que nos ofrece, SVG es una opción muy recomendable para todos los diseñadores y desarrolladores frente a los formatos tradicionales basados en Mapa de Bits, como explicamos en este artículo.
Además, ya no hay que tener miedo a su compatibilidad. Actualmente, está ampliamente soportado en los principales navegadores. Firefox comenzó a usarlo en 2004, Google Chrome lo empezó a utilizar en 2007 y Microsoft lo implementó en 2011 con Windows Internet Explorer 9.