¿Cómo Incluir imágenes?
Las imágenes son, junto con el texto, uno de los elementos más importantes de las páginas web. De hecho, es difícil encotrar páginas web sin imágenes.
Las imágenes de una página web las podemos agrupar en dos tipos:
- Las imágenes de contenido: se utilizan para informar y complementar al texto escrito.
- Las imágenes de adorno: se usan para que visualmente las páginas sean más bonitas y atractivas a la vista, complementando el orden y la estructura de ésta, por ejemplo: fondos de página, iconos de listas, etc...
Las imágenes de contenido forman parte del archivo .html, pero las imágenes de adorno normalmente se encuentran, como enlaces, en los archivos .css o .js
Las imágenes, del mismo modo que los textos, pueden servir de soporte para colocar enlaces o links.
La etiqueta HTML que nos permite incluir imágenes en nuestras páginas web es: img . Es de las pocas etiquetas vacías, y por tanto, no tienen etiqueta de cierre. Los dos atributos requeridos para esta etiqueta son: src y alt, de hecho, solo con src ya podemos mostrar la imagen, auque es una práctica más que aconsejable incluir el atributo alt.
Ejemplo:
img src="/logo.png" alt="Logotipo del Sitio" /
El atributo src es similar al atributo href de los enlaces, ya que establece la URL de la imagen que se va a mostrar en la página. Las URL indicadas pueden ser absolutas o relativas. El atributo alt permite describir el contenido de la imagen mediante un texto breve, y es muy conveniente utilizarlo por si hubiera algún problema al cargar la imagen y por accesibilidad, en sistemas utilizados por personas con discapacidad visual.
Los tipos de imágenes más utilizados en páginas web son:
- Imágenes .jpg: La extensión de imagen .jpg o .jpeg es de lo más usados, sobretodo en internet, en fotografías o en gráficos web. Es un formato de imagen con pérdidas (de calidad) y pesa poco aunque en resoluciones pequeñas puede aumentar notablemente su pixelación.
- Imágenes .png: El formato de imagen PNG es uno de los mejores. Es sin pérdidas y puedes añadir una transparencia con degradado al fondo (GIF solo permite una transparencia pura). Es muy común actualmente. Es ideal para gráficos web como iconos y funcionan muy bien con una paleta de color reducida. Con PNG también puedes guardar fotografías con una calidad alta.
- Imágenes .gif: El formato de imagen GIF es sin pérdidas y se usa casi exclusivamente para web ya que permite crear pequeñas animaciones. Últimamente ha adquirido gran popularidad gracias a los memes. Se recomienda usar el formato de imagen GIF para animaciones web como banners, memes o iconos. Cabe mencionar que puedes guardarlo con un fondo transparente.