Las imágenes no solo pueden hacer que su contenido digital sea más atractivo y memorable, sino que también lo hacen más fácil de compartir. En un análisis de más de un millón de artículos, BuzzSumo descubrió que los artículos con una imagen una vez cada 75-100 palabras se compartían el doble de veces en las redes sociales que los artículos con menos imágenes.
Por lo tanto, es importante comprender cómo funcionan el elemento de imagen y el atributo fuente en HTML. Puede ser útil cuando se crea un sitio desde cero, se personaliza una plantilla prediseñada o se modifica el código fuente de un sitio web en un CMS.
Echemos un vistazo más de cerca a este par a continuación.
Img origen HTML
Aunque un elemento de imagen HTML se usa para incrustar una imagen en un documento HTML, técnicamente no inserta la imagen en una página web. De hecho, el elemento de imagen técnicamente no hace nada por sí mismo. Simplemente crea espacio para referencia a la imagen.
Esta referencia está en el atributo de origen. El atributo de origen contiene la ruta o URL del archivo de imagen. Esto explica por qué las imágenes están técnicamente vinculadas, en lugar de incrustadas, en las páginas web.
Eche un vistazo al ejemplo a continuación.
ver la pluma Elementos de imagen con y sin el atributo src de Christina Perricone (@hubspot) en CódigoPen.
En este ejemplo, puede ver en el HTML que el primer elemento de imagen tiene un atributo de origen que contiene un enlace a Pixabay. El segundo elemento de imagen no tiene un atributo de origen.
Las propiedades de ancho y alto se especifican en el CSS. Esto se considera una buena práctica porque si no especifica el ancho y el alto, la página puede parpadear mientras se carga la imagen.
La primera imagen de 300 por 200 píxeles aparece en el cuadro de mando. Sin embargo, la segunda imagen se representa como un cuadro en blanco con un contorno de 300 x 200 píxeles. Esto se debe a que el navegador no sabía qué imagen representar sin el atributo de origen.
Echemos un vistazo más de cerca a la sintaxis del elemento de imagen y el atributo de origen a continuación.
Sintaxis de imagen HTML
La sintaxis para el elemento de imagen es:
<img src="" alt="">
El elemento img se conoce como «elemento vacío» porque comienza con una etiqueta pero sin etiqueta de cierre. Sin embargo, como puede ver en el código anterior, la etiqueta img no está realmente vacía.
Dividamos la sintaxis de img en dos componentes principales: el atributo fuente y el atributo alt.
El atributo de origen es obligatorio porque contiene la URL o la ruta del archivo de imagen. Esto se pondrá entre comillas simples. Sin el atributo de origen definido, el navegador no podrá encontrar ni representar la imagen.
El atributo alt proporciona información descriptiva sobre la imagen. Si bien no es obligatorio como el atributo fuente, se recomienda encarecidamente el atributo alt debido a su importancia tanto para los navegadores como para los lectores.
Los navegadores que no pueden mostrar imágenes incrustadas ignoran el elemento a menos que contenga un atributo alt. Este atributo también es importante para los lectores con discapacidad visual que usan lectores de pantalla y para todos los lectores si la imagen no se carga. En ambos casos, los lectores aún podrán averiguar qué se suponía que transmitía la imagen a partir del atributo alt.
Además de mejorar la accesibilidad y la experiencia general del usuario de los visitantes de su sitio, agregar un texto alternativo de imagen puede mejorar el SEO de su sitio.
Puede obtener más información sobre el significado del texto alternativo de la imagen leyendo Texto alternativo de la imagen: qué es, cómo escribirlo y por qué es importante para el SEO.
Cambiar fuente de imagen
Si desea reemplazar una imagen en su sitio, simplemente puede cambiar la ruta del archivo de imagen o la URL en su atributo de origen. Puede cambiar este atributo en cualquier momento.
Tenga en cuenta que la nueva imagen hereda los atributos de alto y ancho de la imagen original. Entonces, si desea que la nueva imagen tenga un tamaño diferente, debe especificar nuevas propiedades de alto y ancho.
Img src no funciona
Puede tener algunos problemas al usar el elemento de imagen y el atributo de origen. Suponga que agrega una imagen a un archivo HTML y ve un icono de enlace roto y un texto alternativo (que se muestra a continuación) en lugar de la imagen.
Tenga en cuenta que las imágenes no están realmente incrustadas en las páginas web. Esto significa que cuando se carga la página web, el navegador debe descargar la imagen del servidor web y mostrarla en la página. Un icono de enlace roto significa que el navegador no pudo encontrar la imagen.
Si acaba de agregar una imagen, verifique que la URL de la imagen correcta esté en el atributo de origen. Las faltas de ortografía, las letras faltantes o los signos de puntuación podrían dañar el icono del enlace. En el siguiente ejemplo, omití el apóstrofo de cierre para el atributo src, lo que da como resultado un ícono de enlace roto en la interfaz.
ver la pluma Fuente de imagen de Christina Perricone (@hubspot) en CódigoPen.
Si anteriormente agregó una imagen a su sitio y recientemente notó que muestra un ícono de enlace roto, la URL especificada en el atributo de origen ya no es válida. Es posible que la imagen se haya eliminado de la página web citada o se haya movido a una carpeta diferente en el sitio y la ruta del archivo ya no sea correcta. Para solucionar el problema, debe encontrar la URL de la nueva imagen o reemplazarla.
Atributo requerido del elemento HTML Img
El atributo img src es un concepto básico de codificación. Cada elemento de imagen requiere un atributo de origen válido para que el navegador localice y muestre la imagen correcta. Ahora que comprende el concepto, ya está en camino de aprender HTML y CSS.
