• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Imágenes

Log in or subscribe for free to enjoy all this course has to offer!

¿Insertar una imagen en el sitio web? Ya veréis que no es nada complicado... Bueno, casi nada. En los sitios web se pueden utilizar varios formatos de imágenes diferentes y no debemos elegirlos al azar. De hecho, a veces las imágenes son grandes y tardan mucho en descargarse, lo que ralentiza el tiempo de carga de la página (¡mucho más que el texto!).

Entonces, para asegurarte de que tus páginas son legibles y rápidas de descargar, sigue mi consejo.

Formatos de imagen

¿Sabes qué es el formato de imagen?

Cuando tienes "acceso" a una imagen, puedes guardarla en varios "formatos" diferentes. El tamaño de la imagen (en KB o incluso MB) variará dependiendo del formato seleccionado y la calidad de la imagen cambiará.

Por ejemplo, el programa de dibujo Paint (aunque por supuesto no sea el mejor) te permite elegir entre diferentes formatos cuando guardas una imagen (imagen siguiente).

Formatos de imagen que ofrece Paint
Formatos de imagen que ofrece Paint

Algunos formatos son mas adecuados que otros según la imagen (foto, dibujo, imagen en movimiento, etc.). Nuestro objetivo es repasar los formatos utilizados en la Red para que tengáis una idea de ellos y sepáis elegir el más adecuado para vuestra imagen. No os preocupéis. No existen muchos formatos diferentes, así que no tardaremos mucho.

Todas las imágenes publicadas en Internet tienen un punto en común: están comprimidas. Esto significa que el ordenador hace cálculos para ampliarlas y que se carguen más rápido.

JPEG

Las imágenes en formato JPEG (Joint Photographic Expert Group) son muy comunes en la Red. Este formato está diseñado para reducir el tamaño de almacenamiento de las fotos (en otras palabras, el tamaño del archivo asociado), que puede contener más de 16 millones de colores diferentes. La siguiente ilustración es una imagen guardada en formato JPEG.

La foto de una montaña en JPEG
La foto de una montaña en JPEG

Las imágenes JPEG se guardan con la extensión.jpgo.jpeg.

Tened en cuenta que el formato JPEG reduce la calidad de la imagen ligeramente, de un modo generalmente imperceptible. Esto es lo que le hace tan efectivo en la reducción del tamaño de almacenamiento de las fotos.
Cuando se trata de una foto, normalmente no se detecta la pérdida de calidad. Si no es una foto, la imagen puede parecer que está un poco borrosa. En este caso, es mejor usar el formato PNG.

PNG

PNG ( Portable Network Graphics) es el formato más nuevo de todos. Este formato es adecuado para la mayoría de gráficos (me atrevería a decir que para "todo lo que no sea una foto"). El formato PNG tiene dos grandes ventajas: puede ser transparente y no afectar a la calidad de la imagen.

El formato PNG se inventó para competir con otro formato, GIF, en tiempos en los que había que pagar derechos de autor por el uso de GIF. Desde entonces, el formato PNG ha cambiado mucho y se ha convertido en el formato más potente para guardar la mayoría de las imágenes.

PNG está disponible en dos versiones, dependiendo del número de colores que incluya la imagen:

  • PNG de 8 bits: 256 colores;

  • PNG de 24 bits: 16 millones de colores (como una imagen JPEG).

La siguiente ilustración es una imagen PNG de 24 bits, que representa a nuestra famosa mascota Zozor.

Zozor en formato PNG
Zozor en formato PNG

De hecho, si una imagen PNG de 24 bits puede mostrar el mismo número de colores que una imagen JPEG, y también puede hacerse más transparente sin afectar a la calidad de la imagen... ¿para qué queremos el formato JPEG?

La compresión de fotos es mas potente con JPEG. Una foto guardada en JPEG se cargará siempre más rápido que si se guarda en PNG. Por eso os recomiendo que siempre mantengáis el formato JPEG en vuestras fotos.

GIF

Aunque este formato es bastante antiguo, se ha utilizado mucho (y todavía se usa). El formato PNG es mucho mejor que el GIF en general: normalmente las imágenes tienen un tamaño de almacenamiento mucho menor y su transparencia es de mejor calidad. Por eso recomiendo que uséis PNG todo lo posible.

GIF está limitado a 256 colores (mientras que PNG puede llegar hasta varios millones de colores).

Sin embargo, el formato GIF tiene una ventaja que no tiene el PNG: puede ser animado (ver ilustración siguiente).

Una imagen GIF animada
Una imagen GIF animada

Hay un formato apropiado para cada imagen

Para resumir, el formato se debe escoger dependiendo de la imagen que tengas, tal y como se indica a continuación:

  • Una foto: usar JPEG.

  • Cualquier gráfico que no tenga muchos colores (menos de 256): usar PNG de 8 bits o posiblemente GIF.

  • Cualquier gráfico con muchos colores (más de 256): usar formato PNG de 24 bits.

  • Una imagen animada: usar GIF animado.

Errores a evitar

Evitar otros formatos

Otros formatos que no se nombran aquí, tales como el formato BITMAP (*.bmp), deben evitarse porque normalmente no están comprimidos y, por tanto, son demasiado grandes. No todos son apropiados para la Red. Aunque puedes incluirlos en tu sitio web, tardarán muchísimo tiempo en cargarse.

Elige bien el nombre de tu imagen

Si quieres evitarte problemas, acostúmbrate a guardar tus archivos con nombres en minúsculas, sin espacios ni tildes, por ejemplo:my_image.png.

Puedes sustituir los espacios por un guión bajo ("_") como he hecho yo aquí.

Insertar una imagen

Ahora volvamos al código HTML para descubrir cómo incluir imágenes en nuestras páginas web.

Insertar una imagen

¿Cuál es la famosa etiqueta que utilizamos para insertar una imagen? ¡Es…<img />!

Es una etiqueta huérfana (como<br />). Esto quiere decir que no tienes que introducir dos etiquetas como en el caso de la mayoría de etiquetas que hemos visto hasta ahora. De hecho, no tenemos que definir una porción de texto; lo único que queremos es colocar una imagen en un punto específico.

La etiqueta debe ir acompañada de dos atributos obligatorios:

  • src: que indica la ubicación en la que quieres insertar la imagen. Puedes incluir una ruta absoluta (e.g.http://www.website.com/flor.png) o una ruta relativa (que es lo que suele hacerse). Así que si la imagen está en la subcarpetaimagenes, tienes que introducir:src="imagenes/flor.png"

  • alt: que significa "texto alternativo". Un texto alternativo a la imagen, en otras palabras, un texto corto que describe lo que contiene la imagen, debe indicarse siempre. Este texto se mostrará en lugar de la imagen si esta última no se puede descargar (esto ocurre), o en los navegadores de personas con discapacidad visual que lamentablemente no pueden "ver" la imagen. También ayuda a los robots de motores de búsqueda a buscar imágenes. Para la flor, por ejemplo, se debería escribir lo siguiente:alt="Una flor"..

Las imágenes deben colocarse obligatoriamente dentro de un párrafo (<p></p>). Aquí tenéis un ejemplo de imagen insertada:

<p>
    Esta es una foto que hice durante mis pasadas vacaciones en las montañas:<br />
    <img src="imagenes/monte.jpg" alt="Foto de la montaña" />
</p>

Resumiendo, es muy fácil insertar una imagen siempre y cuando puedas indicar donde está ubicada, como aprendimos a hacer con los enlaces.
La mayor "dificultad" (si es que podemos llamarlo dificultad) es seleccionar el formato de imagen adecuado. En este caso es una foto, por lo que obviamente se utiliza el formato JPEG.

Añadir una descripción emergente

El atributo utilizado para mostrar una descripción emergente es el mismo que para los enlaces:title. Este atributo es opcional (al contrario quealt).

Aquí tenemos un ejemplo:

<p>
Esta es una foto que hice durante mis pasadas vacaciones en las montañas:<br />
<img src="imagenes/monte.jpg" alt="Foto de la montaña" title="¡Me gusta la nieve!" />
</p>

Coloca el puntero del ratón sobre la foto para que aparezca la descripción emergente.

Miniatura clicable

Si la imagen es muy grande, es recomendable mostrar su vista en miniatura en tu sitio web. Después añade un enlace a la vista en miniatura para que los visitantes puedan ver la imagen en su tamaño original.

Existen millones de programas para crear miniaturas de imágenes. Yo personalmente utilizo Easy Thumbnails. Por tanto, tendré dos versiones de mi foto (como se muestra en la siguiente ilustración): la vista en miniatura y la imagen original.

La vista en miniatura y la imagen real
La vista en miniatura y la imagen real

Meto las dos en una carpeta llamada, por ejemplo,img. Muestro la versiónmonte_peque.jpgen mi página y creo un enlace amonte.jpgpara que se muestre la versión ampliada al hacer clic sobre la vista en miniatura.

Aquí está el código HTML que utilizo para esto:

<p>
¿Quieres ver la imagen en su tamaño original? ¡Haz clic sobre ella!<br />
<a href="img/monte.jpg"><img src="img/monte_peque.jpg" alt="Foto de la montaña" title="Clic para ampliar" /></a>
</p>

Figuras

Al leer este libro, ya habrás visto varios ejemplos de figuras. Son elementos que realzan el texto para complementar la información de la página.

Las figuras pueden ser de diferentes tipos:

  • imágenes

  • código fuente;

  • comillas;

  • ...

Resumiendo, cualquier cosa que ilustre el texto es una figura. Aunque en este caso estamos usando imágenes, las figuras, al contrario de lo que muchos estaréis pensando, no tienen por qué ser imágenes necesariamente: un código fuente también ilustra el texto.

Crear una figura

Tomemos de nuevo el ejemplo de la captura de pantalla que vimos en el primer capítulo, que se muestra en la siguiente ilustración:

El programa Notepad
El programa Notepad

En HTML5, la etiqueta usada es<figure>. Aquí tenemos la forma de usarla:

<figure>
<img src="images/notepad.png" alt="Notepad" />
</figure>

Una figura suele ir acompañada la mayoría de las veces de una leyenda. Para añadir una leyenda, utiliza la etiqueta<figcaption>dentro de la etiqueta<figure>, así:

<figure>
<img src="images/notepad.png" alt="Notepad" />
<figcaption>El programa Notepad</figcaption>
</figure>

Entender la finalidad de las figuras

Anteriormente en este capítulo, os dije que las imágenes tenían que ir colocadas en párrafos (situadas dentro de una etiqueta<p></p>). No es totalmente cierto.

Si realizas una figura de tu imagen, la imagen se puede colocar fuera del párrafo.

<p>¿Conocéis el programa Notepad? ¡Se pueden hacer páginas web con él!</p>

<figure>
<img src="images/notepad.png" alt="Notepad" />
<figcaption>El programa Notepad</figcaption>
</figure>

No veo la diferencia. ¿Cuándo debo poner la imagen en un párrafo y cuándo debo ponerla en una figura?

¡Buena pregunta! Todo depende de lo que tu imagen proporcione al texto:

  • Si no proporciona información (es simplemente una ilustración con fines decorativos): coloca la imagen en un párrafo.

  • Si proporciona información: coloca la imagen en una figura.

La etiqueta<figure>tiene un papel principalmente semántico. Esto significa que le dice al ordenador que la imagen tiene un significado y que es importante para la comprensión del texto. Esto puede permitir a un programa recuperar todas las figuras del texto mencionarlas en una tabla de figuras, por ejemplo.

Por último, ten en cuenta que una figura puede tener varias imágenes. Este es un caso que lo justifica:

<figure>
<img src="images/internetexplorer.png" alt="Logo de Internet Explorer" />
<img src="images/firefox.png" alt="Logo de Mozilla Firefox" />
<img src="images/chrome.png" alt="Logo de Google Chrome" />
<figcaption>Logos de varios navegadores</figcaption>
</figure>

En resumen

  • Existen varios formatos de imagen apropiados para su uso en la Red:

    • JPEG: para fotos;

    • PNG: para todas las demás ilustraciones;

    • GIF: similar a PNG, con un número de colores más limitado, pero puede ser animado.

  • Las imágenes se insertan con la etiqueta<img />. Debe incluir al menos dos atributos:src(nombre de la imagen) yalt(descripción corta de la imagen).

  • Si una imagen ilustra el texto (y no tiene una finalidad simplemente decorativa), es mejor ponerla dentro de una etiqueta<figure>. La etiqueta<figcaption>se utiliza para introducir la leyenda de la imagen.

Example of certificate of achievement
Example of certificate of achievement