Las imágenes son una parte importante de la web. De hecho, la mayoría de las páginas web distribuyen su espacio entre texto e imágenes.

Éstas añaden una nota de color a los sitios y si se usan correctamente, ayudan al usuario a entender de lo que se está hablando.

Tipos de imágenes

Los formatos de imágenes web más usados son .gif, .jpg y .png:

• GIF: es un formato de archivo sin pérdida, es decir, se conserva cada pixel de la imágen original, lo que implica que el tamaño suele ser mayor que en formatos .JPG. No obstante, para gráficos sencillos con pocos colores es muy eficiente. Sin duda su mayor ventaja frente a los otros formatos es que permite crear animaciones
• JPG: comprime mucho más las imágenes que los formatos .GIF, por lo que los archivos pesan menos. Es excelente para trabajar con fotografías de muchos colores y texturas, mantiene la calidad con pesos de imagen realmente bajos. Como inconveniente pierde algo de información y puede afectar a su calidad, pero en la mayoría de los casos no es apreciable a simple vista. No permite crear imágenes animadas.
• PNG: este formato surgió como alternativa al .GIF debido a algunos problemas legales que empezaron a surgir de su uso. Es, por tanto, muy similar a éste, salvo que no permite crear animaciones.

Herramientas de edición de imágenes

Ya se comentó brevemente en este manual (hacer una web) un poco acerca de los editores de imágenes. Si haces páginas webs deberías tener en tu ordenador un programa de este tipo para poder editar las imágenes a tu gusto.

Algunos programas muy buenos son Gimp (gratuito) o Photoshop (de pago, aunque existe versión de prueba), lo mejor es que pruebes tu mismo el que más te gusta.

Edición de imágenes

Para crear tu web, necesitarás algún programa de edición de imágenes que te permita modificarlas, cambiar el tamaño, añadirles notas de texto, cambiar el formato y sobre todo optimizarlas para la web.

Puede parecer algo complementario, pero conforme vayas creando tu web te darás cuenta de que necesitas un programa que te permita editar tus imágenes, ya sea de forma sencilla, como por ejemplo recortando o ampliando su tamaño, o con métodos más sofisticados como los filtros de imagen.

Algunas de las cosas más básicas que se pueden hacer con estos editores de imágenes y que nos sirven de ejemplo, son:

Recortar una imagen

Esto es muy útil para eliminar de la imagen partes que no queremos. Por ejemplo, puede venirte muy bien la foto de un paisaje como este, pero no querer incluir el marco amarillo:

Redimensionar la imagen

A menudo una imagen es más grande o más pequeña de lo que necesitamos, y aunque puede establecerse su tamaño exacto mediante los atributos width y height, no es la forma adecuada de cambiar su tamaño, ya que en realidad no lo estamos modificando, lo que estamos cambiando es su forma de verse en el navegador (el archivo sigue teniendo el mismo tamaño). La mejor opción es utilizar un programa de dibujo como el Photoshop que cambie el tamaño real de la imagen.

Rotar una imagen

En ocasiones es útil cambiar la orientación de una imagen, pra esto se puede usar cualquier editor gráfico. Puede rotarse de forma vertical u horizontal en varios angulos, en la mayoría de los programas buenos te permite rotar la imagen un número determinado de grados.

Filtros de imagen

Los filtros pueden llegar a transformar una imagen por completo dándole efectos increíbles. Con ellos, podrás dar a tus imágenes un aire diferente. Lo mejor para comprenderlo es ver algunos ejemplos, éstos en concreto han sido hecho con Photoshop:

Imagen original:

Filtros aplicados:

Optimizar las imágenes

Con optimizar imágenes me refiero a conseguir que ocupen lo menos posible y conserven una buena calidad de imagen. Si las imágenes son muy pesadas (si su tamaño es muy grande), las páginas web tardan mucho en cargar y hacemos esperar a los usuarios, lo que no conviene en ningún caso. Cuanto menos ocupen más rápido cargará tu página y menos harás esperar a tus visitantes.

Algunas direcciones útiles para optimizar imágenes online son Virtualzone, o SiteReportCard.