IMAGEN EN LA WEB

<h1>

Para añadir imágenes a una página web hay que escribir el siguiente código HTML:

<img src="archivo.jpg">

src indica la ruta del archivo. Si el archivo de imagen se encuentra en la mísma carpeta que la página web se escribiría como en el ejemplo, pero si se encuentra en una carpeta distinta la ruta podría ser así:

src="carpeta/archivo.jpg".

También se puede llamar a una imagen con la dirección completa:

 src="https://www.web.com/images/archivo.gif".

Ahora bien, es conveniente añadir otros atributos al código de la imagen:

• Alto y ancho: es conveniente determinar el ancho y alto de una imagen para evitar al navegador operaciones innecesarias y facilitar que cargue más rápido la página. Para esto se utilizan las etiquetas height (alto) y width (ancho). Siempre es recomendable establecer estos atributos. Por ejemplo:

<img src="archivo.jpg" width="300" height="150">

En este caso la imagen tendría un ancho de 300 píxeles y un alto de 150 píxeles.

• Imágenes con enlaces: uno de los mayores usos que se le dan a las imágenes en la webes el de vinculr archivos, utilizarlas como enlaces. Ejemplo:

<a href="carpeta/web.html"><img src="archivo.gif"></a>

Donde href establece la ruta de la página a la que dirigirá la imagen. Otro ejemplo:

<a href="https://www.lawebera.es/">
<img src="carpeta/archivo.gif"></a>

• Atributo alt: este atributo especifica un texto alternativo que se muestra en lugar de la imagen cuando ésta no existe o el navegador no es capaz de cargarla. En estos casos, el texto alternativo es la única forma que tienen los visitantes de conocer el contenido de la imagen. El atributo alt se expresa así:

<img src="nombrearchivo.jpg"
alt="texto alternativo a mi gusto">

• Establecer el borde: toda imagen en la web puede tener un borde de un grosor determinado. Según tus preferencias podrás determinar si la imagen tiene o no borde, y en caso de tenerlo su grosor. Ejemplos:

Imagen sin borde:

 <img src="nombrearchivo.jpg" border="0">

Imagen con borde de 3 píxeles:

<img src="nombrearchivo.jpg" border="3">

Atributos completos del código de la imagen

Con todo lo anterior, podemos definir bastante bien las propiedades básicas de la imagen (recordemos que es muy importante el uso de imagenes en los blogs y en portales web). Para denifir otro tipo de detalles visuales hay que hacer uso de CSS. Veamos un ejemplo con lo aprendido:

<a href="paginaweb.html">
<img src="archivo.gif" width="300"
height="150" border="5"
alt="texto alternativo de la imagen"></a>

Algunos errores comunes en la utilización de imágenes en la web

• Reducir el tamaño de la imagen directamente en el editor de HTML: si haces esto, no estás reduciendo realmente la imagen, le estás diciendo al navegador que la redimensione en el momento, pero su tamaño (y lo que ocupa) sigue siendo igual y la página tarda una eternidad en cargar. Como consecuencia, puede ocurrir que tengas una imagen muy pequena en tu web que tarda mucho en cargar, porque en realidad es enorme. Para cambiar el tamaño de una imagen utiliza un editor de imágenes, así el peso también se reducirá y la página web tardará menos en cargar.
• Usar imágenes en formato BMP: por suerte, este formato está desapareciendo cada vez más de la web, y digo con suerte porque es un tipo de formato que no comprime la imagen, por lo que ésta es muy pesada y ralentiza mucho la carga de la página. Es mejor usar imágenes .gif, .jpg o .png.
• No poner etiquetas alt: las imágenes son importantes en la web, pero no añaden contenido a la página, por lo que añadir una pequeña descripción a la imagen resulta muy útil de cara al posicionamiento en buscadores ya que da información a los buscadores acerca del tema de tu web. Ni que decir tiene que en los navegadores en los que las imágenes no se muestran en su lugar aparece el texto escrito en esta etiqueta, por lo que los usuarios que los utilizan tienen una guía para saber qué imagen había si escribes un texto descriptivo, algo que mejora mucho la accesibilidad web.

Donde encontrar imágenes web

Una alternativa a la creación de imágenes propias para tu web, es utilizar las que existen disponibles en Internet para su libre uso. Algunas páginas donde puedes comenzar a buscar son:

• FreeFoto.com: cuenta con una enorme colección de fotografías que se pueden usar libremente para complementar nuestras webs.
• IconShock: esta web tiene una sección de iconos gratuitos para utilizar en nuestra página web de muy buena calidad.
• FreeImages.co.uk: en la línea de las anteriores webs, cuentan con una gran colección de imágenes listas para usar.
• Yotophoto: en un buscador de imágenes con licencia copyleft, GNU y demás licencias que permiten la distribución. Muy útil.