Las imágenes son uno de los elementos más utilizados en los documentos HTML y las páginas web. Y no es por poco, ya que como dice un viejo refrán: «una imagen vale más que mil palabras». Con las imágenes podemos explicar conceptos complejos y complementar información textual. Hay ocasiones en las que las imágenes llegan a ser el contenido principal de un documento HTML.
Las imágenes se introducen mediante el elemento <img>. Se trata de un elemento vacío, pues no tiene etiqueta de cierre. Dentro de la etiqueta de apertura se introducen los atributos que permiten especificar la ruta de la imagen y algunas de sus características, como pueden ser el alto y el ancho de la imagen.
Ejemplo de código HTML de una imagen:
<img src='/logo/logo.svg' width='200' height='34'>
El resultado será el siguiente:
Hemos utilizado una ruta relativa en la que partimos del directorio raíz con la barra /. A continuación le indicamos la carpeta en la que tenemos ubicada nuestra imagen (carpeta logo). Finalmente especificamos el nombre del archivo que contiene la imagen que queremos mostrar (nombre logo.svg). En este ejemplo hemos utilizado un par de atributos para especificar las dimensiones de la imagen.
Atributos de imagen
Las imágenes tienen algunos atributos específicos, y dado que el elemento <img> es un elemento vacío, algunos atributos son imprescindibles, como es el caso de src para indicar la ubicación de la imagen en el directorio de archivos.
El atributo ‘src’
Con el atributo src indicamos la ruta de la imagen, es decir, su ubicación dentro del directorio de archivos. Este atributo es obligatorio: si no lo ponemos, no aparecerá ninguna imagen; si el valor de src es incorrecto, aparecerá un icono en el lugar de la imagen, señalando que no se ha podido cargar correctamente.
El valor del atributo src debe ser la ruta del recurso de imagen. Es una buena práctica almacenar las imágenes en un directorio separado. La ruta se puede especificar como una URL absoluta (incluyendo el protocolo, el dominio y el camino) o relativa. En este caso, el navegador resolverá la ruta completa.
Ejemplo de código HTML de imagen con URL absoluta:
<img src='https://recursivos.com/logo/logo.png'>
Ejemplo de código HTML de imagen con URL relativa:
<img src='/logo/logo.png'>
El atributo ‘alt’
El atributo alt permite establecer una descripción de la imagen. Por lo tanto, el valor de este atributo será una cadena de texto con una breve descripción de su contenido. Los usuarios no verán la descripción mientras la imagen se cargue correctamente; pero si la carga no finaliza, verán el texto descriptivo.
Pero la razón principal por la que se creó este atributo es otra muy distinta: que las personas con discapacidad visual sepan sobre el contenido de la imagen. Y es que muchas personas utilizan lectores de voz del contenido de la web, ya sea porque no quieren o no pueden leer la página o el documento HTML.
Existe un tercer motivo por el que es bueno usar este atributo: el posicionamiento web (SEO). Google y otros buscadores utilizan este atributo para conocer y comprender mejor el contenido de la imagen —junto con algoritmos visuales de imagen— con el fin de clasificarla mejor y ofrecerla en los resultados de búsqueda.
Este atributo debe tener una longitud inferior a los 1024 caracteres.
Ejemplo de código HTML usando el atributo alt:
<img src='/logo/logo.png' alt='Logotipo de Recursivos'>
El atributo ‘longdesc’
El atributo longdesc es muy parecido al atributo alt, pero con la particularidad de permitir una descripción más larga: puede ser superior a los 1024 caracteres. Se trata de un atributo poco habitual. Con este atributo se pueden aportar descripciones más largas e incluso añadiendo una URL de referencia que pueda contener más información sobre la imagen en cuestión.
Ejemplo de código HTML usando el atributo longdesc:
<img src='/logo/logo.png' longdesc='Esta imagen contiene el logotipo de Recursivos, cuya insignia es la letra griega lambda en mayúsculas, diseñada usando software libre (LibreCAD e Inkscape).'>
Los atributos ‘width’ y ‘height’
Los atributos width y height permiten especificar el ancho y el alto de una imagen, respectivamente. No son obligatorios, aunque tienen una gran utilidad. El valor de estos dos atributos es un número entero; si no se indica la unidad, por defecto serán píxeles. Pero también podría indicarse un porcentaje usando como sufijo el símbolo %. Por ejemplo: width='50%'. El porcentaje tendrá como referencia el elemento contenedor de la imagen.
El ancho y alto de la imagen no debe coincidir necesariamente con sus medidas reales. Las medidas que se indiquen son las medidas con las que el navegador la mostrará. Pero si se modifican, es importante cuidar la proporción de las dos medidas, ya que de lo contrario se verá deformada.
Si se establece únicamente la anchura o la altura, el navegador web calculará la otra medida necesaria para que se mantenga la proporción de la imagen. En general, lo más habitual es que sólo necesitemos establecer una u otra, por lo tanto podremos ignorar la otra y estar tranquilos de que la imagen se verá bien.
Ejemplo de código HTML usando los atributos width y height:
<img src='/logo/logo.png' width='200' height='34'>
El atributo ‘srcset’
El atributo scrset se creó a partir de la versión HTML5 y permite indicar una lista de cadenas de imágenes separadas por coma. Este atributo está pensado para disponer de varias imágenes para distintos tamaños de dispositivo. Cada cadena está compuesta por los siguientes valores:
- Una URL válida de imagen (valor mínimo).
- Opcionalmente, uno de los siguientes valores:
- El ancho de imagen en píxeles y la letra
w. - La densidad del píxel con la letra
x.
- El ancho de imagen en píxeles y la letra
Los valores se separan con espacios. Referente al punto 2, sólo se admite uno de los dos valores. En caso de incluir los dos se considerará que hay descriptores duplicados y no será válido; por tanto, no deben mezclarse. En caso de que no se especifique ningún descriptor, el valor por defecto será 1x.
Cabría esperar que como unidad de los píxeles se usara px. Sin embargo, se usa la letra w como descriptor ya que se trata del tamaño real de la imagen.
Ejemplo de código HTML del atributo scrset:
<img
alt='Imagen de ejemplo'
src='imagen.png'
scrset='imagen-400.png 400w,
imagen-500.png 500w,
imagen-600.png 600w'>
El uso del atributo srcset es la solución ideal cuando sólo se pretende cambiar la resolución. Pero si además se quiere disponer de imágenes diferentes, recortadas o ampliadas para diferentes diseños de plantilla se recomienda usar el elemento <picture>.
Por ejemplo, cuando queremos que en un dispositivo de escritorio se muestre un paisaje completo (vista panorámica) pero queremos que salga otra imagen (vista recortada) para que se muestre en un dispositivo móvil. Para más información, lee el artículo sobre imágenes adaptables.
El atributo ‘sizes’
El atributo sizes funciona en concordancia con el atributo scrset y requiere que este último esté definido. Con sizes se especifica una lista de cadenas de tamaños válidos separados por coma. Cada cadena está compuesta por:
- Una propiedad CSS entre paréntesis; es opcional.
- El ancho de la imagen en unidades de CSS.
Ejemplo de código HTML del atributo sizes:
<img
alt='Imagen de ejemplo'
src='imagen.png'
scrset='imagen-400.png 400w,
imagen-500.png 500w,
imagen-600.png 600w'
sizes='(max-width: 400px) 400px,
(max-width: 500px) 500px,
600px'>
Gracias a los atributos srcset y sizes, los navegadores que los soporten elegirán la imagen que mejor encaje en la configuración del dispositivo del usuario en el que será representada. Este mecanismo permite proveer imágenes sin pérdida de calidad en páginas que tengan un diseño web responsive.
El atributo ‘ismap’
El atributo ismap permite indicar si la imagen representa un mapa de imagen del lado del servidor. Si es que sí, cuando el usuario haga clic sobre la imagen se enviarán las coordenadas precisas del clic.
Este atributo sólo funcionará si el elemento <img> es descendiente de un elemento de enlace (<a>) con una URL válida. Se trata de un atributo binario, por lo que su inclusión activa esta función; sin requerir valor.
Formatos de imagen
Existen muchos formatos de imagen diferentes. HTML no impone ninguna norma sobre el formato que se debe usar; pero si se usa un formato inusual es probable que algún navegador tenga problemas y no pueda mostrarla correctamente. Los formatos más habituales son: BMP, JPEG, PNG, GIF y SVG.
Pero, ¿qué formato es conveniente usar?
Formato BMP
El formato BMP (Windows Bitmap) fue creado en los 90 por Microsoft e IBM, y puede guardar imágenes con una profundidad de color de 24 bits (16,7 millones de colores). Este formato de imagen asigna a cada píxel un valor cromático sin comprimir. No se recomienda usar este formato para compartir imágenes en Internet porque ocupan una mayor cantidad de memoria, pero sí para guardarlas offline.
Formato JPEG
El formato JPEG (Joint Photographic Experts Group) utiliza un algoritmo de compresión con pérdida de calidad, reduciendo considerablemente el tamaño del archivo de imagen. Una vez que se ha comprimido la imagen, es imposible descomprimirla y recuperar la versión original. Se puede comprimir con diferentes grados de pérdida de calidad, y es el formato más utilizado.
Formato GIF
El formato GIF (Graphics Interchange Format) utiliza un algoritmo de compresión sin pérdida de calidad, pero tiene la limitación de alcanzar una profundidad de color de 256 colores. Por lo tanto, este formato es útil para imágenes con pocos colores, como gráficos sin gradientes, mapas conceptuales o dibujos simples. El formato GIF permite guardar varios fotogramas que pueden componer una animación.
Formato PNG
El formato PNG (Portable Network Graphics) utiliza un algoritmo de compresión sin pérdida de calidad. A diferencia del formato GIF, el PNG permite guardar imágenes con una profundidad de color de 24 bits, solventando las deficiencias del formato GIF. Las imágenes comprimidas en formato PNG ocupan menos que en formato BMP, pero algo más que en formato JPEG.
Formato SVG
El formato SVG (Scalable Vector Graphics) permite guardar gráficos vectoriales, por lo que contiene código XML en vez de un mapa de bits. Su especificación es un estándar abierto creado por la W3C en 1999. Cada vez se utiliza más en el desarrollo web, ya que se puede manipular con CSS y JavaScript.
Conclusión
Para fotos normales usa el formato JPEG comprimido a una calidad aceptable; para imágenes en las que se quiera conservar la calidad (logos, anuncios, gráficos, presentaciones) o se requiera que tengan transparencia usa el formato PNG; para imágenes en las que se quiera conservar la calidad pero que tengan una paleta de máximo 256 colores, o animaciones simples, usa el formato GIF; y para gráficos vectoriales escalables usa el formato SVG.
