Imágenes en Html

Las imágenes de una página web son conocidas como mapas de bits y pueden representar iconos, botones, imágenes con zonas transparentes o fotografías

Dependiendo del nivel de compresión utilizado perderemos calidad, por eso debemos saber elegir el formato más adecuado a nuestras necesidades:

• png

  es un formato de compresión sin pérdida que además soporta transparencias

  Podemos representar iconos o imágenes con zonas transparentes por lo que es una buena alternativa para cualquier tipo de imagen que no sea una fotografía

• jpg o jpeg

  es un formato de compresión con pérdida que no soporta transparencias

  Se usa normalmente para fotografías

• gif

  es un formato de compresión sin pérdida, pero está limitado a 256 colores

  Ocupa muy poco espacio y es idóneo para imágenes con poca calidad, como por ejemplo los iconos o botones

  Soporta transparencias y animaciones

Al igual que ocurre con la edición del HTML, necesitamos de un editor de imágenes para su manipulación

Existen editores comerciales y muy potentes como Photoshop, pero tambien podemos utilizar editores con una calidad similiar y de código libre como GIMP

Tambien tenemos la posibilidad de usar alguna herramienta que permita convertir entre los distintos formatos, como ImageMagick

El elemento para incluir imágenes en nuestra página web es img al cuál deberemos incluirle al menos el atributo src al que le indicaremos al navegador, mediante la ruta relativa o absoluta, el nombre de la imagen y mediante su extensión, el formato de la misma

<img src='/wp-content/uploads/2016/04/palmeras.jpg' width='1260' height='240' alt="Web sobre Informática de Secarcam" />

En el ejemplo podemos ver que además del atributo src hemos utilizado width que nos permite especificar el ancho de la imagen

El atributo height que permite especificar la altura de la imagen

Y el atributo alt que introduce una descripción (una palabra o una frase breve) sobre la imagen

En principio se puede omitir, pero es beneficioso para aquellos que accedan a la página con un navegador en forma de sólo texto, ya que no serán capaces de ver la imagen, pero al menos podrán hacerse una idea sobre ella gracias a esa descripción

Quedando como resultado:

Se pueden capturar las imágenes que nos muestra el navegador, con objeto de guardarlas permanentemente en nuestro disco duro

Desde el navegador, pulsamos sobre la imagen con la tecla derecha del ratón, nos aparecerá un menú en el que está la posibilidad de guardar la imagen en el directorio del disco duro que le indiquemos

En caso de que no nos interese que los usuarios puedan guardar las imágenes de nuestra web deberemos utilizar alguna técnica para evitar la pulsación de la tecla derecha del ratón mediante Javascript

Imagen usada como enlace

En algunos casos, también se utiliza una imagen como enlace a otra página

Con respecto a la localización del fichero de la imagen, se usa igual que como un enlace. Si no se indica nada especial, quiere decir que el fichero está en el mismo directorio que el documento HTML que estamos escribiendo

Se puede cargar una imagen que no esté en nuestro sistema siguiendo el mismo método que con los enlaces, se indica en la etiqueta el URL completo de la imagen. Aunque esto no es muy aconsejable, pues alargaría innecesariamente el tiempo de carga de nuestra página

Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande supone un fichero grande, y esto puede ocasionar un tiempo excesivo de carga, con el consiguiente riesgo de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello

<a href='/wp-content/uploads/2016/04/palmeras.jpg'><img src='/wp-content/uploads/2016/04/palmeras.jpg' width='150' height='75' /></a>

En el ejemplo se ha usado un thumbnail (reproducción en miniatura de la imagen), que hace de enlace a la imagen en su verdadero tamaño

De esta manera no recargamos demasiado una página, y el usuario será quien decida qué imágenes desea cargar

Otra manera de conseguirlo es reducirla con un editor de imágenes a 150×75, guardarla con otro nombre, y luego hacer que la pequeña sea el enlace de la grande

Esta sería una solución si utilizamos una versión muy antigua de Netscape, ya que no reconocía los atributos width y height

Quedando como resultado:

<a href='index.html'><img src='/wp-content/uploads/2016/04/palmeras.jpg' width='150' height='75' border='0' /></a>

En el ejemplo se ha usado la imagen para redirigirnos a la página de inicio, así podemos enlazar la imagen con la página deseada

También podemos usar iconos, botones o animaciones para realizar esta tarea

En el ejemplo también hemos usado el atributo border con el valor 0 porque sinó la imagen estará rodeada de un rectángulo del color normal de los enlaces, de esta manera, evitamos que aparezca ese rectángulo

Quedando como resultado:

Posicionando el cursor sobre esta imagen, comprobamos que actúa también como enlace aunque carezca del rectángulo de color. Esto puede resultar más estético, aunque se corre el riesgo de que el usuario no se dé cuenta de que la imagen sirve de enlace

Posición del texto con respecto a la imagen

Para elegir la posición de la imagen con respecto al texto hay distintas posibilidades

La más sencilla es colocarla entre dos párrafos, con el texto a un lado

Utilizando hojas de estilo CSS se pueden conseguir efectos más elaborados, como animaciones, movimiento, rotaciones, etc

Para escoger la posición del texto con respecto a la imagen se utilizaba el atributo align y permitía las siguientes posibilidades:

• top

  el texto aparece alineado arriba

• middle

  el texto aparece alineado en medio

• bottom

  el texto aparece alineado abajo

Este atributo ya no es soportado en HTML5 y se ha incluido el ejemplo por compatibilidad con versiones anteriores, es recomendable utilizar una hoja de estilo para obtener este efecto o utilizando el elemento div

<div align='top'><img src='/wp-content/uploads/2016/04/palmeras.jpg'>Texto alineado arriba</img></div>
<div align='middle'><img src='/wp-content/uploads/2016/04/palmeras.jpg'>Texto alineado en medio</img></div>
<div align='bottom'><img src='/wp-content/uploads/2016/04/palmeras.jpg'>Texto alineado abajo</img></div>

En el ejemplo se ha optado por usar el elemento div

Quedando como resultado:

Texto alineado arriba

Texto alineado en medio

Texto alineado abajo