Adición de imágenes a páginas web utilizando HTML

Adición de imágenes a páginas web utilizando HTML

Adición de imágenes a páginas web utilizando HTML

VALORACIÓN DEL ARTÍCULO:
5/5


Mira cualquier página web en línea hoy y notarás que comparten ciertas cosas en común. Uno de esos rasgos compartidos son las imágenes. Las imágenes correctas añaden mucho a la presentación de un sitio web. Algunas de esas imágenes, como el logotipo de una empresa, ayudan a marcar el sitio y a conectar esa entidad digital con su empresa física.

Para añadir una imagen, icono o gráfico a su página web, necesita utilizar la etiqueta en el código HTML de una página. La etiqueta IMG se coloca en el HTML exactamente donde se desea que se visualice el gráfico. El navegador web que está renderizando el código de la página reemplazará esta etiqueta con el gráfico apropiado una vez que la página sea vista. Volviendo al ejemplo del logotipo de nuestra compañía, aquí está la forma en que usted podría agregar esa imagen a su sitio:

Atributos de imagen

Mirando el código HTML de arriba, verá que el elemento incluye dos atributos. Cada uno de ellos es necesario para la imagen.

El primer atributo es el «src». Este es literalmente el archivo de imagen que desea que se muestre en la página. En nuestro ejemplo estamos usando un archivo llamado «logo.png». Este es el gráfico que el navegador mostrará cuando renderice el sitio.

También notará que antes de este nombre de archivo, hemos añadido información adicional, «/images/». Esta es la ruta del archivo. La barra oblicua inicial le dice al servidor que busque en la raíz del directorio. Luego buscará una carpeta llamada «images» y finalmente el archivo llamado «logo.png». Usar una carpeta llamada «images» para almacenar todos los gráficos de un sitio es una práctica bastante común, pero la ruta de su archivo cambiaría a lo que sea relevante para su sitio.

El segundo atributo obligatorio es el texto «alt». Este es el «texto alternativo» que se muestra si la imagen no se carga por alguna razón. Este texto, que en nuestro ejemplo dice «Logotipo de la empresa», se mostrará si la imagen no se carga. ¿Por qué pasaría eso? Una variedad de razones:

  • Ruta de archivo incorrecta
  • Nombre de archivo incorrecto o error ortográfico
  • Error de transmisión
  • El archivo se eliminó del servidor

Estas son sólo algunas de las razones por las que nuestra imagen especificada puede estar ausente. En estos casos, nuestro texto alternativo se mostraría en su lugar.

El texto alternativo también es utilizado por el software de lectura de pantalla para «leer» la imagen a un visitante con problemas de visión. Como no pueden ver la imagen como nosotros, este texto les permite saber qué es la imagen en sí. Esta es la razón por la que se requiere texto alternativo y por la que debe indicar claramente lo que es la imagen!

Un malentendido común del texto alternativo es que está destinado a los motores de búsqueda. Esto no es cierto. Mientras que Google y otros motores de búsqueda leen este texto para determinar qué es la imagen (recuerde, ellos tampoco pueden «ver» su imagen), usted no debe escribir texto alternativo para atraer únicamente a los motores de búsqueda. Autor de texto alternativo claro que está destinado a los seres humanos. Si también puede agregar algunas palabras clave en la etiqueta que atraen a los motores de búsqueda, eso está bien, pero siempre asegúrese de que el texto alternativo está cumpliendo su propósito principal, indicando cuál es la imagen para cualquiera que no pueda ver el archivo de gráficos.

Otros atributos

El tag IMG también tiene otros dos atributos que puede ver en uso cuando pone un gráfico en su página web: el ancho y el alto. Por ejemplo, si utiliza un editor WYSIWYG como Dreamweaver, automáticamente agrega esta información por usted. Aquí hay un ejemplo:

Los atributos WIDTH y HEIGHT indican al navegador el tamaño de la imagen. El navegador sabe entonces exactamente cuánto espacio en el diseño para asignar, y puede pasar al siguiente elemento de la página mientras la imagen se descarga. El problema con el uso de esta información en su HTML es que no siempre querrá que su imagen se muestre en ese tamaño exacto. Por ejemplo, si tiene un sitio web con capacidad de respuesta cuyo tamaño cambia en función del tamaño de la pantalla del visitante y del dispositivo, también querrá que sus imágenes sean flexibles. Si indica en su HTML cuál es el tamaño fijo, le resultará muy difícil invalidar con consultas de medios CSS con capacidad de respuesta. Por esta razón, y para mantener una separación de estilo (CSS) y estructura (HTML), se recomienda que NO añada atributos de ancho y alto a su código HTML.

Una nota: Si deja estas instrucciones de tamaño desactivadas y no especifica un tamaño en CSS, el navegador mostrará la imagen en su tamaño original predeterminado.

Editado por Jeremy Girard

TAMBIÉN TE INTERESA

agente-de-smart-working

Así actúan los agentes de smart working, los facilitadores del trabajo híbrido

Cuando las empresas se plantean su tránsito hacia el teletrabajo o el trabajo híbrido, suelen tener una serie de problemas. Como facilitadores de la nueva realidad, los agentes de Smart working se están empezando a erigir como una figura clave en las nuevas formas de trabajar. Hablamos de especialistas que promueven esta cultura, cuyas responsabilidades

redes sociales

Nuevas redes sociales que quieren cambiar el establishment

El ecosistema de las redes sociales está cambiando poco a poco y las reinas del sector pueden ver alterado su estatus quo. Quizás porque la gente esté necesitada de cosas nuevas o porque simplemente la tecnología está abocada a reinventarse continuamente. El caso es que el reinado de Instagram puede empezar a ver el fin

Planner-Trip2Balance

Trip2Balance, la app que presume de crear la Nutrición 2.0

Hoy venimos a hablar de la app Trip2Balance, una de las muchas apps que pronto podremos encontrar en Apple Store y Google Play Store para el cuidado de nuestra salud. En realidad, la aplicación es capaz de cuidarnos desde nuestra alimentación y con pautas para nuestros entrenamientos personales. Hasta aquí, podría decirse que es una

que-es-la-kings-league

¿Qué es la Kings League y por qué está rompiendo moldes?

El mundo de Twitch y las redes sociales han acaparado un evento viral en este inicio de año. Se trata de la ya famosa Kings League que organiza la empresa Kosmos, liderada por el ex futbolista del FC Barcelona, Gerard Piqué.   ¿Qué es la Kings League?   La Kings League es una liga de

riesgos-metaverso

10 riesgos que entraña el metaverso

El metaverso es ya uno de los grandes paradigmas de la convergencia tecnológica, un nuevo mundo donde se integran distintas tecnologías para ofrecer una experiencia completa al usuario. Aún estamos en las primeras fases de su desarrollo, pero ya vemos como las principales compañías tecnológicas están realizando fuertes inversiones en este ámbito. Meta (Facebook), Microsoft,