Correcto uso y optimización de imágenes en la web

Lo primero que hay que saber es que todas las imágenes que mostramos a través de una pantalla van a 72pp de resolución (120pp para carteles de grandes dimensiones y 300pp para imprimir).

A continuación vamos a explicar los diferentes formatos de imagen que podemos usar en la web y lo que es mas importante cuando tenemos que usarlos.

Básicamente existen 3 formatos de imágenes que podemos usar:

- GIF > Se usa para imágenes de menos de 256 colores, admite transparencia aunque sea un poco brusca. Es prácticamente igual que el PNG de 8 bits pero pesa más, por lo tanto recomendamos no usarlo.

- PNG 8 Bits admite como máximo 256 colores y transparencia brusca. Pesa menos que un GIF por lo que recomendamos su utilización en detrimento del GIF.

- PNG 24 Bits > Usaremos este formato exclusivamente con imágenes que sean transparentes de mas de 256 colores. Decir que el peso de este tipo de imágenes es muy alto.

- JPG > se utiliza para imágenes de mas 256 colores que no sean transparentes.

En imagen de abajo podemos ver una exportación para web de Adobe Photoshop con los diferentes formatos y pesos.

Al ser una fotografía de más de 256 colores y sin transparencia el formato correcto a elegir es el JPG.

Como podemos observar el PNG-8 se ve mal por que solo admite 256 colores. El PNG-24 ocupa 259,6 KB que es una barbaridad si lo comparamos con los 34,9 KB que ocupa el JPEG.

Como hemos visto, las diferencias entre los formatos es muy grande, y entre los dos tipos de PNG lo es también, por lo que merece la pena probar primero si se ve correctamente en PNG-8, sino lo ponemos en PNG-24.

Si lo que queremos son compresiones más extremas con los PNG podemos usar herramientas como PNGGauntlet, pngquant o pngoo