Formatos de imagen para Sitio Web

Al ver una web una de las cosas que más me impresionan y capturan de ella son las imágenes que utiliza, pero muchas veces encuentro sitios en los que las imágenes tardan demasiado tiempo en cargar y simplemente termino saliéndome de ella, así como otras veces cargan muy rápidamente pero con una calidad realmente mala. Esto ocurre por no escoger los correctos formatos de imagen para las páginas web.

A la hora de trabajar con imágenes tenemos a nuestra disposición distintos formatos  como BMP, GIF, JPG, TIF, PNG, entre otros, básicamente los diferenciamos por la extensión (esas 3 o 4 letras al final del archivo). En nuestro caso, debemos saber que los formatos de imagen más utilizados en sitios web son 3: JPG o JPEG, PNG y GIF.

Pero, ¿cuál es la diferencia entre formatos de imagen? ¿Es igual usar PNG o GIF? ¿JPG o PNG? ¿Cuál es el formato de imagen para fondos transparentes? Son preguntas que yo me hice en su momento y seguro tú también lo has hecho y que encontrarás la respuesta aquí.

Cuando hablamos de una imagen para un sitio web hay 2 cosas que nos interesan: Tamaño y Calidad. Nuestras imágenes deben de tener una buena calidad para que nuestra web sea atractiva para los usuarios, el problema viene en que mientras más calidad tenga será más pesado el archivo y nuestro sitio tardará más tiempo en cargar y eso no le gusta ni a tus visitantes ni a Google, de hecho el tiempo de carga es uno de los factores importantes para el posicionamiento en buscadores. Entonces ¿cómo haremos para tener imágenes con excelente calidad sin que afecte al tiempo de carga de nuestra página?  Lo primordial es escoger bien el formato de cada archivo, así que hablemos de los 3 más usados.

JPG

JPG o JPEG son las siglas de Joint Photographic (Experts) Group, es el nombre de un comité que creó un estándar de compresión para imágenes. Esta es una compresión con pérdida, es decir la imagen se comprime y pesa mucho menos, pero la calidad disminuye al mismo tiempo. Este formato está pensado principalmente para fotografías e imágenes digitales y es el estándar para las cámaras digitales.

Casi todas las fotografías que probablemente tengas en tu ordenador deben tener esta extensión y es que aunque la compresión de JPG tiene pérdida, permite más de 16 millones de colores y se puede encontrar el balance perfecto entre calidad y peso.

JPEG admite distintos niveles de compresión así que lo que debes recordar es:

 Mayor compresión = menor calidad = archivos más pequeños

Menor compresión = mayor calidad = archivos más grandes

Si la imagen original es bastante grande lo normal sería comprimirla hasta unos 300/400kb y asegurarnos que tenga aún una buena calidad, esto va a variar también dependiendo del tamaño que deseas lograr.

Uno de los inconvenientes es que el formato JPG no admite las transparencias y si la imagen que quieres subir tiene un fondo transparente este se rellenará con un fondo blanco, por lo cual no es un buen formato para logos ni dibujos, la pérdida de calidad también se va a notar un poco más al trabajar con texto.

Por eso recuerda, JPEG es el formato ideal para trabajar con fotografías.

Fotografía con compresión de 50, esta fotografía tiene un peso de 463 kb mientras que la original tenía 2.239kb

PNG

Es el formato de compresión sin perdida y son las siglas de Portable Network Graphics. Las imágenes con extensión .png son imágenes que no poseen ningún tipo de pérdida, pero al mismo tiempo pesan bastante y no querrás que una fotografía haga que tu página tarde 3 veces más en cargar.

Una ventaja que se tiene al trabajar con PNG es que soporta las transparencias en 256 niveles, lo cual permite jugar muy bien con las sombras y los fondos de una imagen, lo que lo convierte en el favorito para los logotipos, imágenes con texto y dibujos lineales.

Hay dos formas de  trabajar con PNG:

PNG 8: Que tiene limitación de colores (solo puede trabajar con 256 colores), pero el peso del archivo es muy pequeño.

PNG 24: Que no tiene limitación de colores, pero el tamaño en el disco será mayor.

Lo que debes saber es que debes utilizar PNG para los logotipos, ilustraciones, dibujos lineales o textos.

Esta imagen del puente tiene un fondo transparente que no se puede lograr con JPG y tiene un peso de 306 kb. La misma imagen en PNG 8 pesa 114 kb y en JPG 144

GIF

El GIF (Graphic Interchange Format) es un formato de compresión que utiliza el algoritmo de compresión LZW,  muy parecido al PNG 8 ya que también soporta transparencias y tiene limitación de colores, 256 colores, por lo cual solo es recomendable usarlo cuando el tamaño del archivo sea menor que un  PNG 8. El peso de los archivos en .gif será bastante pequeño, sin embargo su magia está en que permite crear imágenes en movimiento lo cual lo ha hecho muy popular en los últimos años.

Al mismo tiempo es posible utilizar el formato GIF para imágenes en movimiento.

Esta Imagen es un GIF si lo guardaramos en otro formato no se movería

Formato de Imagen que usaremos

Ahora solamente por sino te ha quedado claro, te lo dejaré aquí:

JPG para fotografías

PNG para logos, dibujos vectoriales, fondos transparentes e ilustraciones

GIF para imágenes en movimiento

Si deseas aprender más sobre diseño web te invito a que revises ¿Qué es y por qué debería usar WordPress en mi sitio web? y si ya usas wordpress entonces note pierdas Los 6 mejores plugins para wordpress.