Comprender cómo funciona el HTML puede ser muy sencillo si empiezas por lo básico y sigues una guía como esta, con la que ver con ejemplos prácticos los elementos esenciales de este lenguaje web. Las imágenes forman parte de cualquier contenido de internet hoy en día, pero hubo un tiempo en el que las webs solo tenían texto. De hecho, la primera imagen que se publicó en internet, explica la BBC 1, data del año 1989, provocando el inicio de lo que sería una revolución para la red.
En esta revolución tiene mucho que ver <img>, el elemento base para insertar imágenes en HTML, que luego podemos completar con una serie de atributos como las medidas, el pie de foto, una descripción, etc. A lo largo de este artículo vamos a explicar detalladamente cómo insertar imágenes simples, y algunos de los atributos más importantes como alt. O ya para un cierto nivel, cuándo optar por imágenes de fondo con CSS. No te preocupes, lo vamos a ver todo paso a paso.
¿Cómo insertar una imagen en HTML?
Para insertar una imagen en HTML utilizaremos la etiqueta <image>, del mismo modo que para insertar una tabla se utiliza la etiqueta <table>. Aunque en este caso existen algunas peculiaridades:
- <img> es un elemento vacío: esto quiere decir que no tiene etiqueta de cierre (como sí sucedería con <table>.
- Va acompañado de un atributo principal: src (source), que apunta a la ubicación de la imagen.
✅ Ejemplo básico: <img src="dinosaurio.jpg">
Como decíamos, el atributo src apunta al lugar en el que se encuentra la imagen, y aquí hay que diferenciar entre rutas relativas y absolutas:
- En las relativas: el archivo está dentro del sitio web ➡️ src="images/imagen.jpg".
- En las absolutas: está en otro sitio ➡️src="https://example.com/images/imagen.jpg".
Texto alternativo (alt)
Además de los que hemos visto más arriba, hay otro atributo, del que no hemos hablado, y que es muy importante a la hora de insertar imágenes en HTML: alt. ¡Vamos a explicar cómo se inserta y para qué sirve!
Siguiendo con el ejemplo de más arriba del dinosaurio, como vemos, detrás de alt hay una descripción de cuál sería la imagen: la de un dinosaurio caminando por la selva. ¿Para qué sirve esto?
✅ Ejemplo práctico:
Esta descripción de la imagen es muy importante tanto para la accesibilidad como para el posicionamiento SEO de la web.👇
Beneficios del texto alternativo
Los principales beneficios de utilizar el atributo alt son:
Errores comunes
Algunos de los errores más comunes al emplear el atributo alt son:
👌¡Mejor con un ejemplo! El texto alt para esta imagen sería: "Un ordenador de sobremesa que muestra código con iconos de HTML, CSS, JavaScript y PHP, rodeados de código binario sobre fondo amarillo".
🗒️ Te puede interesar: además de este tipo de contenido, también puede interesarte aprender a dar formato a un texto HTML. Al fin y al cabo, el contenido, las palabras, son la base. ¿No crees?
Dimensiones de las imágenes: width y height
Además de aportar la información sobre que se trata de una imagen, dónde está ubicada y su descripción, también es importante definir las dimensiones de la misma. Para ello se utilizan las etiquetas width y height, que especifican en píxeles las dimensiones de la imagen, tal y como se ve en el siguiente ejemplo:
✅ Ejemplo práctico:
Las ventajas de definir dimensiones de la imagen son: por un lado, que mejora la carga de la página; por otro, que evita que el diseño se desplace mientras la imagen se carga.
También puedes usar editor de imágenes para ajustar el tamaño de las imágenes, en lugar de hacerlo solo con HTML. Esto hará que las mismas puedan tener un tamaño más óptimo para la web y es más sencillo hacer cambios si es necesario, en lugar de tocar el código, entre otras ventajas.
Títulos de imágenes con title
En las imágenes, el atributo title aporta información adicional sobre dicha imagen. Como la palabra indica, es una especie de título que se le da a la imagen. Lo reconocerás porque es esa frase que aparece en algunos casos cuando pasas el ratón por encima de una fotografía en una web hecha en HTML. Se ve tal que así:
✅ Ejemplo práctico
De igual modo que añadir alt, el título aporta también información adicional, y existen, igualmente, ciertas limitaciones en su uso: por un lado puede causar problemas de accesibilidad para usuarios que no usan ratón; por otro, es preferible incluir la información adicional directamente en el texto principal.
Pies de imagen con <figure> y <figcaption>
Los elementos semánticos <figure> y <figcaption> sirven para asociar una imagen con su descripción y con el pie de la imagen. Al usar <figure> estamos indicando que lo que viene a continuación es una imagen y su descripción, con los elementos que ya hemos visto hasta ahora. Y con <figcaption> indicamos la información que aparecerá en el pie de la imagen.
En este ejemplo vemos que, a diferencia del de más arriba, la información "Un T-Rex en un museo de ciencias", en lugar de aparecer como título, aparecerá como pie de foto.
✅ Ejemplo práctico:
Algunos de los beneficios de usar estos elementos es que mejoran la accesibilidad y también facilitan una organización clara entre la imagen y su descripción.
👆 Te interesa: aprende a añadir cometarios en HTML para que el resto de tu equipo esté al tanto de cómo avanzas con tu parte. ¡Pueden ser anotaciones solo para ti igualmente!
Imágenes de fondo con CSS
¿Sabes qué son las imágenes de fondo con CSS y cuándo usarlas? No son lo mismo que las HTML y no son opuestas. Es decir, cada manera de insertar una imagen es mejor en ciertos casos. ¡Vamos a verlos, como siempre, con ejemplos!
Diferencias entre imágenes HTML y de fondo CSS
Podemos explicar la diferencia entre ambos lenguajes diciendo que el segundo nació como una necesidad del gran crecimiento del primero. Con el objetivo de no colapsar el HTML con grandes diseños gráficos que no aportaban información a la web. ¿Qué quiere decir esto? Pues bien, que los fondos CSS son, por ejemplo, imágenes de fondo de una web sobre las que se superpone la información y también otras imágenes.
En esta imagen vemos un fondo que podría insertarse con CSS, permitiendo más creatividad y precisión, y en las diferentes páginas de la web, se insertarían más imágenes con HTML. ¡También superpuestas!
Las imágenes de fondo CSS se usan para elemento más decorativo, como el de más arriba, que no necesitan texto alternativo y no necesariamente definen el contenido.
✅ Ejemplo básico con CSS:
Usa las imágenes HTML cuando estas tengan un significado para el contenido y aporten información; y las CSS solo cuando sean un elemento decorativo.
Buenas prácticas y errores comunes
Por último, como hemos visto a lo largo de estas líneas, hay errores que se comenten a la hora de tratar las imágenes en HTML, algunos relacionados con el lenguaje en sí y otros que pueden deberse al desconocimiento de algunas buenas prácticas. Por ejemplo:
1️⃣ Usar nombres de archivos descriptivos: el nombre del archivo, al igual que el alt, que hemos visto más arriba ha de ser descriptivo:
- ✔️ Correcto: dinosaurio-trex.jpg.
- ✖️ Incorrecto: img123.png.
2️⃣ También hay que evitar hacer hotlinking de imágenes desde otros sitios: esto quiere decir utilizar a través de un vínculo archivos que no están en tu web, sino en otra.
3️⃣ Comprimir las imágenes o elegir un tamaño óptimo para el rendimiento de la página: esto mejorará la velocidad de carga sin perder calidad.
Si has llegado hasta aquí, ya tienes una buena base para la teoría, ¡ahora queda lo más difícil y también lo más divertido: empezar con la práctica!💻
Bibliografía
- Eveleth, R. (2016, marzo 24). La curiosa historia de la primera foto que se publicó en internet. BBC. https://www.bbc.com/mundo/especial/vert_fut/2016/03/160226_vert_primera_foto_social_en_internet_yv
¿Te gustó este artículo? ¡Califícalo!
Cargando…
