Guía para diseñadores gráficos

Guía para diseñadores gráficos > Presentación de los contenidos > Imágenes

Presentación de los contenidos

Imágenes

Formatos

Los formatos de imágenes que cualquier navegador web puede presentar son: .gif, .jpg y .png:

GIF: Es un formato que conserva cada pixel de la imagen original, muy eficiente para gráficos sencillos con pocos colores. Permite entrelazar la imagen, es decir, presentarla con mayor detalle a medida que el navegador la descargue. Permite crear animaciones y transparencias del 100%.
PNG: Es un formato similar al GIF pero no permite crear animaciones. En cambio permite degradados de transparencias.
JPG: Comprime mucho más las imágenes que los anteriores formatos. Excelente para trabajar con fotografías de muchos colores y texturas, porqué mantiene la calidad percibida con pesos de imagen mucho más bajos. No permite transparencias ni animaciones.

Teniendo en cuenta los formatos admitidos, las imágenes no pueden ser vectoriales ni contener capas. Solo se trabaja con píxeles.

 

Guardar imágenes para web

Actualmente, la mayoría de programas de tratamiento de imágenes tienen la opción "guardar para web". Estas opciones permiten definir transparencias, tamaño y disminuir la calidad de la imagen y sus colores.

Idealmente se tienen que guardar al tamaño que se va a presentar en la página web, o no ser que vayamos a permitir que la imagen se presente más grande en navegadores con más resolución. Es importante recordar que, con las conexiones de internet actuales, podemos calcular muy orientativamente que por cada incremento de peso de 500Kb a 1Mb, una página tarda un segundo más a descargarse y abrirse. Para evitar pesos muy elevados de páginas con muchas imágenes, puede ser positivo trabajar con imágenes pequeñas que se ampliaran cuando el usuario las seleccione o clique.

Si una imagen contiene texto, antes de guardarla es mejor ponerle el efecto anti-aliasing, un ligero desenfoque en los bordes curvos que hará más suaves las transiciones entre los colores.

 

Texto alternativo de las imágenes

Para que el web esté bien posicionado en los buscadores, es importante pasar las imágenes al maquetador juntó con el texto alternativo que las define. Los buscadores toman este texto alternativo como la descripción o contenido de la imagen.

Buen artículo que explica cómo definir el texto alternativo en las imágenes:
http://www.circulodemaquetadores.com/como-usar-el-texto-alternativo-alt

 

Dónde encontrar imágenes

Actualmente no es necesario arriesgarse a tomar imágenes "robadas" de Internet, porqué existen muchas imágenes con Royalty free o se pueden comprar imágenes a precios muy económicos.

Donde obtener imágenes en Internet: http://www.istockphoto.com, http://www.corbis.com,
http://www.gettyimages.com, http://www.jupiterimages.com

 

Imágenes >>
JAVAJAN [somos maquetadores y programadores web]. Webs for designers & you. www.javajan.com © 2012 | Avís legal
TwitterFacebookRSSe-mail