path: root/files/ca/learn/html/multimedia_and_embedding/responsive_images/index.html

---
title: Imatges sensibles
slug: Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles
tags:
  - Article
  - Beginner
  - CodingScripting
  - Design
  - Graphics
  - Guide
  - HTML
  - Image
  - Intermediate
  - img
  - sizes
  - srcset
translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>

<div>
<p class="summary">En aquest article aprendrem sobre el concepte de les imatges sensibles - imatges que funcionen bé en dispositius amb diferentes mides de pantalles, resolucions i altres característiques semblants - i veurem les eines que proporciona HTML per ajudar-nos a posar-les en pràctica. Imatges sensibles és només una part del (i prepara l'escenari per) disseny web sensible, un tema que aprendrem molt més en un futur mòdul del <a href="/en-US/docs/Learn/CSS">tema CSS</a>.</p>
</div>

<table class="learn-box nostripe standard-table">
 <tbody>
  <tr>
   <th scope="row">Requisits previs:</th>
   <td>Heu de coneixer el fonaments <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">bàsics d'HTML</a> i com <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">afegir imatges estàtiques a una pàgina web</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectius:</th>
   <td>Aprendre com utilitzar funcions com {{htmlattrxref("srcset", "img")}} i l'element {{htmlelement("picture")}} per implementar solucions d'imatges sensibles en els llocs web.</td>
  </tr>
 </tbody>
</table>

<h2 id="Per_què_les_imatges_sensibles"><span class="short_text" id="result_box" lang="ca"><span>Per què</span> <span>les</span> <span>imatges</span> <span>sensibles</span></span> ?</h2>

<p>Llavors, quin problema estem tractant de resoldre amb imatges sensibles? Examinarem un escenari típic. Un lloc web típic, probablement, té una imatge de capçalera perquè es vegi bonic per als visitants, a més, potser algunes imatges de contingut per sota d'aquesta. És possible que vulgueu fer que la capçalera abasti la totalitat de l'amplada de la mateixa, i la imatge de contingut en formi part, en algun lloc, dins de la columna de contingut. Fem una ullada a un exemple senzill d'això:</p>

<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>

<p>Això funciona bé en un dispositiu de pantalla ampla, com ara un ordinador portàtil o de sobretaula (es pot <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">veure l'example en directa</a> i trobar el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">codi font</a> en Github.) No parlarem tant de la CSS, excepte per dir que</p>

<ul>
 <li>El contingut del cos s'ha ajustat a una amplada màxima de 1200 píxels - en la finestra gràfica anterior l'ample del cos es manté en 1200px i es centrat en l'espai disponible. En la finestra gràfica següent l'ample del cos romandre en el 100% de l'amplada de la finestra gràfica.</li>
 <li>La imatge de capçalera s'ha establert de manera que el seu centre es manté sempre en el centre de la capçalera, no importa quina és l'amplada de la capçalera. Així que si el lloc s'està veient en una pantalla més estreta, el detall important del centre de la imatge (el poble) encara es pot veure, i l'excés es perd per fora de cada costat. És 200 píxels d'alt.</li>
 <li>Les imatges de contingut han estat establertes de manera que si l'element del cos es fa més petit que la imatge, les imatges es comencin a encongir de manera que sempre es quedin a l'interior del cos, en lloc de desbordar-se.</li>
</ul>

<p>Això està bé, però el problema ve quan es comença a veure el lloc en un dispositiu de pantalla estreta - la capçalera es veu bé, però està començant a ocupar molta alçada de la pantalla d'un dispositiu mòbil; la primera imatge de contingut, d'altra banda, es veu terrible - en aquesta grandària amb prou feines es pot veure a la gent!</p>

<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>

<p>Seria molt millor mostrar una versió retallada de la imatge que fixar-se en els detalls importants de la fotografia quan el lloc es veu en una pantalla estreta, i potser una mica entre els dos per a un dispositiu de pantalla d'amplada mitjana com una tauleta - això es coneix comunament com el <strong> problema direcció d'art </strong>.</p>

<p>A més, no hi ha necessitat d'integrar aquest tipus d'imatges de grans dimensions a la pàgina si s'està veient en una petita pantalla de mòbil; això es diu <strong>problema canvi de resolució</strong> - una imatge de trama és un nombre fix de píxels d'ample i un nombre fix de píxels d'alt; com vam veure en fixar-nos en els <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">gràfics de vector</a>, una imatge de trama comença a veure's granulada i horrible si es visualitza més gran que la mida original (mentre que un gràfic vectorial no ho fa). I si es mostra significativament més petita que la mida original, és un malbaratament d'ample de banda - en especial els usuaris de mòbils no volen haver de gravar a través del seu ample de banda la descàrrega d'una imatge gran destinada a escritori, quan una imatge petita faria per al dispositiu. Una situació ideal seria tenir múltiples resolucions disponibles i servir mides adequades, depenent dels diferents dispositius que accedeixen al lloc web.</p>

<p>Per complicar més les coses, alguns dispositius tenen pantalles d'alta resolució que necessiten les imatges més grans del que s'espera que ells necessiten, per mostrar-ho bé. Això és essencialment el mateix problema, però en un context lleugerament diferent.</p>

<p>Es podria pensar que les imatges de vector resoldrien aquests problemes, i ho fan fins a cert punt - tots dos són petits en grandària d'arxiu i s'escalen bé, i han de ser usats sempre que sigui possible. No són adequats per a tot tipus d'imatges però -si bé són excel·lents per a gràfics simples, patrons, elements d'interfície, etc., comença a ser molt complex per crear una imatge basada en vectors amb el tipus de detall que ens agradaria trobar, diguem, una foto. Els formats d'imatge de trama, com JPEG són més adequats per al tipus d'imatges que hem vist en l'exemple anterior.</p>

<p>Aquest tipus de problema no existia quan la primera web va existir, a principis de mitjans dels anys 90 - en aquell temps els únics dispositius que existien per navegar per la web eren de sobretaula i portàtils, de manera que els enginyers de navegadors i escriptors d'especificacions ni tan sols pensaven posar en pràctica solucions. <em>Les tecnologies d'imatges sensibles</em> es van dur a terme recentment per resoldre els problemes indicats anteriorment, ja que permetien oferir el navegador diversos arxius d'imatge, ja sigui tots els que mostraven el mateix, però que contenien un nombre diferent de píxels (<em>resolution switching</em>), o diferents imatges adequades per a diferents assignacions d'espai (<em>art direction</em>)</p>

<div class="note">
<p><strong>Nota</strong>: Les noves característiques que es descriuen en aquest article -  {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} - están totes suportades en les versions pubicades per els escriptoris moderns i navegadors mòbils (incloent el navegador de Microsoft Edge, encara que no amb Internet Explorer.)</p>
</div>

<h2 id="Com_crear_imatges_sensibles">Com crear imatges sensibles?</h2>

<p>En aquesta secció, veurem els dos problemes il·lustrats a dalt i mostrarem com resoldre'ls utilitzant les característiques de la imatge sensible d'HTML. S'ha de tenir en compte que ens centrarem en {{htmlelement("img")}}s d'HTML per aquesta secció, com es veu en l'àrea de contingut de l'exemple anterior - la imatge a la capçalera del lloc és només de decoració, i per tant implementat utilitzant imatges de fons CSS. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS podria dir-se que té millors eines per el disseny sensible</a>, parlarem d'elles en un futur mòdul CSS.</p>

<h3 id="Canvi_de_resolució_Diferents_mides">Canvi de resolució: Diferents mides</h3>

<p>Llavors, quin és el problema que es vol resoldre amb el canvi de resolució? Volem mostrar el mateix contingut d'imatge, major o menor depenent del dispositiu - aquesta és la situació que tenim amb la segona imatge de contingut en el nostre exemple. L'element standard {{htmlelement("img")}} tradicionalment només se li permet apuntar el navegador a un sol arxiu font:</p>

<pre class="brush: html">&lt;img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>

<p>No obstant això, podem utilitzar dos nous atributs - {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}} - per proporcionar diverses imatges fonts addicionals, juntament amb consells per ajudar al navegador a triar el més adequat. Es pot veure un exemple d'això en el nostre exemple <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> en Github (vegeu també <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">el codi font</a>):</p>

<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>

<p>Els atributs <code>srcset</code> i <code>sizes</code> es veuen complicats, però no són tan dolents per entendre si es formaten com es mostra a dalt, amb una part diferent del valor de l'atribut en cada línia. Cada valor conté una llista separada per comes. i cada part de les llistes es componen de tres sub-parts. Recorrerem els continguts de cada, ara:</p>

<p><strong><code>srcset</code></strong> defineix el conjunt d'imatges que permetrà el navegador triar entre,   cada mida d'imatge. Abans de cada coma, escrivim:</p>

<ol>
 <li>Un <strong>nom de fitxer d'imatge</strong> (<code>elva-fairy-480w.jpg</code>.)</li>
 <li>Un espai.</li>
 <li>L'ample de la <strong>imatge inherent en píxels</strong> (480w) - en compte que aquesta utilitza la unitat w, no px com es podria esperar. Aquesta és la mida real de la imatge, que es pot trobar al inspeccionar l'arxiu d'imatge a l'ordinador (per exemple en un Mac es pot seleccionar la imatge en el Finder i preme <kbd>Cmd</kbd> + <kbd>I</kbd> per obrir la pantalla d'informació).</li>
</ol>

<p><strong><code>sizes</code></strong> defineix un conjunt de condicions de medis (per exemple, amples de pantalla) i indica quina mida de la imatge seria millor triar, quan es compleixin certes condicions en els medis - aquests són els consells que parlàvem anteriorment. En aquest cas, abans de cada coma, escrivim</p>

<ol>
 <li>una <strong>condició de medis</strong> ((<code>max-width:480px)</code>) - aprendrem més sobre això en el<a href="/en-US/docs/Learn/CSS"> tema de CSS</a>, però per ara direm que una condició de medis descriu un possible estat en que la pantalla pot estar. En aquest cas, estem dient "quan l'amplada de la finestra gràfica sigui de 480 píxels o menys".</li>
 <li>Un espai.</li>
 <li>L'<strong>amplada de l'espai</strong> de la imatge s'ompli quan la condició del medi sigui certa (<code>440px</code>).</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Per l'ample de l'espai, és possible proporcionar una longitud absoluta (<code>px</code>, <code>em</code>) o una longitud relativa (com un percentatge). Es pot haver notat que l'última amplada de l'espai no té cap condició del medi - Aquest és per defecte el que es tria quan cap de les condicions del medi són certes). El navegador ignora tot després de la primera condició coincident, així que s'ha d'anar amb compte com es demanan les condicions del medi.</p>
</div>

<p>Així, amb aquests atributs en el seu lloc, el navegador:</p>

<ol>
 <li>Mirar l'amplada del dispositiu.</li>
 <li>Calcular quina condició del medi en la llista de <code>sizes</code> (mides) és el primer a ser veritat.</li>
 <li>Mirar la mida de l'espai donat a aquesta consulta de medis.</li>
 <li>Carregar la imatge de referència en la llista <code>srcset</code> que més s'acosti a la mida de l'espai triat.</li>
</ol>

<p>I ja està! Així que en aquest punt, si un navegador de suport amb un ample de 480px de finestra gràfica carrega la pàgina, la condició (<code>max-width: 480px</code>) del medi serà veritat, per tant, es triarà l'espai <code>440px</code>, de manera que el <code>elva-fada-480w.jpg</code> serà carregat, ja que el seu ample inherent (<code>480w</code>) és el més proper a <code>440px</code>. La imatge 800px és de 128 KB en el disc mentre que la versió de 480px és només 63KB - un estalvi de 65KB. Ara imaginem si aquesta era una pàgina que tenia moltes imatges. Usant aquesta tècnica es podria estalviar als usuaris de mòbils una gran quantitat d'ample de banda.</p>

<p>Els navegadors més antics no soportan aquestes característiques, simplement, les ignoran i segueixen endavant i carregan la imatge que es fa referència en l'atribut {{htmlattrxref("src", "img")}} com a normal.</p>

<div class="note">
<p><strong>Nota</strong>: En el {{htmlelement("head")}} del document trobarem la línia <code>&lt;meta name = "viewport" content = "width = device-width"&gt;</code>: això obliga els navegadors mòbils a adoptar l'amplada real de la seva finestra en carregar pàgines web (alguns navegadors mòbils menteixen sobre la seva amplada de la finestra gràfica, i en lloc de carregar pàgines a l'amplada de la finestra gràfica, redueixen la pàgina carregada cap avall, el que no és molt útil per a les imatges o el disseny sensible. Us ensenyarem més sobre això en un mòdul futur).</p>
</div>

<h3 id="Eines_útils_per_a_desenvolupadors">Eines útils per a desenvolupadors</h3>

<p>Hi ha algunes <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupament</a> útils en els navegadors per ajudar en l'elaboració de les amplades d'espai, etc, que són necessàries utilitzar. Quan els estem treballant, carreguem per primera vegada la versió no sensible del exemple (not-responsive.html), després entreu en <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools &gt; Web Developer &gt; Responsive Design View</em>), que ens permetrà mirar els dissenys de pàgina web com si els veiéssim a través d'una varietat de diferents mides de pantalles de dispositius.</p>

<p>S'ha establert l'amplada de la finestra gràfica a 320px llavors 480px; per a cada un entrem al <a href="/en-US/docs/Tools/Page_Inspector">Inspector DOM</a>, fent clic a l'element {{htmlelement("img")}} que ens interessa, després mirem la seva grandària en la pestanya de Box Model view en el costat dret de la pantalla. Això ens ha de donar els amples de imatge inherents que necessita.</p>

<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>

<p>A continuació, es pot comprovar si el srcset ha treballat mitjançant l'establiment de l'amplada de la finestra gràfica que volem (establint una amplada estreta, per exemple), obrim Network Inspector (<em>Tools &gt; Web Developer &gt; Network</em>), a continuació, tornem a carregar la pàgina. Això ens ha de donar una llista de recursos que s'han descarregat per compondre la pàgina web, i aquí es pot comprovar quin arxiu d'imatge va ser triat per a descarregar.</p>

<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>

<h3 id="Canvi_de_resolució_Mateixa_grandària_diferents_resolucions">Canvi de resolució: Mateixa grandària, diferents resolucions</h3>

<p>Si s'està donant suport a múltiples resolucions de pantalla, però tothom veu la imatge a la mateixa grandària real en la pantalla, es pot permetre que el navegador seleccioni una imatge de resolució apropiada utilitzant <code>srcset</code> amb x-descriptors i sense grandaries (<code>sizes</code>) - una sintaxi una mica més fàcil! Es pot trobar un exemple de com es veu en <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (vegeu també <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">el codi font</a>):</p>

<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"&gt;
</pre>

<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">En aquest exemple, el següent CSS s'aplica a la imatge de manera que tindrà una amplada de 320 píxels a la pantalla (també anomenats píxels CSS):</p>

<pre class="brush: css">img {
  width: 320px;
}</pre>

<p>En aquest cas, la grandària (<code>sizes</code>) no és necessaria - el navegador simplement resol la resolució de la pantalla que es mostra, i serveix la imatge més adequada que es fa referència en el <code>srcset</code>. Així, si el dispositiu que accedeixi a la pàgina té un estàndard/de baixa resolució, amb un píxel de dispositiu que representa cada píxel CSS, la imatge <code>elva-fada-320w.jpg</code> serà carregada (el 1x està implícit, pel que no cal incloure). Si el dispositiu té una alta resolució de dos píxels de dispositiu per píxel CSS o més, es carregarà la imatge <code>elva-fada-640w.jpg</code>. La imatge de 640px té 93KB, mentre que la imatge de 320px té només 39KB.</p>

<h3 id="Direcció_d'art">Direcció d'art</h3>

<p>En resum, el <strong>problema de direcció d'art</strong> implica voler canviar la imatge que es mostra per adaptar-se a diferents grandàries de visualització de la imatge. Per exemple, si es mostra un paisatge gran amb una persona al mig en un lloc web quan es veu en un navegador d'escriptori, aquesta es redueix quan es veu el lloc web en un navegador mòbil, es veurà malament, la persona serà molt petita i difícil de veure. Probablement seria millor mostrar una imatge més petita, de retrat en el mòbil, que mostri la persona ampliada. L'element {{htmlelement("picture")}} ens permet implementar exactament aquest tipus de solució.</p>

<p>Tornant al nostre exemple original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> tenim una imatge que necessita molt la direcció d'art:</p>

<pre class="brush: html">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>

<p>Arreglarem això, amb {{htmlelement("picture")}}! Igual que <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> i <code>&lt;audio&gt;</code></a>,  l'element <code>&lt;picture&gt;</code> és un contenidor que conté diversos elements {{htmlelement("source")}} que proporcionen diverses fonts diferents que el navegador pot triar, seguit per l'importantíssim element {{htmlelement("img")}}. El codi de <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> es veu així:</p>

<pre class="brush: html">&lt;picture&gt;
  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
  &lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;
&lt;/picture&gt;
</pre>

<ul>
 <li>Els elements <code>&lt;source&gt;</code> inclouen un atribut <code>media</code> que conté una condició de medis - igual que amb el primer exemple amb <code>srcset</code>, aquestes condicions són les proves que decideixen quina és la imatge que es mostrarà - el primer que retorna veritable és el que es mostrarà. En aquest cas, si l'amplada de la finestra gràfica és 799px d'ample o menys, es mostrarà la primera imatge de l'element <code>&lt;source&gt;</code>. Si l'amplada de la finestra gràfica és 800px o més, serà la segona.</li>
 <li>Els atributs <code>srcset</code> contenen la ruta de la imatge per mostrar. Recordeu que tal com vam veure amb <code>&lt;img&gt;</code> a dalt, <code>&lt;font&gt;</code> pot prendre un atribut <code>srcset</code> amb diverses imatges de referència, i també un atribut <code>sizes</code>. Pel que podria oferir diverses imatges a través d'un element <code>&lt;picture&gt;</code>, però  també podria ofererir múltiples resolucions de cadascuna. Sent realistes, és probable no s'hagin de fer aquest tipus de coses molt sovint.</li>
 <li>En tots els casos, s'ha de proporcionar un element <code>&lt;img&gt;</code>, amb <code>src</code> i <code>alt</code>, just abans de <code>&lt;/picture&gt;</code>, en cas contrari no apareixeran les imatges. Això proporciona un cas per defecte que s'aplicarà quan cap de les condicions de medis retorni cert (en realitat es podria treure el segon element <code>&lt;source&gt;</code> en aquest exemple), i una alternativa per als navegadors que no suporten l'element <code>&lt;picture&gt;</code>.</li>
</ul>

<p>Aquest codi ens permet mostrar una imatge adequada tant en pantalla ampla com en pantalla estreta, com es veu a continuació:</p>

<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>

<div class="note">
<p><strong>Nota</strong>: S'ha d'utilitzar el atribut <code>media</code> només en escenaris de direcció d'art; quan es fa ús de <code>media</code>, no oferir condicions de medis dins l'atribut <code>sizes</code>.</p>
</div>

<h3 id="Per_què_no_podem_fer_això_usant_CSS_o_Javascript">Per què no podem fer això usant CSS o Javascript?</h3>

<p>Quan el navegador comença a carregar una pàgina, s'inicia la descàrrega (precàrrega) d'alguna de les imatges abans que l'analitzador principal hagi començat a carregar i interpretar el CSS i JavaScript de la pàgina. Aquesta és una tècnica útil, que de mitjana ha rebaixat el 20% el temps de càrrega. No obstant això, no és útil per a les imatges sensibles, d'aquí la necessitat d'implementar solucions com <code>srcset</code>. No es podria, per exemple, carregar l'element {{htmlelement("img")}}, després de detectar l'amplada de la finestra gràfica amb JavaScript i canviar dinàmicament la imatge d'origen en una més petita si es desitjes. Per llavors, la imatge original ja hauria estat carregada, i es carregaria també la imatge petita, així, que és encara pitjor en termes d'imatge sensible.</p>

<ul>
</ul>

<h3 id="Utilitzar_formats_d'imatge_moderns_audaçment"><span class="short_text" id="result_box" lang="ca"><span>Utilitzar</span> <span>formats</span> <span>d'imatge</span> <span>moderns</span> <span>audaçment</span></span></h3>

<p>Hi ha diversos nous formats d'imatge emocionants (com WebP i JPEG-2000) que poden mantenir una mida d'arxiu baix i d'alta qualitat al mateix temps. No obstant això, el suport dels navegadors és irregular.</p>

<p>&lt;picture&gt; ens permet continuar atenent els navegadors antics. Es pot subministrar el tipus MIME dins de l'atribut <code>type</code> perquè el navegador pogui rebutjar immediatament tipus d'arxius no compatibles:</p>

<pre class="brush: html">&lt;picture&gt;
  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
&lt;/picture&gt;
</pre>

<ul>
 <li>No utilitzar l'atribut <code>media</code>, llevat que també es necessiti la direcció d'art.</li>
 <li>En un element <code>&lt;source&gt;</code>, només es pot fer referència a les imatges del tipus declarat en <code>type</code>.</li>
 <li>Igual que abans, us convidem a utilitzar llistes separades per comes amb <code>srcset</code> i <code>sizes</code>, segons sigui necessari.</li>
</ul>

<h2 id="Aprenentatge_actiu_La_implementació_de_les_vostres_pròpies_imatges_sensibles">Aprenentatge actiu: La implementació de les vostres pròpies imatges sensibles</h2>

<p>Per a aquest aprenentatge actiu, estem esperant que sigueu valents i sobretot actueu independentment.... Volem que implementeu el vostre propi art adequat dirigit a pantalla estreta/pantalla ampla utilitzant <code>&lt;picture&gt;</code>, i un exemple de canvi de resolució que utilitzi <code>srcset</code>.</p>

<ol>
 <li>Escriure alguna cosa d'HTML senzilla per contenir el codi (usar <code>not-responsive.html</code> com a punt de partida, si es vol)</li>
 <li>Troba una bona imatge apaïsada de pantalla ampla amb algun tipus de detalls continguts en ella en algun lloc. Crear una versió en grandària web de la mateixa utilitzant un editor de gràfics, a continuació, retallar-la per mostrar una part més petita que ampliï el detall, i crear una segona imatge (al voltant de 480px d'ample que és bo per a això).</li>
 <li>Utilitzeu l'element <code>&lt;picture&gt;</code> per implementar un selector d'imatge de direcció d'art!</li>
 <li>Crear diversos arxius d'imatges de diferents mides, cadascun mostrant la mateixa imatge.</li>
 <li>Utilitzeu <code>srcset/size</code> per crear un exemple de canvi de resolució, ja sigui per servir la mateixa imatge a mida en diferentes resolucions, o diferentes mides d'imatges en diferentes amplades de finestra gràfica.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Utilitzeu el devtools del navegador perquè us ajudi a saber quines mides necessiteu, com es va esmentar anteriorment.</p>
</div>

<h2 id="Sumari">Sumari</h2>

<p>Això és un embolcall per a les imatges sensibles - Esperem que hagiu gaudit jugant amb aquestes noves tècniques. Com a resum, hi ha dos problemes diferents que hem estat discutint aquí:</p>

<ul>
 <li><strong>Direcció d'art</strong>: El problema pel qual es volem servir imatges retallades per diferentes disposicions - per exemple, una imatge apaïsada que mostra una escena completa per a un disseny d'escriptori, i una imatge retrat que mostra el tema principal enfocat, estreta per a un disseny mòbil. Això es pot resoldre mitjançant l'element {{htmlelement("picture")}}</li>
 <li><strong>Canvi de resolució</strong>: El problema pel qual es volem servir arxius d'imatge més petits a dispositius de pantalla estreta, ja que no necessiten imatges enormes com a pantalles d'escriptori - i també opcionalment servir imatges de resolució diferent a pantalles d'alta/baixa densitat. Això es pot resoldre usant<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web"> gràfics vectoriasl</a> (imatges SVG) i els atributs {{htmlattrxref ("srcset", "img")}} i {{htmlattrxref ("sizes", "img")}}.</li>
</ul>

<p>Hem arribat al final de tot, dels mòduls <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia i incrustació</a>! L'única cosa que fer ara, abans de seguir endavant, és provar la vostra avaluació multimèdia i veure com us va. Diverteix-te.</p>

<h2 id="Veure">Veure</h2>

<ul>
 <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Excel·lent introducció a les imatges sensibles, per Jason Grigsby</a></li>
 <li>{{htmlelement("img")}}</li>
 <li>{{htmlelement("picture")}}</li>
 <li>{{htmlelement("source")}}</li>
</ul>

<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>