domingo, noviembre 24, 2024

El empleo de imágenes en un sitio web

El empleo de imágenes en un sitio web, es muy importante, ya que acrecientan el impacto visual, atrayendo el interés de nuestro visitante. Pero también podemos cansarlo, si usamos imágenes de gran peso, que harán que la página que queremos ver se cargue lentamente.

Piense bien, si realmente se justifica el uso de una imagen en una de sus páginas. Recuerde que lo más importante es, que quien visite su sitio tiene que encontrar en él información que le sea útil y no una colección de imágenes que no les sirve de nada.

La mayoría de las veces, la espera altera al navegante, quien decide irse a otro sitio. Por tal motivo, nuestras imágenes no deben tardar en cargarse. Para ello le recomendamos usar las extensiones .jpg (Joint Photographic Group) o .gif (Graphics Interchange Format), ambos son de características muy similares, la elección de su uso dependerá del tipo de trabajo que queramos hacer.
Las extensiones .jpg y .gif, son los tres formatos que normalmente se usan para las páginas web.

El formato .JPG (Podemos encontrar archivos con extensión JPEG o JPG indistintamente: se trata del mismo tipo) reconoce 16,7 millones de colores, por tal motivo es recomendado para cuando queremos que la imagen utilizada tenga calidad fotográfica o para hacer degradé de colores. Resultan útiles porque podemos controlar la compresión del archivo cambiando la calidad de la imagen. Cuanto más reducido sea su tamaño, estaremos perdiendo mayor información sobre su definición, como resultado, disminuirá su calidad.

El formato .GIF, sólo contiene información sobre los colores de la imagen que estamos usando; trabaja solamente con 256 colores y las imágenes guardadas en este formato no pierden calidad, aunque se comprima el archivo.

Se recomienda su uso para dibujos de líneas en blanco y negro, imágenes prediseñadas en color e imágenes que utilicen grandes bloques de colores sólidos. Un color, generalmente el fondo, podemos convertirlo en transparente, logrando que la imagen se integre al fondo de la página.
Además, con esta extensión podemos crear Gif animados presentando de forma consecutiva varios archivos GIF, tal como si estuviéramos realizando una película de dibujos animados. No use para crear un GIF animado varios frames (marcos), ya que esto hace más lento el ingreso al sitio.

Después de haber leído esta breve explicación de cada formato, la decisión sobre cuál usar dependerá sólo de usted.

Consejos útiles:

  • Debemos saber que hay gente que navega por Internet con una resolución de 256 colores (8 bits) con el fin de ahorrar recursos del sistema, con lo que nuestras maravillosas imágenes de millones de colores (jpeg) pueden quedar bastante desvirtuadas si no lo hemos avisado previamente.
  • Utilice la extensión .GIF para crear iconos, logos, banners, etc.; es decir, en todas las imágenes que no contengan muchos colores (hasta 256).
  • Para el formato .GIF puede especificar el uso de un color transparente.
  • El formato .GIF y .PNG permiten entrelazar la imagen (es decir, ésta aparecerá con mayor detalle a medida que el navegador la descargue).
  • Para el formato .JPEG, puede especificar el número de barridos progresivos (se refiere al número de barridos que realiza un explorador de Web para resolver una imagen a medida que la descarga).
  • Cuando queremos mostrar desde nuestra web imágenes de gran tamaño, usted puede permitirle al visitante que él decida si quiere verla o no.
  • ¿Cómo hacemos esto?
    Cree las gráficas que quiere mostrar, en miniaturas (thumbnail).
    Enlace cada una con la imagen al tamaño deseado.

    Tenga en cuenta que a las miniaturas las usamos para mostrar todas las gráficas, permitiendo ahorrar tiempo en la carga de la página y dándole la posibilidad al visitante que elija la imagen de su interés, simplemente haciendo clic sobre la versión minimizada de ésta.

    Es conveniente colocar al lado de la miniatura, el peso real de la imagen (entre paréntesis); para que quien necesite bajarse una sepa cuánto pesa.

    Utilice esta opción de diagramación de las gráficas, para cuando el número de imágenes es numeroso; por ejemplo catálogos, postales digitales, etc…

    Este artículo ha sido enviado por CSSBoulevar, sitio web de diseño.

    Roy Rojas
    Roy Rojashttp://www.dotnetcr.com
    Con más de 20 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español. royrojas.com | dotnetcr.com | GitHub
    Roy Rojas
    Roy Rojashttp://www.dotnetcr.com
    Con más de 20 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español. royrojas.com | dotnetcr.com | GitHub