Ciao a tutti. Ero in ritardo con un nuovo articolo (mi sono presa qualche giorno libero e sono andata al mare). Ma spero che con questo articolo rimedierò un po' a questo incidente :)

Il problema delle immagini adattive è abbastanza rilevante, quindi inizierò con un po’ di ragionamento e metodi di implementazione, per poi evidenziare l’opzione che, secondo me, si adatta meglio.

Quindi, circa un anno fa ho pensato che per rendere un'immagine responsive (cioè allungarla o restringerla per adattarla alla larghezza del contenitore), tutto quello che dovevi fare era usare il seguente codice:

Wrapper img( larghezza: 100%; )

E in effetti, in alcuni casi questo può essere limitato. Questo trucco funziona alla grande quando la finestra del browser diventa più piccola. Ma cosa succede se la larghezza del contenitore in cui si trova l'immagine diventa maggiore della risoluzione dell'immagine? Giusto. L'immagine si estende per tutta la larghezza del contenitore, ma la qualità lascia molto a desiderare. Ma cosa succede se hai bisogno del supporto per una risoluzione di 2048x1536px?

Se non usi SVG ed è un'immagine raster, la prima cosa che ti viene in mente è scattare un'immagine che si adatti alla risoluzione massima della pagina di destinazione e quando ridimensioni la finestra del browser, verrà compressa con qualità normale.

E poi sorge il problema delle prestazioni. È stupido per uno smartphone caricare immagini così grandi che sembrano buone con la risoluzione della retina. Dopotutto, la velocità delle reti mobili non è elevata come quella di un PC e alcuni utenti potrebbero non attendere il caricamento della pagina di destinazione sul proprio smartphone. Il risultato è un cliente perso.

Puoi provare a definire diversi div con immagini e quindi, utilizzando le media query, nascondere quelli non necessari e mostrare solo l'immagine che si adatta alla risoluzione corrente.

Sembra che il problema sia stato risolto. Ma il fatto è che i browser, per velocizzare la visualizzazione della pagina, precaricano le immagini scritte in html prima che inizi l'elaborazione del css. Forse non mi sono espresso bene (correggetemi), ma se eseguite questo trucchetto tutte le immagini verranno comunque caricate, indipendentemente da quanto scritto nel css. Ciò significa che abbiamo solo peggiorato la situazione per i dispositivi mobili. Ora dovranno caricare non una, ma diverse immagini.

Puoi verificarlo aprendo gli strumenti per sviluppatori e guardando la scheda "Rete".

In generale, ci sono ancora molti problemi che possono sorgere durante la creazione di immagini adattive. E si sono accumulate anche parecchie soluzioni. Tutto dipende dalla situazione specifica.

In HTML 5 è apparso il tag immagine, che consente di risolvere la maggior parte dei problemi ed è stato creato appositamente per creare un design adattivo (reattivo). Il suo design ricorda i tag video e audio. L'essenza del lavoro è che diverse immagini sono specificate all'interno del tag immagine per risoluzioni dello schermo specifiche. Sembra qualcosa del genere:

La particolarità è che al posto di src viene utilizzato srcset e viene utilizzato qualcosa di simile alle media query. Una piccola immagine viene caricata con una risoluzione inferiore a 319 px. Immagine media con risoluzione da 320px a 480px, ecc.

Puoi vedere l'attuale supporto del browser per il tag immagine in questa pagina.

In generale, quando si utilizzano nuovi tag, consiglio di guardare questo sito e verificare lo stato attuale delle cose.

Come potete vedere, la situazione al momento lascia molto a desiderare. Non c'è supporto sui dispositivi IOS, sui Macbook e su IE (anche se gli utenti IE non si sentono dispiaciuti per loro, devono soffrire :)). Penso che non siamo tutti pronti a perdere così tanti utenti. No, l'ho espresso in modo errato. Non perderlo, perché la nostra immagine principale verrà caricata e visualizzata correttamente. Tuttavia, vorrei non perdere clienti con la tecnologia Apple a causa dei lunghi tempi di caricamento delle pagine, poiché molto probabilmente si tratta di un pubblico solvibile :)

Per sfruttare subito questo tag, è necessario utilizzare un piccolo script (tra i tag head) picturefill.js .

Ora tutti i dispositivi dovrebbero supportare questa struttura per il layout delle immagini adattive. È vero, non l'ho testato su un Mac (non ne ho ancora uno).

A differenza del metodo sopra descritto, ora viene caricata solo un'immagine e non tre, come avveniva prima.

Questo non è un modo complicato. Come si rendono le immagini reattive? Per favore condividi i tuoi metodi nei commenti. Grazie.

In questo breve tutorial, esamineremo i modi più semplici per creare immagini reattive utilizzando i CSS. Esistono diverse soluzioni per rendere le immagini reattive, tutte variano in complessità e grado di supporto del browser. Un esempio di un modo complesso per implementare immagini reattive è utilizzare l'attributo srcset, che richiede più immagini, più markup e dipende anche dal supporto del browser.

Le moderne specifiche ci permettono di rendere flessibili le immagini utilizzate nelle pagine del sito e di visualizzarle correttamente sugli schermi dei diversi dispositivi degli utenti; per questo è sufficiente utilizzare solo alcune proprietà della clip CSS.

Valori di base delle immagini reattive

Cominciamo guardando un esempio base in cui dobbiamo rendere le singole immagini utilizzate nei post, o altri singoli blocchi, completamente reattive. Ad esempio, abbiamo un contenitore a cui abbiamo assegnato una larghezza base di larghezza: 96%; e imposta la larghezza massima su max-width: 960px; , in questo blocco dobbiamo visualizzare un'immagine adattiva. Per questo elemento all'interno del contenitore impostiamo la larghezza al 100%, in modo che la sua larghezza sarà sempre uguale alla larghezza del contenitore, indipendentemente dalla dimensione del viewport. Di conseguenza, passiamo all'altezza in modalità automatica, di conseguenza l'immagine cambierà proporzionalmente.

HTML: CSS: div.container ( larghezza: 96%; larghezza massima: 960px; margine: 0 auto; /* centra il contenitore principale */ ) img ( larghezza: 100%; /* larghezza immagine */ altezza: auto; /* altezza Immagini */ )

notare che l'elemento sarà responsivo anche se direttamente nel markup sono stati specificati valori fissi per gli attributi HTML larghezza e altezza.

Ciao a tutti! Abbiamo capito cos'è il layout adattivo, una griglia e come rendere adattivi i caratteri. Ora vediamo come adattare le immagini.

In realtà questo è un argomento molto semplice e non ci vorrà molto tempo.

Per rendere le tue immagini reattive, devi solo aggiungere loro la proprietà max-width=100%.

immagine (
larghezza massima: 100%;
}

Tutto! Ora la nostra immagine non si estenderà oltre il contenitore principale e si adatterà a seconda della risoluzione dello schermo.

Oltre alle immagini, puoi utilizzare questa tecnica per video e altri file multimediali.

Img, incorpora, oggetto, video (
larghezza massima: 100%;
}

Andrebbe tutto bene, ma funziona solo in IE7+. Se hai bisogno di supportare IE6, allora questa proprietà funziona lì nella seguente voce:

immagine (
larghezza: 100%;
}

Quelli. Invece di max-width, scrivi width .

Un altro problema che potresti riscontrare è lo scarso ridimensionamento delle immagini in Windows. Sì, esattamente nel sistema, non nel browser. Se guardi da vicino, puoi vedere alcuni artefatti.

Risolvere questo problema per IE è semplice.

Logo (
sfondo: nessuno;
filtro: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}

Quelli. La proprietà filter ci aiuta a risolvere questo problema.

Adattivi, variano tutti in complessità e grado di supporto del browser. Un esempio di un modo complesso per implementare immagini reattive è utilizzare l'attributo srcset, che richiede più immagini, più markup e dipende anche dal supporto del browser.

Scartiamo l'inutile noiosità, le specifiche moderne ci permettono di rendere flessibili le immagini utilizzate sulle pagine del sito e visualizzarle correttamente sugli schermi dei vari dispositivi utente, per questo è sufficiente utilizzare solo alcune proprietà della clip CSS.

Ho preparato esempi di diverse varianti di immagini adattive, una singola immagine, immagini in due o più colonne, nonché un esempio di utilizzo di un'immagine di sfondo di grandi dimensioni con adattabilità garantita. Tutte le opzioni si basano sull'utilizzo di valori percentuali per la proprietà larghezza e valore automatico per la proprietà altezza delle immagini.

img (larghezza: 100%; altezza: automatica;)

img (larghezza: 100%; altezza: automatica; )

Valori di base delle immagini reattive

Cominciamo guardando un esempio base in cui dobbiamo rendere le singole immagini utilizzate nei post, o altri singoli blocchi, completamente reattive.
Ad esempio, abbiamo un contenitore a cui abbiamo assegnato una larghezza base di larghezza: 96%; e imposta la larghezza massima su max-width: 960px; , in questo blocco dobbiamo visualizzare un'immagine adattiva.
Per questo elemento all'interno del contenitore impostiamo la larghezza al 100%, in modo che la sua larghezza sarà sempre uguale alla larghezza del contenitore, indipendentemente dalla dimensione del viewport. Di conseguenza, passiamo all'altezza in modalità automatica, di conseguenza l'immagine cambierà proporzionalmente.

div.container (larghezza: 96%; larghezza massima: 960px; margine: 0 auto; /* centra il contenitore principale */) img (larghezza: 100%; /* larghezza immagine */ altezza: auto; /* altezza immagine */)

div.container ( larghezza: 96%; larghezza massima: 960px; margine: 0 auto; /* centra il contenitore principale */ ) img ( larghezza: 100%; /* larghezza immagine */ altezza: auto; /* altezza immagine */)

notare che l'elemento sarà responsivo anche se direttamente nel markup sono stati specificati valori fissi per gli attributi HTML larghezza e altezza.

Immagini di colonne reattive

A volte vogliamo vedere le immagini allineate una accanto all'altra o in una griglia, ad esempio, per organizzare una semplice galleria di immagini.
Per fare ciò è sufficiente apportare piccole modifiche al codice utilizzato sopra, la prima è ridurre la proprietà width larghezza e impostare l'elemento il valore del blocco in linea per la proprietà display, ovvero renderlo in linea.
Diamo un'occhiata a due layout: un layout immagine a due colonne e un layout a tre colonne.

1. Layout immagine a due colonne
Per un layout di immagine a due colonne, possiamo impostare la larghezza al 48%, ovvero circa la metà del contenitore. Non impostiamo i valori al 50% per avere un'imbottitura laterale.

img (larghezza: 32%; visualizzazione: blocco in linea;)

img (larghezza: 32%; visualizzazione: blocco in linea; )

Posizionamento condizionale di immagini adattive

Nel prossimo esempio considereremo la possibilità di utilizzare immagini adattive con disposizioni diverse a seconda dei dispositivi di visualizzazione, ad es. Se visualizzate sugli smartphone, le immagini appariranno in una colonna, in due colonne sui tablet e in quattro colonne sugli schermi più grandi.
Per implementare ciò, utilizzeremo le media query @media, specificando il tipo di media per il quale verrà applicata questa o quella larghezza massima dell'immagine max-width.

/* Per dispositivi piccoli (smartphone) */ img ( larghezza massima: 100%; display: inline-block; ) /* Per dispositivi medi (tablet) */ @media (larghezza minima: 420px) ( img ( larghezza massima: 420px) larghezza: 48%; ) ) /* Per dispositivi di grandi dimensioni (laptop, PC) */ @media (larghezza minima: 760px) ( img (larghezza massima: 24%; ) )

E' tutto abbastanza semplice, no? L’idea delle media query è fantastica, esiste da parecchio tempo ed è stata ampiamente utilizzata. I parametri mostrati nell'esempio funzionano bene con questo particolare layout; il modo in cui si comportano in altri progetti dovrebbe essere controllato attentamente, quindi...

Immagine reattiva a schermo intero

Per creare immagini reattive di grande formato che riempiano il 100% della dimensione del viewport, devi semplicemente rimuovere la proprietà max-width del contenitore (un valore di 960px) e impostarne la larghezza al 100%. Anche la larghezza dell'immagine è impostata al 100%.

.container (larghezza: 100% ; ) img (larghezza: 100% ; )

Contenitore (larghezza: 100%; ) img (larghezza: 100%; )

Sebbene questa tecnica sia molto facile da usare e abbia un forte supporto per il browser, dovresti ricordare che le immagini verranno sempre mostrate a grandezza intera, cioè Vengono mostrate immagini grandi e ad alta risoluzione che riempiono l'intero spazio, il che per i dispositivi mobili di piccole dimensioni non è sempre appropriato a meno che l'immagine non venga utilizzata come immagine di sfondo.

Probabilmente è tutto. Se desideri utilizzare immagini separate di dimensioni diverse per dispositivi diversi, usali, sicuramente non peggiorerà. Conosci altri metodi per rendere adattive le immagini, scrivi nei commenti, lo prenderemo sicuramente in considerazione, quelli nuovi sono sempre interessanti.

Data di pubblicazione: 2013-12-16

Dall'autore: se codifichi siti Web, posso scommettere che almeno uno dei tuoi clienti ha chiesto o ordinato un sito Web che supporta l'input tattile. Se stai seguendo la strada del responsive design (per cui il tuo sito web è sufficientemente flessibile da adattarsi visivamente alla larghezza dello schermo dal dispositivo mobile al desktop), allora avrai bisogno anche di una strategia per creare immagini reattive: una soluzione per immagini reattive.

Imparare le nozioni di base è abbastanza semplice, ma una volta presa la mano, scoprirai che il ridimensionamento delle immagini è solo l'inizio e dovrai anche affrontare problemi di prestazioni e enigmi della direzione artistica. Ti troverai di fronte a una vasta gamma di soluzioni al problema dell'immagine reattiva, ognuna con i suoi punti di forza e di debolezza - e nessuna perfetta! Questo articolo ti introdurrà alle nozioni di base e ti fornirà le informazioni necessarie per scegliere la migliore soluzione di immagini reattive per la tua situazione.

Nozioni di base

È molto semplice modellare le immagini in primo piano in modo che corrispondano alla larghezza del loro contenitore. Il seguente codice viene aggiunto al foglio di stile, possibilmente una normalizzazione o un foglio di stile di ripristino:

img (larghezza massima: 100%; )

immagine( larghezza massima: 100%;

Nella maggior parte dei casi, questa piccola regola di styling crea il risultato desiderato! Quando si è fermi, se il contenitore attorno all'immagine diventa più stretto della sua larghezza, l'immagine viene ridimensionata per corrispondere alla larghezza del suo contenitore. L'impostazione della larghezza massima al 100% garantisce inoltre che l'immagine non diventi più grande delle sue dimensioni effettive, riducendone significativamente la qualità. Se sei bloccato nel tentativo di fornire supporto per IE 6 o 7, dovrai aggiungere una regola di stile larghezza: 100%, che prende di mira solo quei browser perché non comprendono la larghezza massima.

Le immagini “Retina” ad alta risoluzione possono complicare questa semplice implementazione. Supponiamo che tu abbia bisogno che un logo di 150x150 px appaia con una densità di pixel doppia rispetto alla sua dimensione normale e che l'immagine sia abbastanza piccola da non costituire un problema per ottenere due varianti separate. Quindi crei una versione 300×300 px del logo, accendila e ora è enorme! Il tuo primo istinto potrebbe essere quello di provare qualcosa di simile nei CSS:

img.sitelogo (larghezza massima: 150px; )

imm. logo del sito ( larghezza massima: 150px;

Sfortunatamente, nulla funziona come previsto: l'immagine del logo ora rifiuterà di adattarsi correttamente alle altre immagini sulla pagina.

Per limitare la larghezza massima di un'immagine reattiva, dovresti limitare la larghezza massima del contenitore dell'immagine, non dell'immagine stessa! Supponiamo che tu abbia racchiuso l'immagine di un logo in un modulo con una classe di branding. Ecco uno stile che produrrà il risultato desiderato:

Branding (larghezza massima: 150px; )

Marchio ( larghezza massima: 150px;

Quindi ora il layout reattivo del sito include immagini reattive scalabili. Missione completata. È ora di scoprire cosa ha da offrire questo spazio esterno sconosciuto allo sviluppatore affamato di sole, giusto?

Non così in fretta! Abbiamo ancora due grandi difficoltà da superare.

Problema di prestazioni

Con la soluzione di immagine adattiva sopra descritta, a tutti i dispositivi vengono “alimentate” le stesse immagini. Fa un buon lavoro con icone e loghi piccoli, ma il problema diventa rapidamente più difficile man mano che le immagini diventano più grandi e pesanti. Le immagini Retina migliorano ulteriormente questo aspetto: non è necessario inviare immagini Retina di grandi dimensioni a un dispositivo che non è in grado di visualizzarne i dettagli!

Pensaci. È davvero necessario inviare a un telefono cellulare un'immagine di 990 x 300 px e 100 KB destinata agli utenti desktop? Naturalmente, un visitatore su un dispositivo mobile potrebbe essere connesso alla connessione Wi-Fi della caffetteria locale, ma potrebbe ritrovarsi per strada con una connessione wireless instabile e cercando di trovare informazioni importanti sul tuo sito web. Ogni utente mobile che si arrende quando una pagina impiega troppo tempo a caricarsi è un potenziale cliente perso!

In natura oggi puoi trovare molti siti web mobili grandi quanto o addirittura più grandi delle loro controparti desktop. Guy Podžarny(Guy Podjarny) ha eseguito diversi test circa un anno fa e non ha notato miglioramenti significativi: nel 2011. L'86% dei siti web avevano le stesse dimensioni o erano più grandi e nel 2012 questo numero è sceso al 72%, ma la dimensione complessiva dei siti è aumentata. Anche Dave Rupert ha notato questo problema nel suo articolo Mo' Pixels Mo' Problems.

PROSSIMA COMPLICAZIONE: PRECARICAMENTO DEL BROWSER

Quando ho iniziato a lottare con i problemi di prestazioni dei siti web reattivi, inizialmente avevo pianificato di recuperare tutte le variazioni delle immagini sulla pagina, ma installavo alcune classi CSS con query multimediali che nascondessero immagini di grandi dimensioni e mostrassero quelle piccole con larghezze ridotte, e facevo il opposto alle larghezze del desktop. Sembra logico: il browser non dovrebbe scaricare solo immagini visibili?

Il problema è che i browser sono troppo veloci per noi! Per garantire il tempo di caricamento più rapido possibile, i browser pre-scaricano tutte le immagini che possono identificare nel codice sorgente prima che inizi qualsiasi elaborazione CSS o JavaScript. Quindi, in realtà, questo approccio svantaggierà ulteriormente i visitatori mobili costringendoli a scaricare tutte le opzioni di immagine!

A causa del pre-download, è necessaria una soluzione back-end dell'applicazione (per impedire il pre-download) oppure markup speciale e JavaScript.

DETERMINAZIONE DELLA LARGHEZZA DI BANDA

L’ultimo pezzo del puzzle delle prestazioni è la velocità della rete. È chiaro che dovresti fornire immagini di grandi dimensioni solo a dispositivi connessi a una rete veloce, ma come determinarlo? Esistono diversi metodi per stimare la velocità, ma non sono ancora completamente affidabili.

Il W3C sta lavorando su una tecnologia Network Information API che potrebbe essere molto utile in futuro, ma attualmente è supportata solo da un numero limitato di dispositivi (e, purtroppo, piccoli). Attualmente è in fase di implementazione in alcune soluzioni di immagini reattive, ma non sarà adottata su larga scala finché non verrà fornito un supporto adeguato. Misurare la rete è difficile e, come sostiene Yoav Weiss nel suo articolo sul sito web di Smashing Magazine, "query sulla larghezza di banda dei media" affidabili non sembrano poter essere implementate correttamente nel prossimo futuro.

Foresight.js di Adam Bradley utilizza JavaScript per testare quanto tempo impiega un browser per caricare un'immagine da 50K, quindi memorizza tali informazioni e le utilizza per prendere decisioni sulla larghezza di banda. Presenta alcuni piccoli inconvenienti: aggiunge un download di immagini da 50K alla tua pagina e il caricamento del resto delle immagini potrebbe essere bloccato fino al completamento del download di quella di prova. Molte soluzioni di immagini reattive che attualmente utilizzano il rilevamento della larghezza di banda utilizzano una variazione o un adattamento di Foresight.js.

Il problema della “direzione artistica”

Supponiamo che tu abbia un'immagine molto ampia sulla home page del tuo sito web. Raffigura una scena pastorale con campi e foreste, cieli azzurri e soffici nuvole e una famiglia felice sull'erba.
Ora ridimensionalo per un dispositivo mobile fino a una larghezza di 300 px. Con queste dimensioni, una famiglia in vacanza sembra formiche durante un picnic!

Quando si ridimensiona un'immagine di grandi dimensioni, i dettagli vengono persi.

È qui che risiede il problema della cosiddetta “direzione artistica”. Alcune immagini semplicemente non possono essere ridimensionate bene; i dettagli fini vengono persi e l'impatto luminoso è ridotto. Nel caso della nostra immagine, visivamente sarebbe venuta molto meglio se la versione mobile della foto fosse stata ingrandita, ritagliata e la famiglia felice fosse stata a fuoco. Per questo problema, abbiamo bisogno di una soluzione di immagine reattiva che ci consenta di definire diverse versioni dell'immagine per situazioni diverse o di regolare l'immagine al volo.

A volte, quando la larghezza dello schermo è ridotta, è preferibile ritagliare o ingrandire l'immagine.

Scegliere la tua soluzione

Fortunatamente, nella comunità dello sviluppo web e del design non mancano individui intelligenti e creativi che lavorano per risolvere questi problemi. Naturalmente, il rovescio della medaglia è che si può facilmente sentirsi sopraffatti dal numero di soluzioni adattive esistenti. Quale pensi che ti si addice meglio?

La scelta può essere estremamente difficile perché ci sono tanti fattori in gioco. Attualmente non esiste una soluzione perfetta per ogni situazione; ognuno è stato creato per risolvere una serie specifica di problemi. Per scegliere, dovrai valutarli alla luce delle esigenze specifiche del tuo progetto. Chris Coyier fa un ottimo lavoro riassumendo i fattori decisionali (inclusa una tabella per monitorarli, sebbene alcuni dei metodi più recenti non siano menzionati). Ecco alcuni dei fattori da considerare:

Dovrai affrontare il problema della direzione artistica (ovvero diversi rapporti di immagine, ritaglio e dimensioni per larghezze diverse)?

Hai un sito web o un CMS di grandi dimensioni in cui è impossibile tornare indietro e aggiungere markup personalizzato a ciascuna immagine?

Tutte le immagini sono presenti quando viene caricata la pagina o alcune vengono caricate dinamicamente tramite JavaScript?

Vuoi testare la larghezza di banda di un utente per determinare se la sua connessione è sufficientemente veloce per scaricare immagini ad alta risoluzione?

La soluzione scelta richiede un framework (come jQuery o PHP) che non è a tua disposizione?

È applicabile una soluzione di terze parti o ne hai bisogno su un hosting interno?

A tal fine, diamo un'occhiata ad alcune soluzioni di immagini reattive che esistono da un po' e sono ampiamente utilizzate nella comunità degli sviluppatori.

Tieni presente che l'elenco delle soluzioni di seguito non è affatto definitivo. O personalmente li ho trovati i più utili, oppure hanno già una comprovata affidabilità. Hai una soluzione preferita non elencata qui? Raccontacelo nei commenti!

Soluzioni adattive collaudate e affidabili

RIEMPIMENTO IMMAGINE

La rete è davvero mondiale e dobbiamo confrontarci con il fatto che non tutti hanno accesso alle connessioni in fibra ottica e alle reti 4G. Scott Jehl Scott Jehl ha sperimentato in prima persona questo divario digitale mentre viaggiava e lavorava nel sud-est asiatico ed è un forte sostenitore di siti Web mobile-first e reattivi che non gravano sugli utenti mobili. Il suo script Picturefill è un polyfill per l'elemento proposto - codice JavaScript che emula l'API dell'immagine - dandoci la possibilità di utilizzarlo oggi nei nostri siti web. Il futuro è adesso, tesoro!

Picturefill non richiede jQuery, ma ovviamente richiede che lo script picturefill.js sia incluso da qualche parte nella pagina. Il picturefill necessita anche di markup speciale, con div per rappresentare variazioni dell'immagine, distinte da attributi data-media, che agiscono come media query nei CSS. Puoi anche facoltativamente includere un'immagine nei commenti condizionali per quei browser che non supportano le media query (si tratta di IE 8) e un'opzione alternativa nel tag noscript per quei browser in cui JavaScript è disabilitato (si tratta di BlackBerry). Ecco un esempio delle tipiche impostazioni di Picturefill:

< span data - picture data - alt = "Tag alt descrittivo" > < span data - src = "images/myimage_sm.jpg" > < / span > < span data - src = "images/myimage_lg.jpg" data - media = "(min-width: 600px)" > < / span > < ! -- [ if (lt IE 10 ) & (! IEMobile ) ] > < span data - src = "images/myimage_sm.jpg" > < / span > < ! [ endif ] -- > < ! -АльтернативныйконтентдлябраузеровбезJS . -- > < noscript > < img src = "images/myimage_sm.jpg" alt = "Tag alt descrittivo" / > < / noscript > < / span >

Questo è tutto ciò che serve per visualizzare immagini reattive durante il caricamento della pagina utilizzando Picturefill. Inserisci lo script, configura il markup e tutto funzionerà facilmente. Puoi anche chiamare Picturefill a livello di codice se desideri aggiungere immagini alla pagina al volo.

Picturefill richiede molto markup personalizzato, quindi potrebbe non essere la scelta migliore per coloro a cui non è consentito modificare il codice sorgente del sito web. Inoltre, non effettua determinazioni sulla larghezza di banda. Se è molto importante per il tuo progetto, considera la seguente soluzione.

HiSRC da Marco Grabanski(Marc Grabanski) e Christopher Schmitt(Christopher Schmitt) è un plugin jQuery che ti consente di creare versioni a bassa, media e alta risoluzione di un'immagine e lo script mostra quella più adatta in base alla disponibilità di Retina e alla velocità della connessione di rete.

Per installarlo, assicurati innanzitutto di avere jQuery e lo script HiSRC aggiunti da qualche parte nella pagina.

Nel codice HTML, aggiungi prima un normale tag immagine alla pagina e imposta l'origine sulla versione con risoluzione più bassa (o più piccola) dell'immagine. Aggiungi una classe (come .hisrc) all'immagine o al suo wrapper per definire quali immagini HiSRC dovrebbe gestire. Quindi aggiungi un markup speciale al tag immagine: attributi data-1x e data-2x rispettivamente per le versioni a media e alta risoluzione. Per esempio:

< img src = "//placekitten.com/200/100" data - 1x = "http://placekitten.com/400/200" data - 2x = "http://placekitten.com/800/400" class = "hisrc" / >

Quindi, dopo aver caricato il DOM, chiama semplicemente una funzione sulla classe immagine che stai utilizzando, in questo modo:

$(document).ready(function())( $(".hisrc").hisrc(); ));

$(documento). pronto(funzione()( $(".hisrc" ) . hisrc(); } ) ;

Infatti, il browser caricherà prima l'origine dell'immagine, ad es. versione mobile dell'immagine. Lo script controllerà quindi se l'utente utilizza la larghezza di banda mobile (come 3G). In tal caso, lascerà l'immagine mobile-first. Se la connessione è veloce e il browser supporta le immagini Retina, verrà consegnata la versione @2x. Se la connessione è veloce, ma Retina non è supportata, verrà consegnata la versione @1x.

Potresti aver notato che l'immagine a bassa risoluzione viene sempre caricata, anche se lo script successivamente decide che il dispositivo dell'utente è un candidato adatto per l'alta risoluzione. Anche se tecnicamente si tratta di un doppio download, è un inconveniente solo per chi ha una connessione veloce. Sono felice di accettare questo compromesso!

HiSRC può gestire le immagini che vengono aggiunte dinamicamente alla pagina. Consente inoltre più immagini, quindi è possibile definire ritagli e dimensioni diverse per combattere il problema della direzione artistica.

Per quanto riguarda i suoi punti deboli, HiSRC richiede jQuery, quindi non sarà utile se non usi quella libreria. Richiede inoltre markup HTML personalizzato, quindi potrebbe non essere la scelta migliore se hai un sito web di grandi dimensioni con molte immagini legacy o un CMS in cui non puoi modificare l'edizione del tag immagine. Se questa è la tua situazione, continua a leggere!

IMMAGINI ADATTABILI

A differenza dei primi due script, Adaptive Images Matt Wilcox(Matt Wilcox) - Questa è principalmente una soluzione lato server. Richiede un po' di JavaScript, ma il vero lavoro viene svolto utilizzando il server web Apache 2, PHP 5.x e la libreria GD.

Per installarlo sul tuo server web, dovrai modificare o aggiungere un file .htaccess, scaricare alcuni file PHP nella directory principale del tuo sito web, aggiungere del JavaScript alle pagine (che aggiungerà un cookie per registrare lo schermo dell'utente risoluzione) e configura alcuni punti delle variabili di controllo nei file PHP che corrispondono alle query multimediali del tuo sito web.

Le istruzioni di installazione sono piuttosto dettagliate, un po' lunghe per questo articolo. Per informazioni visitate il sito ufficiale e cliccate sul link “Dettagli” in alto.

L'aspetto migliore di Adaptive Images è che non richiede markup personalizzato per le tue immagini. Se sei riuscito a installarlo e configurarlo correttamente, è tutto! Lo script PHP intercetterà qualsiasi richiesta di immagine, la ridimensionerà al volo secondo necessità per i singoli punti di interruzione e la installerà automaticamente sulle tue pagine.

PHP ha molte opzioni di configurazione come qualità dell'immagine, punti di interruzione, memorizzazione nella cache e persino un filtro di nitidezza che può essere applicato per generare immagini in scala.

Ha diverse limitazioni:

Poiché richiede una combinazione di Apache e PHP, Adaptive Images potrebbe non essere adatto alla piattaforma del tuo sito web o potrebbe non essere accessibile dal server del tuo host web.

Si basa sulla capacità del server web di intercettare tutte le richieste di immagini (tramite il file .htaccess). pertanto, se le tue immagini si trovano altrove, ad esempio su una rete di distribuzione di contenuti, non funzionerà.

Non determina la produttività.

Non è destinato a risolvere il problema della direzione artistica perché ridimensiona solo le immagini originali. Non è possibile ritagliare l'immagine originale o crearne proporzioni diverse.

Potresti aver notato che tutte le soluzioni richiedono JavaScript in un modo o nell'altro e spesso una configurazione dettagliata. Se ne stai cercando uno che non richieda JavaScript e sia relativamente facile da implementare, considera quanto segue.

SENCHA.IO SRC

Precedentemente noto come TinySrc, Sencha.io Src è una soluzione di terze parti che funge da intermediario per cui non devi configurare nulla sul server. Invia semplicemente la tua immagine ai server di Sencha (con o senza opzioni definite) e Sencha la elaborerà e restituirà la versione corretta nelle dimensioni richieste.

Supponiamo che tu abbia un'immagine di grandi dimensioni:

< img src = "//www.your-domain.com/path/to/image.jpg" alt = "La mia grande immagine" / >

Nella versione più semplificata, puoi aggiungere un prefisso all'attributo src da http://src.sencha.io/, come qui:

< img src = "//src.sencha.io/http://www.your-domain.com/path/to/image.jpg" alt = "La mia grande immagine" / >

Sencha.io ridimensionerà per impostazione predefinita la tua immagine per adattarla alla larghezza dello schermo del dispositivo, utilizzando una stringa dell'agente utente per il rilevamento. Un'immagine larga 320 px verrà inviata ai telefoni, 768 px ai tablet e così via.

Puoi anche configurare la stringa del prefisso Sencha.io per restituire dimensioni specifiche, orientamento, dimensioni percentuali e qualsiasi numero di calcoli complessi.

Sencha.io è un servizio gratuito per singoli utenti e può essere una soluzione molto conveniente al problema delle immagini reattive. Tuttavia, stai aggiungendo una dipendenza da una terza parte, con potenziali tempi di inattività e problemi fuori dal tuo controllo. Valuta attentamente questi rischi.

Soluzioni al problema dell'immagine reattiva che vale la pena considerare

Le soluzioni descritte sono già applicabili, ma non sono le uniche nel loro genere. Alcuni di quelli più recenti sono molto compromessi e li tengo d'occhio per vedere come si evolvono nelle moderne tecnologie web. In particolare, di seguito ne elenchiamo due che potresti prendere in considerazione.

CATTURA/MOBIFY.JS 2.0

La cattura è una nuova funzionalità di Mobify.js 2.0 in fase di sviluppo che offre accesso (o "cattura") al markup HTML di origine prima che venga analizzato o visualizzato nel browser. L'accesso al codice sorgente in questa fase rende possibile modificare l'attributo src dell'immagine prima che il browser la scarichi. Puoi anche creare un'alternativa a una delle altre soluzioni, come Picturefill, in caso di guasto.

Poiché questa tecnica bypassa direttamente il precaricamento del browser nativo, è un punto controverso negli ambienti delle prestazioni web. Se utilizzato in modo errato, può creare veri e propri problemi di prestazioni del sito invece di risolverli!