Utilización de imágenes
Profesor: Javier López
Volver
Formatos de imagen
Las palabras mágicas
figure y figcaption

Formatos de imagen
Los navegadores utilizan 4 formatos de imagen:

.GIF

Soporta transparencias.
Soporta animaciones muy simples (gifs animados).
No tiene pérdida de calidad.
Imágenes que no superan los 256 colores.

.PNG

El más recomendable para imágenes que no sean fotografías.
Ideal para dibujos o capturas de pantalla.
Soporta transparencias y niveles de transparencia (PNG-24).
PNG-24 Soporta hasta 'millones de colores'.

.JPG

Utilizadas para fotografías.
Soporta millones de colores.
No soporta transparencias.
Aplica compresión (las imágenes pesan menos).
Al manipularlas pierden calidad.

.SVG

Son vectoriales.
No tienen pérdida de calidad al aumentar de tamaño.
Pesan poco.
Soportan transparencias.
Tardan en ser dibujadas por el ordenador.

En los siguientes ejemplos colocaremos las imágenes en la carpeta img. Dicha carpeta estará en la misma carpeta donde se encuentran los ficheros .html

Es importante remarcar que los nombres de imágenes (igual que los ficheros con formato html y el resto) NO deben contener ni espacios, ni acentos, ni símbolos extraños.

Las pálabras mágicas
Para añadir una imagen basta con añadir el siguiente código:
<img src="carpeta_imagenes/nombre_imagen.png">
Existen diferentes complementos o parámetros que nos dan más control sobre las mismas:

Medidas
Aunque para visualizar la imagen a otro tamaño del original es preferible modificar el tamaño desde Photoshop o similares, con el parámetro width y/o height podemos cambiar la anchura y/o la altura.
<img src="carpeta_imagenes/nombre_imagen.png" width="250px">
Es importante resaltar que si queremos modificar la imagen SIN deformar la imagen es suficiente con indicar SÓLO width o height. Así, si se indica sólo el valor de la anchura (width), la altura se establecerá de manera automática sin que la imagen se deforme.

Si queremos que una imagen ocupe la totalidad (100%) o la mitad (50%) de un <div> o de la página podemos utilizar porcentajes en vez de píxeles.

<img src="carpeta_imagenes/nombre_imagen.png" width="100%">
En este caso la imagen ocupará la totalidad de la anchura del DIV donde esté ubicada.
Texto alternativo
Es importante añadir información de tipo textual a la imagen para que tanto Google, como otros robots que accedan a nuestra página, así como dispositivos lectores para personas invidentes puedan saber qué muestra la imagen. Para ello utilizamos el parámetro alt:
<img src="carpeta_imagenes/nombre_imagen.png" alt="Logo de la empresa">

figure y figcaption
<figure> es un nuevo tipo de bloque de HTML5 con contenido semántico propio y está orientado a contener imágenes. De esta manera el navegador y cualquier robot que acceda a nuestra página conocerá la naturaleza del contenido que contiene este tipo de bloque (que estará destinado a imágenes).

Al utilizar <figure> tenemos la interesante (aunque a veces arriesgada) posibilidad de utilizar <figcaption>. Interesante porque nos permite añadir un texto como pie de foto a una imagen de una manera muy sencilla, y arriesgado ya que -a veces- cuando necesitamos colocaciones muy especiales el pie de foto puede quedar colocado de una manera no demasiado elegante.

Para maquetar el texto del figcaption con CSS, debemos utilizar el selector:

figcaption{
...
}
<figure>
   <img src="img/imagen.png">
   <figcaption>
        Este texto es el <b>figcaption</b> de esta imagen
   </figcaption>
</figure>
Este texto es el <figcaption> de esta imagen