Como acabamos de ver el atributo src sirve para indicar la ruta donde se encuentra la imagen que se va a mostrar. Por tanto, la imagen estará en un archivo distinto al archivo que contiene la página web, no puede estar incrustada en el mismo archivo (salvo que se genere dinámicamente).
Este archivo de imagen puede encontrarse en cualquier lugar accesible desde la página web, en el mismo directorio, en otro directorio, en otro servidor de internet, etc. En cada caso la ruta para acceder al archivo será distinta, y puede escribirse de forma absoluta o de forma relativa. Una ruta es absoluta cuando incluye todos los elementos de la ruta, y una ruta es relativa cuando parte del directorio en el que se encuentra la página web. En la unidad 3 que tratamos los hiperenlaces están explicadas las rutas absolutas y relativas con ejemplos.
Los tipos de archivo de imagen más frecuentes son .jpg, .gif y .png. Para imágenes fotográficas con muchos colores y detalles se suele emplear el formato .jpg. El formato .gif se ha venido utilizando para imágenes de gráficos y esquemas, permite el fondo transparente y animaciones. El formato .png permite fondo transparente como el .gif, pero es más moderno, con mayor compresión y calidad.
El atributo srcset permite establecer distintas imágenes en función de la resolución del dispositivo y del ancho de la pantalla.
El formato para la resolución del dispositivo lo vamos a ver en el siguiente ejemplo:
<img srcset="img_resol_normal.png 1x, img_resol_alta.png 2x">
Si la resolución de la pantalla es 1x, que equivale a un monitor de ordenador, se mostrará la imagen img_resol_normal.png, y si la resolución de la pantalla es 2x, que equivale a un dispositivo móvil de alta resolución, se mostrará la imagen img_resol_alta.png
De forma forma similar podemos utilizar el ancho de la pantalla ver en el siguiente ejemplo:
<img srcset="img_resol_normal.png 500w, img_resol_alta.png 700w">
Si el ancho de la pantalla es menor o igual de 500w, se mostrará la imagen img_resol_normal.png, y si el ancho de la pantalla es mayor de 500w, se mostrará la imagen img_resol_alta.png
Las unidades w son descriptores de anchura que equivalen a pixeles para una resolución normal.
También se puede utilizar el atributo sizes que afecta al parámetro srcset, complicando más los cálculos, además no todos los navegadores principales implementan igual estos atributos, por lo que es recomendable utilizar la etiqueta picture, que veremos luego, cuando queramos establecer distintas imágenes en función de la resolución del dispositivo y del ancho de la pantalla.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.