{"id":628,"date":"2016-06-15T15:34:35","date_gmt":"2016-06-15T13:34:35","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/usiamo-adesso-le-immagini-responsive\/"},"modified":"2016-06-15T15:34:35","modified_gmt":"2016-06-15T13:34:35","slug":"usiamo-adesso-le-immagini-responsive","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/usiamo-adesso-le-immagini-responsive\/","title":{"rendered":"Usiamo adesso le immagini responsive"},"content":{"rendered":"<div class=\"paragrafo\">\n<p>Fin da quando <a href=\"http:\/\/alistapart.com\/article\/responsive-web-design\">Ethan Marcotte ha cominciato a parlare di responsive web design nel 2010<\/a>, gli sviluppatori e i designer si sono dati da fare per trovare dei modi per gestire la questione delle immagini responsive. \u00c8 un <a href=\"https:\/\/css-tricks.com\/responsive-images-hard\/\">problema spinoso<\/a> perch\u00e9 stiamo inviando lo stesso sito web, con le stesse sorgenti di immagini, a una gran variet\u00e0 di device con larghezze diverse. Volete un&#8217;immagine sfuocata e pixellata su un grande display? Oppure volete caricare un&#8217;immagine enorme (oh ma \u00e8 cos\u00ec bella!) sul vostro telefono cellulare? Siamo in un vicolo cieco.<\/p>\n<p>Moltissima gente intelligente, ossia il <a href=\"https:\/\/www.w3.org\/community\/respimg\/\">Responsive Issues Community Group (RICG)<\/a> si \u00e8 messa a lavorare assieme per risolvere lo stallo di questa situazione. Grazie a loro, l&#8217;elemento <code>picture<\/code> e gli attributi <code>srcset<\/code> e <code>sizes<\/code> stanno per essere inseriti nella draft della <a href=\"http:\/\/www.w3.org\/TR\/html51\/\">specifica HTML 5.1<\/a>. Dal momento che non possiamo prevedere dove e in che modo gli utenti visualizzeranno i nostri siti web, dobbiamo fare in modo che siano i browser stessi a scegliere l&#8217;immagine migliore per la situazione. La nuova specifica gestir\u00e0 le seguenti questioni:<\/p>\n<ul>\n<li>selezione basata sul device-pixel-ratio<\/li>\n<li>selezione basata sulla viewport<\/li>\n<li>selezione basata sull&#8217;art direction<\/li>\n<li>selezione basata sul formato dell&#8217;immagine<\/li>\n<\/ul>\n<p>La specifica introduce anche due nuovi attributi &#8211; <code>srcset<\/code> e <code>sizes<\/code> &#8211; per l&#8217;elemento <code>img<\/code>. <code>srcset<\/code> ci permette di dichiarare un insieme di file sorgenti per l&#8217;immagine, che i browser invieranno secondo alcune condizioni che noi specificheremo usando i descrittori. I descrittori <code>x<\/code> indicano la densit\u00e0 in pixel dell&#8217;immagine, mentre i descrittori <code>w<\/code> indicano la larghezza delle immagini: i browser useranno queste informazioni per scegliere l&#8217;immagine appropriata tra quelle elencate. L&#8217;attributo <code>sizes<\/code> fornisce al browser un contesto sulle dimensioni dell&#8217;elemento immagine che dovr\u00e0 essere visualizzato e dovr\u00e0 essere incluso quando si usa <code>srcset<\/code> con i descrittori <code>w<\/code>. Questo \u00e8 particolarmente importante per le immagini a larghezza variabile, di cui parler\u00f2 pi\u00f9 dettagliatamente in seguito.<\/p>\n<p>La cosa importante \u00e8 che adesso abbiamo l&#8217;opzione di inviare immagini di qualit\u00e0 diversa oppure possiamo gestire l&#8217;aspetto dell&#8217;art direction delle immagini basandoci sulla viewport dell&#8217;utente, senza dover fare un setup complicato lato server. Le immagini responsive diventeranno parte integrante della specifica di HTML e, alla fine, tutti i browser supporteranno questa soluzione.<\/p>\n<p>Ora, facciamo un tour dei tipi di selezione e del modo in cui potete utilizzarli.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Immagini a larghezza fissa: selezione basata sul device-pixel-ratio<\/h2>\n<p>Con l&#8217;introduzione degli schermi Retina, \u00e8 diventato necessario prendere in considerazione non solo la risoluzione di schermo, ma anche la densit\u00e0 di pixel. Gli schermi retina, i display 4K, gli UltraHD hanno tutti molti pi\u00f9 pixel di un display a risoluzione standard della stessa dimensione. Pi\u00f9 pixel = qualit\u00e0 dell&#8217;immagine pi\u00f9 nitida.<\/p>\n<p>Se, per un qualsiasi motivo, avete un&#8217;immagine che verr\u00e0 sempre visualizzata ad una certa larghezza indipendentemente dalla dimensione dello schermo, supponiamo per esempio il logo del sito o un&#8217;immagine profilo, allora la strada che dovrete percorrere \u00e8 quella della selezione basata sul device-pixel-ratio. Il browser sceglier\u00e0 quale immagine caricare basandosi sul suo rapporto device-pixel.<\/p>\n<p>In pratica, l&#8217;attributo <code>srcset<\/code> elenca l&#8217;insieme di immagini sorgente a cui il browser pu\u00f2 attingere per scegliere quale caricare. \u00c8 un elenco separato da virgole. Il descrittore <code>x<\/code> indica il rapporto device-pixel dell&#8217;immagine. A seconda dell&#8217;ambiente in cui opera, il browser utilizzer\u00e0 questa informazione per selezionare l&#8217;immagine appropriata. Un qualsiasi browser che non comprenda <code>srcset<\/code> caricher\u00e0 semplicemente l&#8217;immagine dichiarata nell&#8217;attributo <code>src<\/code>.<\/p>\n<pre id=\"snippet1\" class=\" language-markup\"><code class=\" language-markup\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>crest-383.jpg 1.5x, crest-510.jpg 2x<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>crest-255.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>USWNT crest<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\n<\/code><\/pre>\n<div class=\"illustration full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/06\/crest-255.jpg\" border=\"0\" alt=\"USWNT crest\" width=\"255\" \/><\/div>\n<p>Un esempio di un&#8217;immagine a larghezza fissa potrebbe essere il logo del sito, che rimane della stessa dimensione indipendentemente dalla larghezza della viewport. Tuttavia, le immagini relative al contenuto, sono solitamente responsive: le loro dimensioni tendono a cambiare a seconda della viewport. Per questo tipo di immagini, c&#8217;\u00e8 un metodo migliore.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Immagini a larghezza fluida: selezione basata sulla viewport<\/h2>\n<p>Per le immagini a larghezza fluida, usiamo <code>srcset<\/code> con il descrittore <code>w<\/code> e <code>sizes<\/code>. Il descrittore <code>w<\/code> dice al browser la larghezza di ciascuna immagine dell&#8217;elenco. L&#8217;attributo <code>sizes<\/code> \u00e8 anch&#8217;esso un elenco separato da virgole contenente due valori. Nell&#8217;ultima specifica, se <code>srcset<\/code> ha una qualsiasi immagine che utilizza il descrittore <code>w<\/code>, allora pu\u00f2 essere presente anche l&#8217;attributo <code>sizes<\/code>.<\/p>\n<p>Ci sono due valori nell&#8217;attributo <code>sizes<\/code>. Il primo \u00e8 una media condition. Il secondo \u00e8 il source-size-value, che determina la larghezza dell&#8217;immagine data una particolare media condition. Una cosa importante da notare \u00e8 che non potete usare le percentuali come source-size-value: l&#8217;unica lunghezza CSS relativa che potete usare \u00e8 <code>vw<\/code>.<\/p>\n<pre id=\"snippet2\" class=\" language-markup\"><code class=\" language-markup\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>uswnt-480.jpg 480w, \n             uswnt-640.jpg 640w, \n             uswnt-960.jpg 960w,\n             uswnt-1280.jpg 1280w<span class=\"token punctuation\">\"<\/span><\/span> \n     <span class=\"token attr-name\">sizes<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>(max-width: 400px) 100vw, \n            (max-width: 960px) 75vw, \n            640px<span class=\"token punctuation\">\"<\/span><\/span> \n     <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>uswnt-640.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>USWNT World Cup victory<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<div class=\"illustration full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/06\/uswnt-640.jpg\" border=\"0\" alt=\"USWNT World Cup victory\" width=\"90%\" \/><\/div>\n<p>In questo caso, sto dicendo al browser che l&#8217;immagine deve occupare il 100% della larghezza della viewport per larghezze della viewport fino a 400 pixel. Per larghezze della viewport fino a 960 pixel, l&#8217;immagine deve occupare il 75% della larghezza della viewport. E per tutto il resto oltre i 960 pixel, l&#8217;immagine deve essere di 640 pixel. Se non avete familiarit\u00e0 con <code>vw<\/code>, date un&#8217;occhiata al grande articolo di <a href=\"https:\/\/timseverien.com\/\">Tim Severien<\/a> che <a href=\"https:\/\/web-design-weekly.com\/2014\/11\/18\/viewport-units-vw-vh-vmin-vmax\/\">spiega le viewport units<\/a>.<\/p>\n<p>Il browser utilizza l&#8217;informazione da <code>srcset<\/code> e <code>sizes<\/code> per inviare l&#8217;immagine che meglio si addice alle condizioni specificate. Se la viewport del mio browser \u00e8 600 pixel, molto probabilmente mostrer\u00e0 l&#8217;immagine a <code>75vw<\/code>. Il browser cercher\u00e0 di caricare la prima immagine pi\u00f9 larga di 450 pixel, che \u00e8 <code>uswnt-480.jpg<\/code>. Se sono su un display Retina con un rapporto device-pixel di 2, allora il browser cercher\u00e0 di caricare la prima immagine pi\u00f9 larga di 900 pixel, che dovrebbe essere <code>uswnt-960.jpg<\/code>. Non possiamo essere sicuri esattamente di quale immagine verr\u00e0 inviata perch\u00e9 ogni browser ha una certa libert\u00e0 di azione sul modo in cui il suo algoritmo sceglie un&#8217;immagine appropriata basandosi sull&#8217;informazione che noi gli forniamo. Questo \u00e8 il significato di \u201cselezione basata sulla viewport\u201d.<\/p>\n<p>Poich\u00e9 i primi due esempi mostrano la stessa immagine con diversi livelli di qualit\u00e0, \u00e8 sufficiente il solo attributo <code>srcset<\/code>. Di nuovo, se siete preoccupati per i browser legacy, \u00e8 per questo motivo che c&#8217;\u00e8 <code>src<\/code>: quei browser la tratteranno semplicemente come un&#8217;immagine regolare e la caricheranno da <code>src<\/code>. Se desiderate mostrare immagini leggermente diverse a larghezze diverse, per esempio, vorrete mostrare solo le parti critiche di un&#8217;immagine a larghezze pi\u00f9 piccole, perci\u00f2 dovrete usare l&#8217;elemento <code>picture<\/code>.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2><code>picture<\/code>: selezione basata sull&#8217;art direction<\/h2>\n<p>L&#8217;elemento <code>picture<\/code> \u00e8 come un wrapper per l&#8217;immagine e i suoi file sorgenti. I browser hanno ancora bisogno di <code>img<\/code> per sapere che devono inviare un&#8217;immagine: senza <code>img<\/code> non visualizzano nulla. <code>source<\/code> fornisce al browser delle versioni alternative dell&#8217;immagine da mostrare. La selezione basata sull&#8217;art direction \u00e8 utilizzata nelle situazioni in cui vogliamo mostrare una specifica immagine ad uno specifico breakpoint. Non c&#8217;\u00e8 alcuna ambiguit\u00e0 in termini di selezione dell&#8217;immagine quando si usa l&#8217;elemento <code>picture<\/code>.<\/p>\n<pre id=\"snippet3\" class=\" language-markup\"><code class=\" language-markup\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>picture<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source<\/span> <span class=\"token attr-name\">media<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>(min-width: 960px)<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>ticker-tape-large.jpg<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source<\/span> <span class=\"token attr-name\">media<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>(min-width: 575px)<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">srcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>ticker-tape-medium.jpg<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>ticker-tape-small.jpg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>USWNT ticker-tape parade<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>picture<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><img decoding=\"async\" src=\"Using%20Responsive%20Images%20%28Now%29%20%C2%B7%20An%20A%20List%20Apart%20Article_files\/ticker-tape-small.jpg\" border=\"0\" alt=\"USWNT ticker-tape parade\" width=\"100%\" \/><\/p>\n<p>In questo esempio, quando la viewport \u00e8 pi\u00f9 larga di 960 pixel, viene caricata una versione landscape-oriented dell&#8217;immagine (<code>ticker-tape-large.jpg<\/code>). Per larghezze maggiori di 575 pixel, il browser carica invece un&#8217;immagine portrait-oriented di cui \u00e8 stato fatto un crop (<code>ticker-tape-medium.jpg<\/code>). E per larghezze minori di 575 pixel, l&#8217;immagine (<code>ticker-tape-small.jpg<\/code>) caricata \u00e8 stata ritagliata cos\u00ec da essere focalizzata solo su una giocatrice.<\/p>\n<p>L&#8217;elemento <code>picture<\/code> \u00e8 backwards compatible: i browser che non supportano l&#8217;elemento <code>picture<\/code> mostreranno <code>img<\/code> come al solito. Tutti gli attributi standard delle immagini, come <code>alt<\/code>, dovrebbero essere applicati a  <code>img<\/code>, non a <code>picture<\/code>.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2><code>source<\/code>: selezione basata sul formato dell&#8217;immagine<\/h2>\n<p>Negli ultimi anni sono apparsi dei nuovi formati per le immagini, che offrono una qualit\u00e0 migliore con dimensioni di file minori. Sembra una buona cosa, no? S\u00ec, lo \u00e8, finch\u00e9 non realizzate che nessuno di questi formati \u00e8 universalmente supportato in tutti i browser. WebP di Google ha un&#8217;ottima performance, ma viene supportato nativamente solo da Chrome e Opera. JPEG-XR, originariamente noto come HD Photo, era un formato immagine proprietario rilasciato da Microstoft, supportato solo da Internet Explorer. Se volete saperne di pi\u00f9, Zoltan Hawryluk ha fatto <a href=\"http:\/\/www.useragentman.com\/blog\/2015\/01\/14\/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr\/\">un&#8217;analisi dettagliata<\/a> di questi nuovi formati.<\/p>\n<pre id=\"snippet4\" class=\" language-markup\"><code class=\" language-markup\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>picture<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>image\/vnd.ms-photo<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>wwc2015.jxr<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>image\/jp2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>wwc2015.jp2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>source<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>image\/webp<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>wwc2015.webp<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>wwc2015.png<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>WWC 2015<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>picture<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p>Dal momento che <code>source<\/code> ha anche un attributo <code>type<\/code>, specificando il MIME type di ciascuna immagine, i browser possono scegliere la prima sorgente che abbia l&#8217;attributo <code>type<\/code> di un MIME type supportato. L&#8217;ordine delle sorgenti \u00e8 importante, in questo caso, ma se il browser non riconosce alcun tipo di immagine, ritorner\u00e0 semplicemente all&#8217;elemento <code>img<\/code> originale.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Posso usare tutto questo gi\u00e0 adesso?<\/h2>\n<p>Al momento in cui scrivo, <code>picture<\/code> \u00e8 supportato dalle ultime release stabili di Firefox, Chrome e Opera. Safari e Internet Explorer non supportano per niente <code>picture<\/code> nativamente. <code>srcset<\/code> se la passa leggermente meglio, con supporto pieno nelle ultime release stabili di Firefox, Chrome e Opera e con supporto parziale in Safari 8 e Internet Explorer Edge, in cui \u00e8 permesso l&#8217;uso dei descrittori <code>x<\/code> per cambiare risoluzione, ma non dei descrittori <code>w<\/code>.<\/p>\n<p>C&#8217;\u00e8 un certo numero di polyfill per la gestione di questo problema relativo al supporto. Quello pi\u00f9 noto probabilmente \u00e8 <a href=\"http:\/\/scottjehl.github.io\/picturefill\/\">picturefill<\/a> di Scott Jehl. Attualmente, io sto usando <a href=\"https:\/\/github.com\/aFarkas\/respimage\">respimage<\/a> di Alexander Farkas sul mio sito. Finalmente, abbiamo raggiunto un punto in cui siamo d&#8217;accordo su una soluzione su come gestire le immagini responsive e questa soluzione viene implementata in tutti i maggiori browser. Anche se la specifica \u00e8 ancora in fase di raffinamento, siamo davvero vicini a una soluzione responsive nativa.<\/p>\n<p>E se volete essere super-aggiornati, vi raccomando tantissimo di guardare il <a href=\"https:\/\/www.w3.org\/community\/respimg\/\">Responsive Issues Community Group<\/a>. Potete anche registrarvi per la loro <a href=\"https:\/\/responsiveimages.org\/\">newsletter<\/a> o seguirli su <a href=\"https:\/\/twitter.com\/respimg\">Twitter<\/a>.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&#8216;ascesa del responsive web design ha messo in moto designer e developer per trovare un modo per inviare immagini responsive ad un&#8217;ampia serie di larghezze di device diverse. In gran parte grazie agli sforzi del Responsive Issues Community Group (RICG), possiamo ora inviare immagini di qualit\u00e0 diverse basandoci sulla viewport dell&#8217;utente piuttosto che su un intricato setup server-side. Chen Hui Jing ci introduce ai nuovi tipi di selezione delle immagini e ci mostra in che modo possiamo farle funzionare per noi.<\/p>\n","protected":false},"author":818,"featured_media":7000799,"comment_status":"open","ping_status":"open","template":"","categories":[147,274],"tags":[],"coauthors":[478],"class_list":["post-628","article","type-article","status-publish","has-post-thumbnail","hentry","category-numero-130-15-giugno-2016","category-responsive-design"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=628"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000799"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=628"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}