\n C'\u00e8 stato un tempo in cui potevi distinguere con sicurezza tra una pagina web desktop e una pagina web mobile. Tanto \u00e8 vero, infatti, che un intero settore \u00e8 cresciuto attorno al riutilizzo di siti desktop per dispositivi mobili.\n<\/p>\n
\n Per un po' non eri nessuno se non avevi un sito mobile separato su un dominio separato. Poi le cose iniziarono a cambiare.\n<\/p>\n
\n I display mobili sono migliorati oltre ogni riconoscimento. Cos\u00ec hanno fatto i browser mobili. I tablet hanno gettato un altro elemento nell'equazione. \u00c8 arrivato il 4G. I display Retina offrivano nuovi livelli di chiarezza per gli utenti finali.\n<\/p>\n
\n Improvvisamente, il confine tra desktop e mobile sembrava sfocato.\n<\/p>\n
\n Allo stesso tempo, c'era una crescente diversit\u00e0 nelle dimensioni e nella risoluzione dei display desktop.\n<\/p>\n
\n E un mal di testa crescente per i web designer.\n<\/p>\n
\n Sono finiti i giorni in cui dovevi soddisfare solo una manciata di dimensioni di viewport. Le cose si stavano complicando.\n<\/p>\n
\n Fortunatamente, l'aiuto era a portata di mano sotto forma di query sui media e il concetto di responsive design.\n<\/p>\n
\n Grazie alle media query, \u00e8 diventato possibile variare gli stili e il layout, persino il contenuto, a seconda della larghezza del viewport dell'utente e della risoluzione dello schermo. Naturalmente, le media query non sono affatto l'unico strumento nella borsa dei trucchi del responsive designer, ma \u00e8 giusto dire che costituiscono la base della tecnica.\n<\/p>\n
\n Questa \u00e8 stata un'ottima notizia per i dispositivi mobili. Il design reattivo significava che potevi fornire in modo efficace diverse versioni dello stesso sito a dispositivi diversi. Il tutto senza sviluppare un sito mobile separato su un dominio diverso.\n<\/p>\n
\n I proprietari dei siti stanno iniziando a rendersi conto che gli utenti finali si preoccupano delle prestazioni. I rivenditori, in particolare, stanno iniziando ad apprezzare il fatto che ridurre i millisecondi del tempo di caricamento pu\u00f2 tradursi in milioni in bilancio.\n<\/p>\n
\n Fortunatamente, i siti reattivi offrono un chiaro vantaggio in termini di prestazioni rispetto ai loro cugini mobili dedicati: il reindirizzamento a un dominio mobile viene eliminato.\n<\/p>\n
\n Tuttavia, nonostante ci\u00f2, il responsive design \u00e8 riuscito ad acquisire una certa reputazione per le scarse prestazioni.\n<\/p>\n
\n Per certi versi, questo \u00e8 piuttosto ingiusto, ma vale la pena considerare le sfide prestazionali extra che il design reattivo pone agli incauti…\n<\/p>\n
\n I file immagine sono grandi. E poich\u00e9 sono grandi, sono spesso responsabili dei tempi di caricamento lenti. Sono quindi un buon punto di partenza per chiunque cerchi di ottimizzare le prestazioni di un sito.\n<\/p>\n
\n Sfortunatamente, una delle prime soluzioni per fornire immagini in modo reattivo non era eccezionale per le prestazioni.\n<\/p>\n
\n La tecnica \u00e8 meravigliosamente semplice. Basta usare max-width: 100% per assicurarsi che le immagini si ridimensionino in base alla larghezza dell'elemento contenitore:\n<\/p>\n
img\n{\nmax-width: 100%;\n}<\/code><\/pre>\n\n Man mano che il contenitore si restringe per adattarsi a finestre pi\u00f9 piccole, tutte le immagini all'interno si ridurranno con esso. Facile!\n<\/p>\n
\n Ma c'\u00e8 un problema. La dimensione dell'immagine potrebbe ridursi sullo schermo, ma la dimensione del file rimane la stessa. Questo \u00e8 tutt'altro che ideale dal punto di vista delle prestazioni. Potresti inviare un'immagine di 800 x 800 pixel lungo il filo, solo per essere visualizzata a 80 x 80 pixel: in altre parole, potresti trasmettere centinaia (o migliaia) di byte non necessari. Non solo il caricamento dell'immagine richieder\u00e0 molto tempo, ma tutti quei byte ridondanti potrebbero esaurire la preziosa quantit\u00e0 di dati dell'utente finale.\n<\/p>\n
\n Tuttavia, questo non \u00e8 l'unico, e nemmeno il migliore, modo per fornire immagini reattive. Per prima cosa, un'immagine che funziona a 800 pixel di larghezza non funzioner\u00e0 necessariamente altrettanto bene a varie frazioni di quella dimensione.\n<\/p>\n
\n Per risolvere questo problema, puoi utilizzare una media query per visualizzare diverse versioni dell'immagine a seconda delle dimensioni del viewport utilizzando una media query e display: nessuna.\n<\/p>\n
\n CSS:<\/strong>\n<\/p>\n@media (min-width: 601px) {\n#croppedImage\n{\ndisplay:none;\n}\n}\n@media (max-width: 600px) {\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n codice HTML:<\/strong>\n<\/p>\n<img id=\"largeImage\" width=\"400\" height=\"400\" alt=\"\" src=\"images\/largeImage.webp\" \/>\n<img id=\"croppedImage\" width=\"200\" height=\"200\" alt=\"\" src=\"images\/croppedImage.webp\" \/><\/code><\/pre>\n\n Ci\u00f2 consente di visualizzare diverse versioni di un'immagine, anzich\u00e9 solo la stessa immagine in dimensioni diverse. Tuttavia, non riduce il numero di byte. In effetti, la dimensione complessiva della pagina sar\u00e0 maggiore, poich\u00e9 verranno caricate tutte le immagini, indipendentemente dal fatto che siano visualizzate o meno.\n<\/p>\n
\n Un'alternativa migliore, se pratica, \u00e8 usare immagini di sfondo al posto degli <img src=\"https:\/\/inform.click\/wp-content\/uploads\/2024\/11\/inform.click\" \/><\/code>elementi. Questo \u00e8 preferibile perch\u00e9 le immagini a cui si fa riferimento in CSS vengono caricate solo se vengono utilizzate (purch\u00e9 non siano URI di dati):\n<\/p>\n@media (min-width: 601px) {\n#largeImage\n{\nwidth:400px;\nheight:400px;\nbackground-image:url(\/images\/largeImage.webp);\n}\n#croppedImage\n{\ndisplay:none;\n}\n}\n \n@media (max-width: 600px) {\n#croppedImage\n{\nwidth:200px;\nheight:200px;\nbackground-image:url(\/images\/croppedImage.webp);\n}\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n Funziona bene: i visitatori scaricano solo le immagini di cui hanno bisogno, come e quando ne hanno bisogno. Il problema \u00e8 che \u00e8 disordinato, trattando efficacemente il contenuto come stile. In quanto tale, crea potenzialmente un problema di manutenibilit\u00e0 e potrebbe anche far s\u00ec che immagini importanti vengano ignorate dai motori di ricerca.\n<\/p>\n
\n Invece, perch\u00e9 non utilizzare SVG (scalable vector graphics): un formato immagine che scala per sua stessa natura? Le immagini SVG hanno anche il vantaggio di essere facilmente stilizzate con i CSS (guarda questo fantastico tutorial<\/a> su come rendere gli SVG reattivi con i CSS). Questo \u00e8 perfetto per icone e loghi, ma sfortunatamente non sarai in grado di utilizzare SVG per le foto: per questi dovrai ricorrere a formati raster, come JPEG.\n<\/p>\n\n Un'altra opzione \u00e8 utilizzare una delle numerose soluzioni JavaScript per fornire immagini reattive. Questo \u00e8 un modo popolare per farlo, ma aggiunge un altro livello di complessit\u00e0. Inoltre, poich\u00e9 JavaScript blocca la costruzione del DOM, qualsiasi soluzione che coinvolga JavaScript ha il potenziale per ostacolare il rendering. Quindi, mentre ci sono alcuni plugin molto intelligenti l\u00e0 fuori, semplicemente introducendo JavaScript nell'equazione, in una certa misura ti stai rassegnando al minore dei due mali.\n<\/p>\n
\n Fino a poco tempo fa, queste erano le uniche opzioni.\n<\/p>\n
\n Ora, tuttavia, gli elementi e <source \/><\/code>e gli attributi srcset e size stanno finalmente portando sul web immagini veramente reattive. La nuova specifica sta inoltre iniziando a ottenere il supporto del browser, con il pieno supporto in Chrome e Opera e il supporto per il cambio di risoluzione in Safari. Fino a quando gli altri browser non si mettono al passo, c'\u00e8 un eccellente polyfill<\/a> JavaScript .\n<\/p>\n\n In questo nuovo mondo coraggioso, puoi utilizzare srcset per impostare un elenco di immagini candidate tra cui il browser pu\u00f2 scegliere. \u00c8 quindi possibile utilizzare una media query nell'attributo sizes per dettare la dimensione a cui verr\u00e0 visualizzata l'immagine. Utilizzando l' elemento insieme alle media query all'interno di uno o pi\u00f9 elementi, puoi specificare un diverso intervallo di immagini per condizioni diverse (ad es. per finestre fino a una certa larghezza, usa l'immagine a, b o c, e per finestre pi\u00f9 grandi usa l'immagine x, y o z). Ci\u00f2 \u00e8 utile se devi fornire una versione ritagliata di un'immagine per gli utenti con schermi piccoli.\n<\/p>\n