Eric Portis si unisce a me per scavare nel mondo delle immagini reattive.
Partiamo dalle basi. Le immagini reattive sono specificamente immagini in HTML ed esistono a causa del desiderio di prestazioni migliori. Le immagini sono probabilmente il principale responsabile del peso complessivo dei siti web. Se possiamo evitare di inviare troppi pixel attraverso la rete, dovremmo. Dopotutto, uno schermo largo solo 720 pixel non ha bisogno di un'immagine larga 2000 pixel, anche se è un display 2x.
Il problema è che i browser sono molto aggressivi nel download di risorse come le immagini. Va bene, perché è per questo che il Web (può essere) così veloce. Ma significa anche che dobbiamo fornire una serie di informazioni sulle nostre immagini direttamente nell'HTML. Un browser non può semplicemente sapere quanto è grande un'immagine? Certo che può, dopo averlo scaricato. Un browser non può sapere quanto sarà grande un'immagine che verrà mostrata sulla pagina? Certo che può, dopo aver scaricato tutto il CSS e eseguito il layout. La sintassi delle immagini reattive cerca di anticipare tutto ciò fornendo tali informazioni direttamente nella sintassi. Capire questa sintassi è complicato! C'è srcset, sizese l' elemento, e c'è un sacco di avvolgere la tua mente intorno.
Diventa ancora più complicato.
La sintassi che devi costruire si basa sull'avere più copie di quell'immagine in cui costruire la sintassi. Come li fai? Quanti dovresti fare? Che taglia dovrebbero essere?
Fortunatamente, ci sono alcuni strumenti automatici che spuntano intorno alle immagini reattive. WordPress è stato uno dei primi giocatori. Fuori dagli schemi, WordPress creerà più versioni delle immagini che carichi e restituirà srcsetsintassi utile . Ma puoi fare molto meglio. Puoi fornire un sizesattributo che corrisponda effettivamente a ciò che sta facendo il tuo tema e al modo in cui dimensiona quelle immagini.
Inoltre, WordPress non utilizza alcuna intelligenza speciale per creare più copie delle immagini che carichi. Ma potrebbe. Uno strumento come il generatore di punti di interruzione di immagini reattivo utilizza un po 'di intelligenza per capire quante immagini diverse puoi creare, in modo da poter trovare un equilibrio tra l'avere vicino all'immagine perfetta per il lavoro e il non aver bisogno di fare centinaia o migliaia di copie di esso. Quello strumento ha un'API!
Diventa ancora più complicato.
Diversi browser supportano diversi formati di immagine. Ad esempio, WebP. È possibile ottenere risparmi in termini di prestazioni offrendo il formato immagine corretto al browser corretto. La sintassi delle immagini reattive può aiutare in questo, ma complica la sintassi. Molti formati di immagine hanno anche un'idea di qualità. Con che qualità salvi queste copie multiple?
A questo punto, è un buon momento per menzionare Cloudinary. L'ho integrato in questo momento su CSS-Tricks e aiuta con molte di queste cose. Dovrei menzionare che sono un cliente pagante di Cloudinary e questo screencast non è stato sponsorizzato, ma Cloudinary ha sponsorizzato CSS-Tricks sotto forma di due post sponsorizzati altamente correlati:
- Immagini reattive in WordPress con Cloudinary, parte 1
- Immagini reattive in WordPress con Cloudinary, parte 2
In poche parole, ecco come funziona ora su CSS-Tricks:
- Carico le immagini proprio come farei sempre con WordPress.
- Piuttosto che le
srcsetinformazioni generate con WordPress, vengono generate da questa API più intelligente. - L'immagine viene anche caricata su Cloudinary.
- Quando WordPress filtra e restituisce l'HTML per le immagini, vengono applicati tutti quei dati buoni
srcset(e personalizzatisizes). L'URL punta agli URL di Cloudinary. - Gli URL di Cloudinary fanno uso della capacità di Cloudinary di regolare automaticamente sia il formato che la qualità automaticamente (utilizzando la loro tecnologia di fantasia) per assicurarsi che le cose siano le migliori possibili per il particolare browser che richiede l'immagine.
- Le vecchie immagini che originariamente non erano state caricate su Cloudinary beneficiano ancora di tutta la bontà di Cloudinary. Non hanno
srcsetdati così intelligenti , ma usano ancora l'URL di "recupero", il che significa che possono trarre vantaggio dalla formattazione automatica e dalla qualità automatica (che è probabilmente un buon miglioramento delle prestazioni, comunque).
In breve, non solo sto usando immagini reattive qui su CSS-Tricks per aiutare con le prestazioni, l'integrazione di Cloudinary migliora seriamente quel gioco.
Sono anche felice che questa non sia una dipendenza difficile. Se il plug-in Cloudinary viene disattivato, tutto torna alle normali immagini reattive di WordPress.