Ottimizzazione delle immagini per il vostro web immagini delle pagine è un compito molto importante e strategicamente fondamentale per migliorare la velocità media pagina. La dimensione dell'immagine influisce sulla velocità della pagina in diversi modi e dobbiamo occuparci di diverse tecniche per ottimizzare la pagina.
Ridimensiona le tue immagini
Primo, dobbiamo occuparci delle immagini’ taglia, questa è la loro larghezza e altezza. Se sei pigro, come sono io ;), È probabile che lascerai che i CSS facciano il lavoro per te: devi solo caricare la tua immagine e poi scrivere un mucchio di regole CSS per ridimensionarla (o forse hai ancora impostato larghezza e altezza come attributi del file <img> etichetta!!!). Questo è un errore enorme: centinaia di kilobyte possono essere salvati servendo immagini scalate. Uno strumento come GTMetrix lo firmerà come attività ad alta priorità per migliorare la velocità della pagina.
Quindi, se l'immagine realmente visualizzata nella pagina web ha una larghezza di 300 px e un'altezza di 120 Px, Non utilizzare l'immagine originale di 1200 px x 480 Px: ridimensionalo invece e usa quello della dimensione richiesta. Se la stessa immagine deve essere visualizzata in dimensioni diverse, carica sul tuo server un'immagine per ogni dimensione, magari aggiungendo un suffisso che specifica larghezza e altezza al nome dell'immagine. E assicurati di collegare l'immagine giusta al 'src’ attributo del tuo <img> tag.
La regola d'oro qui è: non usare i CSS per ridimensionare le immagini!
Combina le tue immagini
Un'altra tecnica utile da usare per ottimizzare il tempo di caricamento delle nostre immagini è usare gli sprite. Questa tecnica è nata nello sviluppo di videogiochi per creare animazioni e può essere utilizzata anche nello sviluppo web.
Supponiamo che tu stia creando un sito web multilingue. Probabilmente vorrai metterlo da qualche parte nella tua pagina 2, 3 o più flag su cui l'utente può fare clic per cambiare la lingua di conseguenza. Il modo migliore per farlo è costruire un'immagine unica che contenga tutte le tue bandiere che vuoi usare e usa css per rendere visibile solo una bandiera alla volta. Facciamolo con un esempio.
Supponiamo di avere 3 segnala immagini come queste:
 |  |  |
La strada sbagliata
Potremmo essere tentati di scrivere qualcosa del genere:
<ul id ="bandiere">
<in>
<a href ="#" class ="lang attivo" id ="ES">
<img src="immagini/bandiere/flag_es.png" larghezza="32" altezza="32" />
</un'>
</in>
<in>
<a href ="#" class ="Lang" id ="in">
<img src="immagini/bandiere/flag_en.png" larghezza="32" altezza="32" />
</un'>
</in>
<in>
<a href ="#" class ="Lang" id ="esso">
<img src="immagini/bandiere/flag_it.png" larghezza="32" altezza="32" />
</un'>
</in>
</il>
Il modo giusto
Utilizzare invece le tre immagini annidate separatamente nelle tre <ancora> tag che presumibilmente attiveranno l'evento di cambio lingua, Utilizzeremo il nostro editor di immagini preferito per combinare le tre bandiere in un solo file immagine. Ogni bandiera è 32 px x 32 px in modo da poter costruire un'immagine con una larghezza di 32 px e un'altezza di 96 Px. Otterremo qualcosa di simile a questo:
Ora possiamo usare la seguente struttura html per il nostro menu lingua:
<ul id ="bandiere">
<in>
<a href ="#" class ="lang attivo" id ="ES"></un'>
</in>
<in>
<a href ="#" class ="Lang" id ="in"></un'>
</in>
<in>
<a href ="#" class ="Lang" id ="esso"></un'>
</in>
</il>
Di seguito trovi le regole CSS per questo pezzo di markup:
ul#bandiere{
list-style-type: nessuna !importante;
margine-inferiore: 0 !importante;
}
UL#Bandiere Li{
Schermo: in linea !importante;
}
ul#bandiere li a{
Schermo: blocco-inline !importante;
larghezza: 30Px !importante;
raggio-bordo: 50% !importante;
straripamento: nascosto !importante;
Allinea testo: centro !importante;
}
ul#bandiere li a#es{
sfondo: URL(../immagini/bandiere/bandiere.png) 0 0 non si ripete;
}
ul#bandiere li a#en{
sfondo: URL(../immagini/bandiere/bandiere.png) 0 32px senza ripetizione;
}
ul#bandiere li a#it{
sfondo: URL(../immagini/bandiere/bandiere.png) 0 64px senza ripetizione;
}
Hai notato le ultime tre regole? Lì impostiamo la proprietà superiore dell'immagine di sfondo: 0 per la bandiera spagnola, 32 per l'inglese e 64 per quello italiano. Il risultato sarà questo:
In questo esempio, Ho evidenziato la lingua attiva con un cerchio arancione (utilizzando il javascript per modificare l'elemento attivo all'evento clic, ma lo lascerò per un altro articolo su come creare pagine web multilingue utilizzando un paio di fantastici plugin per jQuery).
Qual è il vantaggio di usare gli sprite? Come spiega GTMetrix,
La combinazione di immagini nel minor numero di file possibile utilizzando sprite CSS riduce il numero di round trip e ritardi nel download di altre risorse, riduce il sovraccarico delle richieste, e può ridurre il numero totale di byte scaricati da una pagina web.
Comprimi le tue immagini
Opzione 1
Sii qualunque siano le tecniche che stai usando per ottimizzare le tue immagini, è quasi sicuro che PageSpeed Insights (o GTMetrix o qualsiasi altro strumento che stai utilizzando per misurare le prestazioni della tua pagina) te lo dirò “Ottimizza le immagini“. La buona notizia è che sia GTMetrix che PageSpeed Insights ti consentono di scaricare immagini ottimizzate dai loro server. PageSpeed Insights lo consente anche in modo più comodo: ottimizza le tue immagini per te, minifries i tuoi javascript e Css e li offre in un file compresso pronto per il download: non è fantastico?
Informazioni su javascript e CSS minimizzati utilizzati per dare priorità al processo di contenuto, puoi saperne di più leggendo Questo articolo.
Opzione 2
Hai anche altre opzioni per comprimere e ottimizzare le tue immagini, solo per eseguire i test utilizzando contenuti già ottimizzati. La prima opzione che hai è usare gli strumenti online. Per esempio, compressore.io è uno strumento fantastico che ti consente di comprimere le tue immagini senza perdita di dati e risparmiare centinaia di Kb, come affermano nella loro home page.
Un altro strumento fantastico è questo Compressione PNG e JPEG online, che geves molto goos resuts.
Se utilizzi WordPress, puoi vivere senza Plugin SmushIt che ottimizza le tue immagini durante il caricamento!
Opzione 3
È inoltre possibile utilizzare un software autonomo. Il migliore che ho provato è sicuramente Rivolta (acronimo che sta per Radical Image Optimization Tool): è solo per Windows, ma puoi facilmente eseguirlo dalla tua macchina Linux usando Wine. Fa la magia! Può comprimere un file 4500 X 3000 immagine di 19.4 Mb ad un 5.09 Mb senza ricampionare l'immagine e senza alcuna visibile perdita di qualità. Se ridimensionate l'immagine a una dimensione più ragionevole in termini di larghezza e altezza, diciamo ad un 1000 di larghezza e 668 di altezza sarà il nuovo peso del file 173.9 KB!
27 Novembre 2022: Devo assolutamente segnalare questo ottimo software che nel mio lavoro sulle immagini ha sostituito quasi totalmente Riot. Sto parlando di XnConvert. Non solo questo software converte tutti i formati di immagine in qualsiasi formato tu preferisca, ma ti consente anche di eseguire tonnellate di modifiche come l'aggiunta di rumore, Ridimensionamento, filtraggio e molto altro ancora. Naturalmente è possibile elaborare un'immagine alla volta, ma è anche possibile applicare gli stessi parametri a più immagini contemporaneamente. Ma la caratteristica che rende XnConvert E lo strumento indispensabile è che supporta il formato WebP permettendoti di risparmiare molto spazio senza una qualità visibilmente persa. Lo consiglio vivamente!
Spero che tu abbia trovato utile questo articolo. Se hai qualche commento o qualche domanda, sentiti libero di pubblicare un commento o di contattarmi tramite il Pagina dei contatti. E se ti senti davvero generoso, Non dimenticare di condividere questo post sui tuoi social network! Grazie!