Skip to main content

¿Cuál es el formato de imagen más adecuado para tu página web?

By 19 enero, 2017Diseño web

Estudio Andreoli, diseño de páginas web, Cuál es el formato de imagen más adecuado para tu página webUna imagen vale más que mil palabras y escoger el formato adecuado para una página web, parte de buscar originalidad, ligereza y claridad.

En el posicionamiento de una página web, las fotografías juegan un papel fundamental. El cuidado que les demos y el etiquetado, permitirán obtener resultados favorables en los motores de búsqueda.

De allí, que se deben tomar en cuenta diversas características para escoger el formato más adecuado según sus cualidades y necesidades particulares.

GIF

Este formato, cuya abreviación significa “Graphic Interchange Format”, sólo puede representar un máximo de 256 colores, pero es el único que puede mostrar animaciones de imágenes. Los GIF fueron ampliamente utilizados hace dos décadas, pero con el tiempo han disminuido su protagonismo, debido a que las fotografías no se ven con buena calidad.

Aunque ofrece la posibilidad de trabajar con transparencias, lucen pixeladas. Se puede emplear para imágenes sencillas, con colores y formas simples, como 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).

El PNG8 es bastante similar al GIF, con la diferencia de que no puede mostrar animaciones y tiene una mejor tasa de compresión que hará las imágenes sean menos pesadas.

Como el anterior, el PNG8 será una buena opción si la imagen que queremos mostrar no tiene 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 se debe, en parte, a la excelente compresión que realiza, consiguiendo pesos mínimos, con una calidad 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. Sin embargo, en fotografías con unos patrones de color más complejos, dichos 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 pérdida de calidad. Cada vez que editamos y guardamos una imagen en JPG, se pierde calidad respecto al formato original. Si volvemos a abrir un JPG, lo editamos y lo guardamos como JPG, volveremos a sufrir perdida de nitidez. Es aconsejable, por lo tanto, editar la imagen en otro formato que no sufra este ‘deterioro’ y cuando obtengamos el resultado deseado, lo exportemos a JPG una sola vez.

PNG24

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

Presenta 2 ventajas: admite transparencias que, además, son mucho más sutiles que en el caso de los GIF o los PNG8 y utiliza un tipo de compresión sin pérdida de calidad.

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

Entonces ¿Qué formato uso?

A pesar de que puede haber opiniones encontradas, se puede hacer tomando en cuenta las siguientes consideraciones:

  • Animaciones

En el caso de imágenes que requieran una animación simple, se puede emplear 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 alternativa será el PNG8, puesto que el resultado suele ser una imagen más ligera que el GIF.

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, el formato idóneo será el PNG24.

Stefano Andreoli

CEO y Creative Director en Estudio Andreoli™. Docente en Monster Academy, HTML.it, IED Madrid y Jurado en Mediastars Festival. Pues.. un poco liado.

Dejar un comentario