Imatges en HTML

Al principi, la web era només text, i resultava molt avorrit. Afortunadament, no va passar gaire temps abans que s’afegís la capacitat d'incrustar imatges (i altres tipus de continguts més interessants) dins de les pàgines web. Hi ha altres tipus de mitjans multimèdia a tenir en compte, però és lògic començar amb l'humil element <img>, que s'utilitza per a incrustar en una pàgina web una imatge simple . En aquest article veurem com utilitzar-lo en profunditat, incloent els conceptes bàsics, com anotar-la amb llegendes amb l’element <figure>, i com es relaciona amb les imatges de fons de CSS.

Requisits previs: Coneixements bàsics d'informàtica, instal·lació de software bàsic, coneixements bàsics de treballar amb arxius, familiaritat amb els fonaments de l’HTML (que exposen en l’article Introducció a l’HTML.)
Objectiu: Aprendre a incrustar imatges simples en HTML i comentar-les amb llegendes, i com es relacionen les imatges HTML amb les imatges de fons CSS.

Posar una imatge en una pàgina web

Per posar una imatge simple en una pàgina web, s'utilitza l'element <img>. Es tracta d’un element buit (que significa que no té contingut de text o etiqueta de tancament) que requereix un mínim d'un atribut per a ser útil: src (de vegades se l’anomena pel nom complet, source). L'atribut src conté una ruta que apunta a la imatge que es vol incrustar a la pàgina, que pot ser una adreça URL relativa o absoluta, de la mateixa manera que en l'element <a> el valor de l'atribut href.

Nota: Fes una lectura de la guia ràpida a les adreces i rutes per refrescar la memòria abans de continuar.

Així, per exemple, si la imatge es diu dinosaur.jpg i és en el mateix directori que la pàgina HTML, la imatge es podria incloure d'aquesta manera:

<img src="dinosaur.jpg">

Si la imatge és en un subdirectori d'imatges dins del mateix directori que la pàgina HTML (que és el que Google recomana per a propòsits de posicionament en cercadors (SEO) / indexació), llavors s'incrusta així:

<img src="images/dinosaur.jpg">

I així succesivament.

Nota: Els motors de cerca també llegeixen els noms d'arxiu d'imatge i els tenen en compte en termes de SEO; per tant, s'ha de donar a la imatge un nom d'arxiu que sigui descriptiu (dinosaur.jpg és millor que img835.png.)

La imatge es pot incloure utilitzant la seva adreça URL absoluta, per exemple:

<img src="https://www.example.com/images/dinosaur.jpg">

Però això no té sentit perquè el navegador té més feina a buscar l'adreça IP del servidor de nou, etc. Gairebé sempre, les imatges del lloc web es mantenen en el mateix servidor que l'HTML.

Atenció: La majoria de les imatges tenen drets de propietat intelectual. No mostris una imatge a la pàgina web si no és que

  • n’ets el propietari,
  • has rebut permís explícit per escrit del propietari de la imatge, o
  • tens proves contundents que la imatge és de domini públic.

Les infraccions dels drets d'autor són il·legals i antiétiques. A més, no incloguis mai en l'atribut src una adreça url que apunti cap a una imatge que estigui allotjada en la pàgina web d'algú, si no tens permís per a enllaçar-la. D’això, se’n diu hotlinking i, un cop més, robar ample de banda d'algú altre és il·legal. També redueix la velocitat de la pàgina, i no tens control sobre la imatge si l’eliminen o la substitueixen per alguna altra cosa que et podria resultar enutjosa.

El codi anterior donaria el resultat següent:

Imatge bàsica d’un dinosaure incrustada en un navegador, amb el text Images in HTML escrit a dalt

Nota: Els elements com <img> i <video> es denominen de vegades elements reemplaçats, perquè el contingut i la mida de l'element el defineix un recurs extern (com una imatge o un arxiu de vídeo), no el contingut propi de l’element.

Nota: Pots trobar l'exemple acabat al final d'aquesta secció, executat a GitHub (consulta’n també el codi font.)

Text alternatiu

L’atribut següent que veurem és alt. El valor d’aquest atribut se suposa que és una descripció textual de la imatge, que s’utilitza en situacions en què la imatge no es pot veure/representar. Per exemple, el codi anterior es pot modificar d'aquesta manera:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

La manera més senzilla de provar el text alternatiu és escriure malament el nom de l'arxiu. Si, per exemple, escrius el nom de la imatge així: dinosooooor.jpg, el navegador no mostrarà la imatge; en lloc d’ella, mostrarà el text alternatiu.

El títol Images in HTML, però aquesta vegada la imatge del dinosaure no es mostra i en lloc de la imatge apareix el text alternatiu.

Llavors, per què hauries de veure o necessitar mai el text alternatiu? Pot ser útil en diverses situacions:

  • L'usuari és discapacitat visual, i usa un lector de pantalla per a llegir el lloc web; en aquest cas, disposar de text alternatiu per a descriure les imatges és molt útil.
  • Com ja hem vist, podries haver escrit malament el nom de l'arxiu o la ruta.
  • El navegador no és compatible amb el tipus d'imatge. Hi ha persones que encara utilitzen navegadors de només text, com Lynx, que mostra el text alternatiu de les imatges.
  • Vols proporcionar una mica de text per a ús dels motors de cerca; els motors de cerca poden associar el text alternatiu amb les consultes de cerca, per exemple.
  • Els usuaris han desactivat les imatges per reduir la transferència de dades i les distraccions (comú sobretot en els dispositius mòbils, en països en què l'ample de banda és limitat i car).

Què s'ha d'escriure exactament dins de l'atribut alt? En primer lloc, depèn de per què la imatge és allà (en altres paraules, què es perd si la imatge no es mostra):

  • Decoració. Si la imatge és només de decoració i no forma part del contingut, s'afegeix un espai en blanc alt = "", de manera que, per exemple, un lector de pantalla no perd el temps llegint un contingut que no té cap utilitat per a l'usuari. De totes maneres, les imatges decoratives no pertanyen realment al codi HTML; per a la inserció de la decoració s’han d’utilitzar imatges de fons CSS (CSS background images), però si és inevitable, alt = "" és el millor camí que cal seguir.
  • Contingut. Si la imatge proporciona informació important, proporciona la mateixa informació en un text alternatiu breu o, millor encara, en el text principal, i que tothom el pugui veure. No escriguis text alternatiu redundant (no resultaria força molest per a un usuari visual que tots els paràgrafs estiguessin escrits dues vegades en el contingut principal?). Si la imatge ja es descriu adequadament en el cos del text principal, pots simplement utilitzar alt = "".
  • Enllaç. Si poses una imatge dins d’una etiqueta <a> per convertir-la en un enllaç, també has de proporcionar text del vincle accessible; en aquest cas, el pots escriure dins del mateix element <a> o dins de l'atribut alt de la imatge, si va més bé.
  • Text. No s'ha de posar el text en imatges (si el encapçalament principal necessita una petita ombra, per exemple, utilitza CSS en lloc de posar el text en una imatge.) Si realment no es pot evitar fer-ho, s'ha de proporcionar el text dins de l'atribut alt.

La clau està en oferir una experiència d’usabilitat fins i tot quan les imatges no es poden veure, en què els usuaris no perdin cap dels continguts. Desactiva les imatges en el navegador i observa com són les coses. De seguida t’adonaràs de com són d’inútils els textos alternatius com «logo» o «el meu lloc web favorit», si la imatge no es pot veure.

Nota: WebAIM, guia del text alternatiu, ofereix una orientació més detallada per al text alternatiu, i és una bona lectura per a més informació.

Amplada i alçada

Es poden utilitzar els atributs width i height per a especificar l'amplada i l'alçada de la imatge (es pot trobar l'amplada i l'alçada de la imatge de moltes maneres, per exemple en Mac es pot utilitzar Cmd + I per a obtenir la visualització de la informació de l'arxiu d'imatge). Tornant al nostre exemple, poden fer això:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341">

Això no dona com a resultat una gran diferència a la pantalla en circumstàncies normals, però si no la imatge es mostra (per exemple, perquè l'usuari acaba d’acccedir a la pàgina i la imatge encara no s'ha carregat) veuràs que el navegador deixa un espai perquè la imatge aparegui:

El títol Images in HTML amb el text alternatiu per al dinosaure, que es mostra dins de la caixa que resulta de configurar l’amplada i l’alçada

Això és bo perquè la càrrega de la pàgina resulta més ràpida i suau.

La mida de les imatges no s'ha d'alterar utilitzant atributs HTML; si s'estableix la mida massa gran, les imatges es veuran granulades/difuses; si la mida es fa massa petita, es malbarata ample de banda amb la descàrrega d'una imatge que és molt més gran del que cal. La imatge també pot acabar semblant distorsionada, si no es manté la relació d'aspecte correcta. S'ha d'utilitzar un editor d'imatges per a posar la imatge en la mida correcta abans de posar-la a la pàgina web.

Nota: Si has d’alterar la mida d'una imatge, utilitza CSS en lloc d'HTML.

Títols d’imatge

De la mateixa manera que amb els enllaços, també es pot afegir l'atribut title a les imatges per a proporcionar informació de suport addicional, si cal. En el nostre exemple, podríem fer això:

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

Això ens fa aparèixer un indicador de funció (tooltip), igual que amb els títols dels enllaços:

La imatge del dinosaure amb un indicador de funció a la part de dalt que diu: Un T-Rex exposat al museu de la Universitat de Manchester

Els títols d'imatge no són essencials, i sovint és millor incloure'ls com a informació de suport en el text principal de l'article, en lloc d’associar-los a la imatge. Són útils en algunes circumstàncies, per exemple quan en una galeria d'imatges no hi ha espai per als subtítols.

Aprenentatge actiu: incrustar una imatge

Doncs, ara et toca a tu! En aquesta secció d'aprenentatge actiu volem que juguis amb un exercici d'incrustació simple. Disposes d'una etiqueta bàsica <img>, i volem que incrustis la imatge que hi ha en la següent URL:

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

Sí, ja hem dit que no s’ha de fer hotlink d'imatges a altres servidors. Però això és només a tall de demostració; et deixem fer-ho, només aquesta vegada!

Potser també voldries:

  • Afegir una mica de text alternatiu i comprovar que funciona quan l'adreça URL de la imatge està mal escrita.
  • Establir l'amplada i l'alçada correcta de la imatge (pista: és 200 px d'ample i 171 px d'alt), i experimentar amb altres valors per a veure’n l’efecte.
  • Establir un title per a la imatge.

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per a veure una solució.

Descriure imatges amb figures i peus d'imatge

Hi hauria moltes maneres possibles d’afegir una llegenda associada a la teva imatge. Per exemple, no hi hauria res que impedís de fer això:

<div class="figure">
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

Això està bé. Inclou el contingut que necessita, i es fa un ús correcte de l’aplicació d’estil amb CSS. Però hi ha un problema: no hi ha res que vinculi semànticament la imatge a la seva llegenda, i això pot causar problemes als lectors de pantalla, per exemple (quan hi ha 50 imatges i llegendes, quina llegenda va amb quina imatge?).

Una solució més encertada és utilitzar els elements <figure> i <figcaption> d’HTML5, que s'han creat precisament amb aquest propòsit: proporcionar un contenidor semàntic per a les figures, que vinculi clarament la figura amb la llegenda. El nostre exemple anterior es podria reescriure així:

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">

  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>

L'element <figcaption> indica als navegadors i la tecnologia d'assistència que la llegenda descriu la resta del contingut de l'element <figure>.

Nota: Des d'un punt de vista d'accessibilitat, les llegendes i el text alternatiu alt tenen funcions diferents. Les llegendes beneficien fins i tot les persones que poden veure la imatge, mentre que el text alternatiu alt fa la mateixa funció que una imatge, quan aquesta no hi és. Per tant, les llegendes i el text alternatiu no poden dir el mateix, perquè tots dos elements apareixen quan la imatge no hi és. Intenta desactivar les imatges en el navegador i observa com es veuen les coses.

Recordeu que una figura no té per què ser una imatge; una figura és una unitat independent del contingut que:

  • Expressa el seu significat en una forma compacta i d'una manera fàcil d'entendre.
  • Podria anar en diversos llocs del flux lineal de la pàgina.
  • Proporciona informació essencial que dona suport al text principal.

Una figura podria ser un conjunt d’imatges, un fragment de codi, àudio o vídeo, equacions, una taula, o alguna altra cosa.

Aprenentatge actiu: crear una figura

En aquesta secció d'aprenentatge actiu, et demanarem que agafis el codi acabat de la secció d'aprenentatge actiu anterior, i el converteixis en una figura:

  • Etiqueta’l amb un element <figure>.
  • Copia el text de l'atribut title, elimina’n l'atribut title; a continuació, posa el text dins d'un element <figcaption> a sota de la imatge.

Si t’equivoques, sempre pots tornar a començar amb el botó de Reinicia. Si t’encalles, fes clic al botó Mostra la solució per a veure una solució.

Imatges de fons de CSS

També pots utilitzar CSS per a incrustar imatges en pàgines web (i JavaScript, però això és una altra història). La propietat background-image de CSS, i les altres propietats background* s'utilitzen per a controlar la col·locació de la imatge de fons. Per exemple, per a posar una imatge de fons en cada paràgraf d’una pàgina, es podria fer això:

p {
  background-image: url("images/dinosaur.jpg");
}

La imatge incrustada que resulta possiblement és més fàcil de posicionar i controlar que les imatges HTML; aleshores, per què ens hem de molestar amb les imatges HTML? Com ja hem insinuat abans, les imatges de fons de CSS són només per a decoració. Si només volem afegir una cosa bonica per a millorar l'aspecte visual de la pàgina, això està molt bé, però aquest tipus d'imatges no tenen cap significat semàntic en absolut —no poden tenir text equivalent—, són invisibles per als lectors de pantalla, etc. Aquí és on destaquen les imatges HTML.

Per tant, si una imatge té sentit en termes de contingut, s'ha d'utilitzar una imatge en HTML. Si una imatge és purament decorativa, s'han d'utilitzar imatges de fons CSS.

Nota: Aprendreu molt més sobre imatges de fons CSS en el nostre tema CSS.

Sumari

Això és tot per ara. Hem exposat les imatges i les llegendes amb detall. En l’article següent ens mourem en un nivell superior, i aprendrem com utilitzar HTML per a incrustar vídeo i àudio a les pàgines web.