Tratamiento de imágenes para la web

Actualizado el 12/07/2007 < > 15 Cometarios

Resúmen: Edición y uso de los distintos tipos de imágenes en la web, así como su optimización para que ocupen lo menos posible.

Meneame Bitacoras

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:

imagen con marco imagen sin marco

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.

rotar rotar 2 rotar 3 rotar 4 rotar 5

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:

imagen original

Filtros aplicados:

filtro 1 filtro 2 filtro 3

filtro 4 filtro 5 filtro 6

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.

Meneame Bitacoras

Publicado el 12/07/2007, última actualización 12/07/2007.

Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos):

Autor: Verónica M.

URL: Tratamiento de imágenes para la web

Añadir Comentario (Subir al texto)

15 Cometarios

  1. Como añadir imágenes a una página web :: LaWebera.es

    [...] con enlaces: uno de los mayores usos que se le dan a las imágenes en la web es el de vinculr archivos, utilizarlas como enlaces. [...]

    Viernes, 7 de diciembre 2007

  2. CSS: buenas prácticas :: LaWebera.es

    [...] imágenes web que incluímos en las hojas de estilo por medio de background-image o list-style-image son [...]

    Miércoles, 12 de diciembre 2007

  3. El empleo de imágenes en un sitio web :: LaWebera.es

    [...] empleo de imágenes en un sitio web, es muy importante, ya que acrecientan el impacto visual, atrayendo el interés de nuestro [...]

    Jueves, 29 de mayo 2008

  4. Fundamentos de diseño de Sitios Web :: LaWebera.es

    [...] este tema es fundamental el tratamiento de las imágenes, es decir, muchas veces se pueden acondicionar las mismas para que bajen sustancialmente de peso, [...]

    Miércoles, 22 de abril 2009

  5. Elección de una buena paleta de colores para tu web

    [...] que el usuario lo primero que percibirá serán los colores antes que la tipografía, botones o imágenes que estén en nuestra página, por eso debemos ser especialmente cuidadosos con la elección de la [...]

    Miércoles, 4 de noviembre 2009

  6. Utilizar un loading o imagen de carga con CSS

    [...] manera muy simple de indicar que una imagen o cualquier otro elemento aun no se cargó es colocar en su lugar una imagen de fondo animada que [...]

    Miércoles, 18 de noviembre 2009

  7. Como buscar la combinación de colores perfecta para tu web

    [...] más relacionadas, para luego extraer los 6 colores más prominentes de cada imagen; y finalmente, encontrar una relación entre los colores a fin de proporcionar un esquemade [...]

    Lunes, 7 de diciembre 2009

  8. Menú rollover con CSS y una sola imagen

    [...] importante de la creación de este archivo es la delimitada alineación de las imágenes web y el margen de unas con otras, debemos tomar nota de sus posiciones y tamaños, esto es muy [...]

    Lunes, 14 de diciembre 2009

  9. Breve guía para iniciarse en el diseño web

    [...] un servidor, contratar un dominio, pagar y cobrar por medios electrónicos, emplear editores HTML, editar imágenes, usar editores WYSIWIG y una larga lista de etcéteras. Pero a no desanimarse! Muchas de estas [...]

    Domingo, 3 de enero 2010

  10. Énfasis en el diseño web

    [...] como tamaño, color, tipografía, posición o una combinación de ellos. En cuanto a las imágenes, al igual que con el texto, basta con variar algunos de los atributos de las mismas, como tono, [...]

    Lunes, 4 de enero 2010

  11. El principio de la proximidad en el diseño web

    [...] se encuentra el logotipo y una breve presentación. En el centro y a la izquierda, una serie de imágenes que muestran los últimos trabajos realizados, agrupados en una misma zona de la página con [...]

    Lunes, 11 de enero 2010

  12. Tipografía aplicada al diseño web

    [...] al usuario de internet, para lo que debe emplear elementos adecuados para lograr este objetivo. Las imágenes y el texto son los elementos más empleados para la mencionada transmisión de ideas, aunque con la [...]

    Lunes, 18 de enero 2010

  13. CSS Sprites para efecto rollover en botones e imagenes

    [...] el tamaño de la imagen, para colocar 3 imágenes más (4 unidades) de las mismas dimensiones (arriba-derecha, abajo-izquierda y [...]

    Martes, 26 de enero 2010

  14. Crear la página web. Consejos

    [...] web soporta multitud de formatos, desde imágenes animadas, hasta sonidos, presentanciones en flash, videos… Todos estos recursos deben usarse [...]

    Lunes, 1 de febrero 2010

  15. 7 Consejos para diseñar tu web de forma eficaz

    [...] el uso de imágenes: las imágenes añaden un poderoso impacto a cualquier diseño web, pero hay que saber jugar bien con ellas y no [...]

    Martes, 9 de febrero 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios