HTML 5 y CSS 3

Diseño Web Responsivo
#10

Imágenes


Las imágenes se introducen con la etiqueta <img>. Es una etiqueta "vacía", no tiene etiqueta de cierre. Solo hay dos atributos obligatorios, la src (del ingés source, fuente u origen) que es la URL donde se encuentra la imagen. Y el alt que es el texto alternativo que describe la imagen. Este texto alternativo es lo que se mostrará si, por alguna razón, la imagen no se ha podido cargar. También es lo que leen los motores de lectura de las web para las personas con discapacidad visual.

Así, podemos introducir la imagen:

Ver la imagen en página emergente

Este es el código inicialmente necesario:

 <img src="imag/riglos.jpg" alt="Imagen de los mallos de Riglos">
	

Lo que ocurre es que, aunque no es obligatorio, es conveniente decirle al navegador algo con respecto al tamaño en ancho (width) y alto (height) de la imagen.

Técnicamente la imagen no se inserta en la página, lo que hace es que se vincula o embebe, desde el sitio en el que está, hasta la página en la que la queremos colocar. Por eso, es una buena idea declarar el ancho y el alto para que el navegador reserve un espacio en el que colocar la imagen mientras se carga el resto de la página.

Esto se puede hacer de dos formas:

1.- Con los atributos width y height:

En un programa gráfico podemos obtener estos datos y colocarlos con la siguiente sintaxis:

 <img src="imag/riglos.jpg" width="600" height="401" alt="Imagen de los mallos de Riglos">
	
Nota: Aunque los números se refieren a los píxeles de ancho y alto no hay que escribir la abreviatura px como se hace en otros casos.

Este es el resultado:

Ver la imagen en página externa

2.-Con el atributo <style>

Con la siguiente sintaxis:

 <img src="imag/riglos.jpg"  style="width:600px;height:401px;" alt="Imagen de los mallos de Riglos">
	
Nota: En este caso, sí que se escribe px y observa el uso de las comillas y el ; para la separación de las dos propiedades.

Este es el resultado:

Ver la imagen en página externa

¿Qué opción es mejor

Sin lugar a dudas, es la opción style porque nos aseguramos que esa declaración de tamaños no va a interferir con otras posibles declaraciones en el CSS interno o en la hoja de estilos externa.

De todas formas, las tres soluciones anteriores, aún siendo correctas todas, no son responsivas. Es decir va a haber problemas al ver la página con una resolución inferior al ancho de la imagen.

La primera solución para evitar este problema es poner el ancho al 100%.

De esta forma la imagen se va a adaptar al 100% del tamaño del ancho disponible.

Imagen del pueblo y los mallos de Riglos en la provincia de Huesca

Este es el código que he escrito:

 <img src="imag/riglos.jpg"  style="width:100%;" alt="Imagen del pueblo y los mallos de Riglos en la provincia de Huesca">
	
Nota: El atributo alt es muy importante. He ampliado un poco la descripción en esta cuarta versión de la carga de la imagen.

Hay otras posibilidades para hacer que la imagen sea responsiva pero esta, por su sencillez, es una de las más eficaces. Veremos esas otras posibilidades más adelante.

Imágenes desde otro servidor o desde un sitio web externo


Podemos cargar la imagen desde una URL externa:

Lápices de colores

En este caso en el atributo src pegamos la URL completa, la URL absoluta. Hay que tener cuidado con los derechos de autor de las imágenes que usemos. En este caso, esta imagen ha sido obtenida de la web pixabay que proporciona imágenes de uso libre.

Este es el código que he escrito:

 <img src="https://cdn.pixabay.com/photo/2017/07/21/03/32/crayon-2524562_1280.jpg" style="width:100%;" alt="Lápices de colores">
	
He empleado el width="100%" para asegurarme que la imagen se va a comportar de forma responsiva

Imágenes como fondo de página


Podemos emplear imágenes como fondo de un documento html.

Ver la imagen en página externa

 body {
  background-image: url('imag/riglos.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100%;
}
	
Como es un fondo que quiero que ocupe toda la página, lo declaro en el CSS interno en el body. En la primera línea hemos escrito la URL de la imagen. En la segunda línea hemos declarado que la imagen no se repita. En la tercera línea que se quede fija. Y en la última línea que ocupe el 100% a lo ancho.

También hemos modificado las cuestiones del texto, en concreto del párrafo en el que hemos escrito la información proporcionada por la Wikipedia.

 p{
	padding:20px 35px;
	font-size: x-large;
	color:white;
}
	
Como hemos querido escribir texto por encima nos ha parecido que teníamos que colocar el texto de tamaño grande y en un color que destacase sobre los colores de la imagen. Hemos elegido el blanco y hemos puesto un padding vertical de 20 px y horizontal de 350 px para que el texto quede separado de los bordes.
Página 1 Página 2 Página 3 Página 4 Página 5 Página 6 Página 7 Página 8 Página 9 Página 10 Página 11 Página 12 Contenidos
Icono de licencia Creative Commons

Ángel Ricardo Puente Pérez 2023

Icono del W3C Validator