Mire cualquier página web en línea hoy y notará que comparten ciertas cosas en común. Uno de esos rasgos compartidos es la imagen. Las imágenes correctas agregan mucho a la presentación de un sitio web. Algunas de esas imágenes, como el logotipo de una compañía, ayudan a marcar el sitio y a conectar esa entidad digital a su compañía física.
Para agregar una imagen, ícono o gráficos a su página web, debe usar la etiqueta en el código HTML de una página. Coloca el IMG etiqueta en su HTML exactamente donde desea que se muestre el gráfico. El navegador web que está mostrando el código de la página reemplazará esta etiqueta con el gráfico apropiado una vez que se vea la página. Volviendo al ejemplo del logotipo de nuestra empresa, a continuación le indicamos cómo puede agregar esa imagen a su sitio:
Atributos de la imagen
Al observar el código HTML anterior, verá que el elemento incluye dos atributos. Cada uno de ellos es requerido para la imagen.
El primer atributo es el "src". Esto 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 web mostraría cuando representara el sitio.
También notará que antes de este nombre de archivo, agregamos información adicional, "/ images /". Esta es la ruta del archivo. La barra diagonal inicial indica al servidor que examine la raíz del directorio. Luego buscará una carpeta llamada "imágenes" y finalmente el archivo llamado "logo.png". El uso de una carpeta llamada "imágenes" para almacenar todos los gráficos de un sitio es una práctica bastante común, pero la ruta del archivo se cambiará a lo que sea relevante para su sitio.
El segundo atributo requerido es el texto "alt". Este es el "texto alternativo" que se muestra si la imagen no se carga por algún motivo. Este texto, que en nuestro ejemplo dice "Logotipo de la compañía" se mostrará si la imagen no se carga. ¿Por qué sucedería eso? Una variedad de razones:
- Ruta de archivo incorrecta
- Nombre de archivo incorrecto o falta de ortografía
- Error de transmisión
- El archivo fue eliminado del servidor
Estas son solo algunas de las posibilidades por las que puede faltar nuestra imagen especificada. En estos casos, nuestro texto alternativo se mostraría en su lugar.
El software de lectura de pantalla también utiliza el texto alternativo para "leer" la imagen a un visitante con discapacidad visual. Dado que 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 qué debe indicar claramente cuál es la imagen!
Un malentendido común del texto alternativo es que está destinado a los propósitos del motor de búsqueda. Esto no es verdad. Mientras Google y otros motores de búsqueda leen este texto para determinar qué es la imagen (recuerde, ellos tampoco pueden "ver" su imagen), no debe escribir texto alternativo para apelar únicamente a los motores de búsqueda. Autor claro texto alt que está destinado para los humanos. Si también puede agregar algunas palabras clave a la etiqueta que atraiga a los motores de búsqueda, está bien, pero siempre asegúrese de que el texto alternativo cumple su propósito principal al indicar cuál es la imagen para cualquier persona que no pueda ver el archivo de gráficos.
Otros atributos
los IMG La etiqueta también tiene otros dos atributos que puede ver en uso cuando coloca un gráfico en su página web: el ancho y la altura. Por ejemplo, si usa un editor WYSIWYG como Dreamweaver, automáticamente agrega esta información para usted. Aquí hay un ejemplo:
los ANCHURA y ALTURA Los atributos le dicen al navegador el tamaño de la imagen. El navegador sabe exactamente cuánto espacio en el diseño para asignar, y puede pasar al siguiente elemento de la página mientras se descarga la imagen. El problema con el uso de esta información en su HTML es que es posible que no siempre desee que su imagen se muestre en ese tamaño exacto. Por ejemplo, si tiene un sitio web sensible cuyo tamaño cambia según la pantalla de los visitantes y el tamaño del dispositivo, también querrá que sus imágenes sean flexibles. Si declara en su HTML cuál es el tamaño fijo, le resultará muy difícil anular las consultas de medios de CSS con capacidad de respuesta. Por este motivo, y para mantener una separación de estilo (CSS) y estructura (HTML), se recomienda que NO agregue 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 predeterminado, nativo de todos modos.
Editado por Jeremy Girard
