Las imágenes son elementos de vital importancia para un sitio web, motivo por el que cada vez se emplean más fotografías y gráficos que funcionan como herramientas de comunicación descriptiva e informativa que hacen las páginas más atractivas para el usuario. Cualquier texto que vaya acompañado de una imagen siempre atraerá más la atención del visitante.

Los programas de edición de imágenes, como Photoshop, nos permiten exportarlas en distintos formatos o extensiones: *.JPG, *.TIF, *.GIF o *.PNG y es aquí cuando puede surgirnos la duda de cuál utilizar para subir nuestra imagen a la web, cuál puede ser el más conveniente.

Lo primero que hay que decidir es para qué queremos la imagen, qué papel va a desempeñar en nuestro sitio. Una vez hecho esto, habrá que tener en cuenta las características de las extensiones para tomar la decisión correcta, estas son algunas de sus propiedades que te ayudaran a elegir el formato adecuado.

JPG:
Esta extensión es la más común para imágenes y fotografías, todas las cámaras de fotos no profesionales utilizan este formato para generar las imágenes (el formato RAW se utiliza profesionalmente). Además permite un alto nivel de compresión, eso sí, con pérdida de calidad. Cada vez que un archivo JPG se abre y vuelve a guardarse se produce una pérdida de calidad irrecuperable.

Es el formato más extendido para las imágenes web ya que su alta capacidad de compresión permite una buena optimización de las imágenes, necesaria para Internet. Si queremos que nuestra página cargue rápidamente, lo que mejora también el SEO, es muy importante no utilizar imágenes de gran peso. Para ello la compresión que ofrece JPG es muy útil ya que elimina información de la imagen imperceptible para el ojo cuando la visualice en una pantalla.

La compresión también tiene un límite dependiendo del contenido de la imagen, colores, texturas, filtros… será más difícil optimizarla sin llegar a perder un mínimo de calidad necesaria. Hay que optimizar mientras la imagen siga viéndose bien y profesional.

La normalización de este formato ha hecho que sea un estándar en Internet, por lo que todos los navegadores y sistemas operativos lo leen y la mayoría de los editores de imágenes permiten leerlo, manipularlo y exportarlo de nuevo.

JPG es un formato mapa de bits, lo que significa que está compuesto por pixeles, a diferencia de las imágenes vectoriales, esto hace que no sea muy conveniente para la impresión de grandes formatos y es el origen de lo que se conoce como una foto pixelada.

Este formato también permite diferentes perfiles de color y alberga 3 canales de 8 bits (rojo, verde y azul), a su vez cada canal tiene 256 tonos de color, con lo que obtenemos al multiplicarlo una gama de colores de 16.777.216 por pixel. Aunque teóricamente esto es así todavía no existen pantallas capaces de reproducir esta cantidad de tonos, ni nuestro ojo es capaz de percibirlos.

No admite pixeles transparentes o semitransparentes, el formato los completa con algún color sólido.

PNG:
La extensión PNG ha conseguido ser uno de los formatos más utilizados gracias a su capacidad para reproducir píxeles transparentes (transparencia con canal alfa). Si necesitas subir a tu web una foto sin fondo o con alguna zona transparente éste será el formato adecuado.

Aunque es bitmap, tiene un sistema de compresión casi sin pérdidas. Programas como Photoshop permiten elegir cuando se guarda el documento la opción sin comprensión o compresión muy baja (compresión menor). Además, el programa da la opción de entrelazar o no la imagen, si el usuario elige “entrelazado ninguno” la imagen se mostrará en el navegador sólo cuando se haya completado la descarga, en el caso de marcar la opción “entrelazado”, la imagen aparecerá en una versión de baja resolución mientras se carga la página, por tanto el tiempo de descarga de la imagen será menor pero aumenta el tamaño de archivo.

Un perjuicio que tienen estos archivos en comparación con los JPG, es que suelen ser más pesados aunque se trate de la misma imagen, una característica muy importante a la hora de optimizar las imágenes para la web. En cambio los PNG tienen una buena profundidad de color y reproducen fielmente los brillos y sombras de las imágenes, además está recomendado por el W3C.

Otro problema asociado a este formato es la incapacidad de algunos navegadores antiguos para visualizarlo.

GIF:
Es un formato de más baja calidad fotográfica, sólo contiene 256 colores, por lo que las imágenes no tienen una gran profundidad de color, será útil sobre todo para imágenes de colores planos.

La característica más importante de este formato es quizás su capacidad de crear animaciones, permite unir diferentes frames y crear así la sensación de movimiento.

Su baja calidad posibilita que sean archivos de poco peso, lo que los convierte en imágenes perfectas para la web y les permite reproducirse sin problemas. También pueden tener transparencia, a diferencia del canal alfa del PNG, este formato dispone de transparencia binaria simple, es decir un color de su paleta se marca como el color transparente.

Si utilizamos Photoshop, podremos optimizar la imagen utilizando la opción “Guardar para la Web”. En primer lugar podremos señalar la opción “entrelazado” igual que con los PNG y seremos capaces de decidir el algoritmo de reducción de color, las opciones son:

Perceptual: prioriza los colores para los que el ojo humano es más sensible
Selectiva: favorece amplias zonas de color y conserva los colores Web. Produce imágenes con la máxima integridad del color, es la opción por defecto y válida para la Web.
Adaptable: personaliza los colores en función del espectro dominante de la imagen.
Restrictiva (Web): es compatible con la Web, tanto para Windows como para Mac Os, la opción garantiza que no se aplique ningún tramado del navegador a los colores.

Si la imagen tiene transparencias, es importante marcar la casilla para que se respete esta opción.

Estos tres formatos son válidos para subir imágenes a la Web, dependiendo de tu propósito deberás elegir mejor uno u otro, ahora te toca a ti decidir.