miércoles, agosto 17, 2022

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 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

    Redes Sociales

    2,736FansMe gusta
    326SeguidoresSeguir

    Popular esta semana

    Flutter – Error: ADB exited with exit code 1

    En este artículo vamos a explorar algunas posibles causas y solución al error en Flutter Error: ADB exited with exit code 1....
    SQL Server - Merge

    MERGE en SQL Server para Insert, Delete y Update con dos tablas

    Ejemplo práctico usando MERGE para sincronizar dos tablas, Insert, Update y Delete en un solo query. Válido para SQL SERVER 2008 o superior.

    DELETE con subconsulta o INNER JOIN

    En el siguiente ejemplo se explica la forma en que se pueden eliminar registros en nuestras tablas con instrucciones DELETE más complejas que las...

    Últimos artículos

    Flutter - Instagram Clone App

    Instagram Clone App con Flutter

    Marvin Stanley Valenzuela nos comparte un reto y genialidad a la vez, excelente práctica de la que podemos aprender mucho, diseñó en...

    ¿Cómo agregar una IP adicional en una VM Ubuntu en Azure?

    Lo más común al momento de crear y configurar un nuevo servidor es que a este le asigne un solo IP, pero...
    flutter one year

    Después de un año con Flutter, esto es lo que aprendí

    La historia comenzó cuando un día desperté pensando en tener un nuevo proyecto personal. Me dije a mí misma que hay muchas...
    promocionar app

    Cómo promocionar gratis tu app usando tappx

    Como todos los que me siguen y mis redes sociales sabrán, recientemente lancé mi primera aplicación, pero más allá del desafío tecnológico de...