Es dificil encontrar una página web que no tenga alguna imagen, ya sea como parte del contenido o como adorno. Las imágenes es uno de los elementos más utilizados en la web.
En una página web, por tanto, se pueden distinguir 2 tipos de imágenes:
- De contenido: son las que ponemos para aclarar, complementar o simplemente mostrar información. Estas imágenes se incluyen siempre directamente en el código de la página HTML.
- De adorno: son las que utilizamos para diseñar nuestra página web (fondos, adornos de listas, bordes, líneas, etc...). Estas imágenes van enlazadas dentro de una hoja de estilos CSS.
La etiqueta HTML que se utiliza para añadir imágenes a una página Web es img y es una de las pocas etiquetas que no tiene etiqueta de cierre por ser una etiqueta vacía. Es una etiqueta de LÍNEA, por tanto si queremos colocar la imagen a la izquierda, a la derecha o centrarla, la debemos convertir en bloque con la declaración CSS: display:block;
Atributos más utilizados:
| Atributo | Descripción |
| src="url" | Indica la ruta y el nombre del archivo de imagen |
| alt="texto" | Descripción corta de la imagen, es conveniente por usabilidad |
| title="texto" | Descripción que aparece como "tip" al colocar el cursor sobre la imagen |
El atributo alt permite describir el contenido de la imagen mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024 caracteres y son útiles para las personas y dispositivos especiales para discapacitados que no pueden acceder a las imágenes.
La etiqueta img admite también los atributos width y height que se utilizan para indicar la anchura y altura, pero hoy en día es altamente recomendable NO incluirlos si queremos que nuestras imágenes sean "responsive" para cualquier dispositivo móvil.
Propiedades:
- Tamaño: como cualquier otro archivo informático, las imágenes tienen tamaño que se mide en KB o en MB. Es más que conveniente optimizar su tamaño para que sea el menor posible cuando las incluimos en páginas web (una buena imagen no debería "pesar" más de 100 KB).
- Dimensión: nos referimos al ancho y alto de una imagen, y la unidad es el pixel. Realmente la dimensión que nos importa es el ancho, ya que el alto se calcula de forma proporcional para que la imagen no quede distorsionada.
- Formato: la recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden todos los navegadores modernos: GIF, JPG y PNG. El formato PNG presenta el inconveniente de que los navegadores obsoletos como Internet Explorer 6 no muestran correctamente las imágenes con transparencias de 24 bits.
Propiedades CSS
De las muchas propiedades CSS que podemos utilizar con nuestras imágenes las que más se emplean para adornarlas y darles vistosidad son: box-shadow y la propiedad transform. También se utilizan bastante las propiedades: border, transition y opacity. Como fondos utilizamos background. Todas estas propiedades se verán posteriormente con más detalle dado que algunas implican cierta complejidad.
Sintaxis
En este ejemplo, además se ha incluido un atributo "class" que, como en cualquier otra etiqueta, también se puede utilizar. Además, en este caso, la imagen está dentro de un directorio llamado "img/".
<img src="/img/barco.jpg" alt="barco" title="barco" class="izda">
