MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This translation is incomplete. Please help translate this article from English.

Al principi, la web era només text, i era realment molt avorrit. Afortunadament, no va passar massa temps abans d'afegir la capacitat d'incrustar imatges (i altres tipus més interessants de contingut) dins de les pàgines web. Hi ha altres tipus de multimèdia a tenir en compte, però és lògic començar amb l'element humil <img>, que s'utilitza per incrustar una imatge en una pàgina web senzilla. En aquest article veurem com utilitzar-lo en profunditat, incloent conceptes bàsics, anotant-ho amb subtítols utilitzant <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 del treballar amb arxius, familiaritzar-se  amb els fonaments  HTML (s'explica en Inici en HTML.)
Objectiu: Aprendre a incrustar imatges simples en HTML, anotant-les amb subtítols, i com es relacionen les imatges HTML amb les imatges de fons CSS.

Com posar una imatge en una pàgina web?

Per posar una simple imatge en una pàgina web, s'utilitza l'element <img>. Aquest és un element buit (el 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 (pronunciat sarc, de vegades es diu amb el seu títol complet, source). L'atribut src conté una ruta que apunta a la imatge que es vol incrustar a la pàgina, pot ser una adreça URL relativa o absoluta, de la mateixa manera que l'element <a> el valor de l'atribut href (hauríeu de llegir una 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 està en el mateix directori que la pàgina HTML, es podria incloure la imatge d'aquesta manera:

<img src="dinosaur.jpg">

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

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

I així.

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

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

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

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

Atenció: La majoria de les imatges són de propietat. No mostrar una imatge a la pàgina web a menys que 1) sou el propietari de la imatge, 2) que s'ha rebut explícitament, el permís per escrit del propietari de la imatge, o 3) que es tenen àmplies proves que la imatge és, de fet, de domini públic. les violacions de drets d'autor és il·legal i immoral.

A més, mai apuntar l'atribut src a una imatge allotjada a la pàgina web d'algú que no es tingui permís per enllaçar. Això es diu "hotlinking" - de nou, el robatori d'ample de banda d'algú és il·legal i incorrecte (també redueix la velocitat de la pàgina, i no es té control sobre si la imatge s'elimina o substitueix amb alguna cosa enutjosa.)

El codi anteiror ens donaria el següent resultat:

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

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

Nota: Es pot trobar l'exemple al final d'aquesta secció, s'executa en Github (veure el codi font també.)

Text alternatiu

El següent atribut que veurem és alt - el seu valor se suposa que és una descripció textual de la imatge, per utilitzar 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 forma més fàcil de provar el text alternatiu és escriure malament el nom de l'arxiu. Si, per exemple, el nom de la imatge ho lletregem com dinosooooor.jpg, el navegador, no mostrarà la imatge - mostrarà el text alternatiu al seu lloc.

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

Llavors, per què veure alguna vegada o necessita el text alternatiu? Pot ser útil en diverses situacions:

  • L'usuari és discapacitat visual, i usa un lector de panatalla per llegir el web - en aquest cas, tenir text alternatiu disponible per a descriure les imatges és de fet molt útil!
  • Com s'ha descrit anteriorment, és possible que s'hagi escrit el nom de l'arxiu o el camí equivocat.
  • El navegador no és compatible amb el tipus d'imatge. Algunes persones encara utilitzen navegadors només text, com Lynx, que mostra el text alternatiu de les imatges.
  • Es vol proporcionar una mica de text per als motors de cerca per al seu ús - els motors de cerca podem fer coincidir amb 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 (especialment comú en els telèfons mòbils, als països on l'ample de banda és limitat i car.)

Què és exactament el que s'ha d'escriure dins de l'atribut alt? Depèn de per què la imatge està allà en primer lloc (en altres paraules, el que 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 el contingut que no té cap ús per a l'usuari. Les imatges decoratives realment no pertanyen al codi HTML de totes maneres - CSS background images ha de ser utilitzat per a la inserció de la decoració - però si és inevitable, alt = "" és el millor camí a seguir.
  • Contingut. Si la imatge proporciona informació important, proporcionar la mateixa informació en un breu text alternatiu, o millor encara, en el text principal que tothom pogui veure. No escriure text alternatiu redundant (el molest que seria, per a un usuari amb vista, si tots els paràgrafs estiguessin escrits dues vegades en el contingut principal?). Si la imatge és descrita adequadament en el cos del text principal, només es pot utilitzar alt = "".
  • Enllaç. Si es posa una imatge dins de les etiquetes <a> per convertir una imatge en un enllaç, hem de proporcionar el text del vincle accesible - en aquest cas es pot escriure dins del mateix element <a> o dins de l'atribut alt de la imatge, si funciona millor.
  • Text. No s'ha de posar el text en imatges (si el encapçalament principal necessita una petita ombra, per exemple, utilitzar 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 utilitzable fins i tot quan les imatges no es poden veure, on els usuaris no perdin cap dels continguts. Intentar desactivar les imatges en el navegador i veure com són les coses. Aviat ens adonarem de com el text alternatiu inútil és com "logo" o "my favourite place", si la imatge no es pot veure.

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

Ampla i alt

Es pot utilitzar els atributs width i height per 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 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 dóna com a resultat una gran diferència a la pantalla, en circumstàncies normals, però si no es mostra la imatge (per exemple, l'usuari només ha navegat a la pàgina, i la imatge no s'ha carregat encara,) es donarà compte que el navegador deixa un espai perquè la imatge aparegui en:

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

Aquesta és una bona cosa - ja que els resultats en la càrrega de la pàgina és més ràpid i sense problemes.

No s'ha d'alterar la mida de les imatges utilitzant atributs HTML - si s'estableix la mida massa gran acabarem amb imatges que es veuren granulades/difuses; massa petita, s'estarà malbaratant l'ample de banda mitjançant la descàrrega d'una imatge que és molt més gran del que és necessari. 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 posar la imatge en la mida correcta abans de posar-la a la pàgina web.

Nota: Si s'acaba necessitant alterar la mida d'una imatge, utilitzar CSS en lloc d'HTML.

Image titles

De la mateixa manera que amb els enllaços, també es pot afegir l'atribut
title a les imatges per proporcionar informació de suport addicional si és necessari. 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 apareixa un tooltip, igual que amb els títols dels enllaços:

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

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

Aprenentatge actiu: incrustar una imatge

Ok, el vostre torn! En aquesta secció d'aprenentatge actiu ens agradaria que juguéssiu amb un exercici d'incrustació simple. Està proveït d'una etiqueta bàsica <img>; ens agradaria que incrustéssiu la imatge que es troba en la següent URL:

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

Sí, hem dit anteriorment que no es fes hotlink d'imatges en altres servidors. Però això és només per a fins de demostració - us deixarem només per aquesta vegada.

També us agradaria:

  • 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 200px d'ample i 171px d'alt), i després experimentar amb altres valors per veure quin és l'efecte.
  • Establir un title a la imatge.

Si cometeu un error, sempre es pot restablir amb el botó de Reinici. Si quedeu realment encallats, feu clic al botó Mostra solució per veure una resposta.

Descriure imatges amb figures i llegendes de figures

Parlant de llegendes, hi ha una sèrie de maneres en què es podria afegir un títol que fora juntament amb la imatge. Per exemple, no hi hauria res que impedís 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é - conté el contingut que necessita, i està molt bé amb l'ùs d'estils CSS. Però hi ha un problema aquí - no hi ha res que vinculi semànticament la imatge a la seva llegenda, aixó pot causar problemes per als lectors de pantalla, per exemple, (Quan es té 50 imatges i llegendes, quina llegenda va amb quina imatge?)

Una millor solució és utilitzar els elements HTML5 <figure> i <figcaption>, que s'han creat precisament per a aquest propòsit - proporcionar un recipient semàntic per a les figures, que vincula 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 ext-alternatiu alt tenen funcions diferents. Les llegendes beneficien fins i tot a les persones que poden veure la imatge, mentre que el text-alternatiu alt proporciona la mateixa funcionalitat que una imatge absent. Per tant, les llegendes i el text-alternatiu no poden dir el mateix, perquè tots dos apareixen quan la imatge s'ha anat. Intentar desactivar les imatges en el navegador i veure com es veuen les coses.

Recordeu que una figura no ha de 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
  • Pot anar en diversos llocs en el flux lineal de la pàgina
  • Proporciona informació essencial per donar suport al text principal

Una figura podria ser diverses 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, ens agradaria que agaféssiu el codi acabat de la secció anterior de l'aprenentatge actiu, i convertir-lo en una figura:

  • Emboliqueu-ho en un element <figure>.
  • Copieu el text de l'atribut title, elimimeu l'atribut title, a continuació, posar el text dins d'un element <figcaption> sota de la imatge.

Si cometeu un error, sempre es pot restablir amb el botó de Reinici. Si quedéssiu realment encallats, feu clic al botó Mostra solució per veure una resposta.

Imatges de fons de CSS

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

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

La imatge incrustada resultant possiblement és més fàcil de posicionar i controlar que les imatges HTML, així perquè molestar-nos amb les imatges HTML? Com s'ha insinuat anteriorment, les imatges de fons de CSS són només per decoració - Si el que es desitja és afegir una cosa bonica a la pàgina per millorar l'aspecte visual, això està molt bé, però aquest tipus d'imatges no tenen cap significat semàntic en absolut - no poden tenir qualsevol text equivalent, són invisibles per als lectors de pantalla, etc., Aquí és on brillen les imatges HTML.

Per tant, si una imatge té sentit en termes del seu contingut, s'ha d'utilitzar una imatge en HTML. Si una imatge és purament decoració, s'ha 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 cobert imatges i llegendes en detall. En el següent article ens mouren en un nivell superior, mirant com utilitzar HTML per incrustar vídeo i àudio a les pàgines web.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,