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
