Formatos de imagen ¿Qué formatos usar y cuándo?

Las imágenes son uno de los elementos más importantes en las páginas web, y si tienes una página web, probablemente te has hecho ésta pregunta ¿Qué formatos de imagen utilizo?

Existen muchos formatos, pero los más importantes y recomendados para usar en la web son los siguientes.

Formatos de imagen con pérdida

Para reducir el peso de una imagen, lo mas normal es reducir la calidad de ésta.

JPG

El formato más popular usado en la web. Permite reducir el peso de las imágenes a cambio de reducir la calidad. Hay distintos niveles de compresión y puede darnos muy buenos resultados. Es el formato más adecuado para fotografías e imágenes que no necesiten transparencias.

Si necesitamos hacer animaciones, mostrar transparencias o no perder calidad de imagen, tendremos que usar otros formatos.

Formatos de imagen sin pérdida

También es posible utilizar formatos sin pérdida de calidad.

PNG

Es un formato que nació como alternativa a GIF. Si queremos transparencias, será probablemente la mejor opción.

También puede funcionar bien con fotografías. Quizás el peso sea un poco mayor que con JPG, pero la calidad será mejor. Es cuestión de probar y ver qué da mejor resultados para determinadas imágenes (JPG o PNG).

GIF

Es otra opción sin pérdida que también puede dar muy buenos resultados. El mayor inconveniente es que sólo utiliza 256 colores y permite una sola transparencia, por lo que si necesitamos tener distintas transparencias o usar una paleta de colores mayor, tendremos que escoger otro formato como png. Sería un buen formato a utilizar para logos o elementos gráficos que usen pocos colores.

La principal ventaja es sin duda la posibilidad de mostrar imágenes animadas.

Vectores (SVG)

El principal problema de los formatos comentados hasta ahora es que se basan en los píxeles. Cada píxel tiene un valor asignado, lo que hará que veamos nuestra imagen correctamente. Pero, ¿qué ocurre si ampliamos la imagen? Pues que la imagen se empieza a ver mal. Para evitar este problema existen las imágenes vectoriales, que en lugar de píxeles utilizan descripciones de formas geométricas (líneas, círculos, etc) que pueden resistir perfectamente el zoom.

Se utilizan imágenes vectoriales principalmente para elementos gráficos.

También permite hacer animaciones.

En resumen: