Hai sentito che il Web è diventato più visivo e le immagini migliori nel tuo sito web aziendale sono importanti.
Ma quelle immagini potrebbero essere il flagello dei visitatori del tuo sito web. Le immagini rappresentano 1 MB di 1,7 MB che contiene la pagina Web media.
Questo potrebbe non essere un grosso problema per i tuoi visitatori su computer desktop che utilizzano connessioni Internet ad alta velocità. Tuttavia, se stai vedendo o vuoi vedere un aumento del traffico dai visitatori mobili, quelle immagini potrebbero essere un problema. Le pagine Web pesanti per immagini possono richiedere molto tempo per il download. I visitatori si sentono frustrati e lasciano il tuo sito.
$config[code] not foundPotresti aver implementato un design Web reattivo, pensando che risolva tutti i tuoi problemi mobili. Ed è vero che un web design reattivo risolve alcuni problemi. Organizza e visualizza automaticamente gli elementi del tuo sito per essere visualizzati su schermi mobili più piccoli e più stretti.
Ma il responsive web design non è la risposta a tutto. Non risolve necessariamente il problema del download delle immagini. Anche con il design reattivo, molte volte queste immagini pesanti vengono comunque scaricate. Come specialista delle prestazioni Web Yoav Weiss sottolinea succintamente sul sito web di Opera:
"Il Responsive Web Design RWD combina le nuove funzionalità del browser e le tecniche CSS per creare siti web che si adattano al dispositivo che li visualizza e sembrano ideali ovunque. Ciò ha permesso agli sviluppatori di smettere di preoccuparsi del rilevamento di dispositivi inaffidabili e di pensare ai propri siti Web in termini di dimensioni del viewport.
Ma, anche se i siti RWD sembravano diversi su ciascun dispositivo, in basso la maggior parte di questi ha continuato a scaricare le stesse risorse per tutti i dispositivi. "
Il nuovo
Se non sai nulla del codice HTML, una definizione non tecnica è: è una lingua speciale. Se utilizzato dietro le quinte del codice del tuo sito web, questa lingua fornisce istruzioni su come il browser deve visualizzare il testo e le immagini. Il nuovo elemento Picture è un tipo di linguaggio di markup HTML. È scritto in questo modo (secondo il gruppo di comunità Responsive Images): L'elemento Picture è reattivo immagini, non reattivo design. Per gli uomini d'affari non tecnici, questa distinzione può sembrare piccola. Ma quando si tratta delle prestazioni del tuo sito sui dispositivi mobili, potrebbe essere significativo. Secondo un rapporto di ArsTechnica, il nuovo elemento di markup risolve i problemi causati dalle immagini che dovevano essere viste su un monitor a grandezza naturale - immagini che non si adattano bene ai dispositivi mobili. Il
"Quando il browser incontra un elemento Picture, valuta innanzitutto le regole che potrebbero essere specificate dallo sviluppatore web. *** Quindi, dopo aver valutato le varie regole, il browser sceglie l'immagine migliore in base ai propri criteri. Questa è un'altra bella funzionalità poiché i criteri del browser possono includere le tue impostazioni. Ad esempio, i browser futuri potrebbero offrire un'opzione per impedire il caricamento di immagini ad alta risoluzione su 3G, indipendentemente da ciò che qualsiasi elemento Picture sulla pagina potrebbe dire. Una volta che il browser conosce quale immagine è la scelta migliore, in realtà carica e visualizza quell'immagine in un buon vecchio elemento img. … ciò che accade è Picture avvolge un tag img. Se il browser è troppo vecchio per sapere cosa fare di a All'inizio, non tutti gli sviluppatori hanno accettato il nuovo elemento Immagine. La storia di Ars Technica delinea il processo che i leader nella comunità di sviluppo Web hanno attraversato per arrivare al punto in cui il $config[code] not found Ma il problema ora sembra risolto, con l'adozione dell'elemento HTML della nuova immagine. Il
Come uomini d'affari, una cosa importante da sapere è quella L'implementazione dell'elemento Picture HTML per le immagini è qualcosa da discutere con il tuo sviluppatore web. I tecnicamente orientati e i fai-da-te possono andare qui per imparare come usare l'elemento Immagine. È un eccellente articolo di Scott Gilbertson. Sentiti libero di implementare
Immagini: Shutterstock; RICG Cos'è l'elemento HTML Picture?
Punti chiave su
