Formatos de imagen para tu web: cómo escoger el correcto

¿Por qué es importante el formato de imagen usado?

Unas imágenes claras, originales y ligeras son una herramienta imprescindible para mejorar la conversión de un ecommerce.

Desde el punto de diseño web las imágenes que utilicemos serán un factor determinante en el resultado final.

Desde el punto de vista del SEO también tendremos que tener en cuenta que las imágenes se posicionan y que dependiendo de como cuidemos el tipo de imagen y su etiquetado estas serán más favorables para la indexación y el posicionamiento.

¿Que formato de imagen usar en mi web?

Así, al escoger el formato de imagen que utilizaremos en cada caso tendremos que tener en cuenta las características de la imagen así como las cualidades de cada formato.

Formatos de imagen utilizados

GIF, JPG, PNG8 y PNG24 son los únicos formatos de archivo de los que deberás preocuparte (y la mayoría de las veces solo necesitarás utilizar 2 de ellos)

Vamos a ver las características y para que tipo de imágenes serán más adecuados los distintos formatos.

GIF

El formato GIF (Graphic Interchange Format) tiene como principal limitación que puede representar un máximo de 256 colores.

Por otra parte, GIF tiene la ventaja de ser el único de estos formatos capaz de mostrar animaciones de imágenes. Los GIF animados eran muy populares hace un par de décadas, pero poco a poco han ido cayendo en desuso debido, en parte, a la baja calidad de este formato al mostrar fotografías.

Dancing Baby

¿Quién no recuerda el popular “Dancing Baby” de 1996?
Si no lo recuerdas tal vez deberías estar en el cole 😉

 

A pesar de que utilizando el formato GIF tenemos la posibilidad de utilizar transparencias, habrá que tener presente que lo hace de forma bastante burda. Los bordes de la imagen y la transparencia tienden a verse pixelados, por lo que habrá que tener cuidado con las imágenes a las que tratemos de aplicar estas transparencias.

Por lo tanto, GIF será un formato bastante adecuado para mostrar imágenes sencillas con colores planos y formas simples como, por ejemplo, la mayoría de los logotipos.

PNG8

Bajo la extensión PNG tenemos que distinguir entre PNG8 (con un máximo de 256 colores) y PNG24 (capaz de representar hasta 16 millones de colores).

Así, el PNG8 será bastante similar al formato GIF ya mencionado con la diferencia de que este no puede mostrar animaciones y tiene una mejor tasa de compresión que hará las imágenes menos pesadas.

Como el anterior, el PNG8 será una buena opción si la imagen que queremos mostrar no muestra un patrón de colores simples como en el caso de textos, ilustraciones planas o logotipos.

JPG

El formato JPG sigue siendo el más utilizado en páginas web.

Esto es debido en parte a la excelente compresión que realiza consiguiendo unos pesos mínimos con una calidad muy aceptable.

El talón de Aquiles de este formato de compresión es que en zonas amplias de color se pueden apreciar los artefactos típicos de este tipo de compresión.

El JPG muestra artefactos en imágenes más simples

(Ampliación de imagen) En grandes áreas del mismo color se hacen visibles los artefactos del JPG y se comportan mucho mejor el PNG8 o el GIF

Sin embargo, en fotografías con unos patrones de color más complejos estos artefactos son inapreciables. Esta es la razón por la que, a pesar de no soportar las transparencias, sigue siendo el formato favorito para incluir fotografías en la web.

Otra cosa a tener en cuenta es que este tipo de compresión conlleva perdida de calidad. Esto es que cada vez que editamos y guardamos una imagen en formato jpg se pierde calidad respecto al formato original. Si volvemos a abrir un jpg, lo editamos y lo volvemos a guardar como jpg volveremos a sufrir perdida de nitidez. Será aconsejable, por lo tanto, editar la imagen en otro formato que no sufra este ‘deterioro’ y cuando obtengamos el resultado deseado exportar a jpg una sola vez.

PNG24

El formato PNG24 admite color en 24 bits por lo que es otra opción a la hora de presentar fotografías en nuestra web.

A diferencia del formato JPG presenta 2 ventajas:

Por una parte admite transparencias que, además, son mucho más sutiles que en el caso de los GIF o los PNG8.

Por otra parte utilizan un tipo de compresión sin perdida de calidad.

La principal desventaja con respecto al JPG es que los archivos resultantes utilizando el formato PNG24 es considerablemente mayor. Esto ralentizará la página y perjudicará la experiencia de usuario.

Entonces ¿Qué formato uso?

A pesar de que puede haber opiniones encontradas en este aspecto, en mi opinión, la mejor manera de decidir el formato a utilizar será la siguiente.

Animaciones

En el caso de una imagen que requiera una animación simple la única opción sera el formato GIF. (Obviamos aquí otras opciones como las animaciones con CSS3 y HTML5 o incluso el uso de Flash.)

Colores Planos y logotipos simples

Si la imagen tiene un patrón de color simple, con grandes áreas de colores planos la mejor opción será el PNG8, puesto que el resultado suele ser una imagen más ligera que el GIF.

Fotografías

GIF, PNG8, JPG y PNG24

Comparativa de peso y calidad de una fotografía de 400×400 px guardada en los distintos formatos.

Si lo que queremos mostrar es una fotografía (que requerirá de detalles más sutiles) utilizaremos el formato JPG (también por su menor peso en comparación con el PNG24).

Pero si la fotografía que mostramos ha de incluir partes transparentes la opción idónea será el PNG24.

¿Y tu? ¿Utilizas estos formatos correctamente? ¿Sigues otro criterio a la hora de escoger el formato de tus imágenes?

Casi siempre estoy hablando de SEO, Marketing Online y Diseño Web (…se lo he consultado al médico y dice que es crónico)

¿Te gusta el artículo? Compártelo, ¡no seas egoísta!
Tweet about this on Twitter
Twitter
0Share on Google+
Google+
0Share on Facebook
Facebook
0Share on LinkedIn
Linkedin
¿Hablamos?

Cuéntame tu proyecto, dime en lo que te puedo ayudar, plantéame tus dudas o simplemente escríbeme para decirme que estás ahí... me encanta saber de ti :)

Not readable? Change text. captcha txt

Empieza a escribir y pulsa Enter para buscar