immagine Velocità

Migliorare la velocità di pagina: ottimizzazione delle immagini

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

Ridimensiona le immagini

Primo, dobbiamo occuparci delle dimensioni delle immagini, questa è la loro larghezza e altezza. Se sei pigro, like I am ;), è probabile che lasci che CSS faccia 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 la tua 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 all'attributo "src" del tuo file <img> tag.

La regola d'oro qui è: non utilizzare CSS per ridimensionare le tue 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 costruendo 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:

Union JackRojigualdaTricolore

La strada sbagliata

Potremmo essere tentati di scrivere qualcosa del genere:

<ul id ="bandiere">
    <in>
        <a href ="#" class ="lang active" id ="es">
            <img src="images/flags/flag_es.png" width="32" height="32" />
        </un'>
    </in>
    <in>
        <a href ="#" class ="lang" id ="in">
            <img src="images/flags/flag_en.png" width="32" height="32" />
        </un'>
    </in>
    <in>
        <a href ="#" class ="lang" id ="esso">
            <img src="images/flags/flag_it.png" width="32" height="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, useremo il nostro editor di immagini preferito per combinare i tre flag 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:

Sprite di bandiere

Ora possiamo usare la seguente struttura html per il nostro menu lingua:

<ul id ="bandiere">
    <in>
        <a href ="#" class ="lang active" 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#flags{
    list-style-type: nessuna !importante;
    margin-bottom: 0 !importante;
}
ul#flags li{
    Schermo: in linea !importante;
}
ul#flags li a{
    Schermo: inline-block !importante;
    larghezza: 30px !importante;
    border-radius: 50% !importante;
    straripamento: hidden !importante;
    text-align: centro !importante;
}
ul#flags li a#es{
    sfondo: url(../images/flags/flags.png) 0 0 no-repeat;
}
ul#flags li a#en{
    sfondo: url(../images/flags/flags.png) 0 32px no-repeat;
}
ul#flags li a#it{
    sfondo: url(../images/flags/flags.png) 0 64px no-repeat;
}

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:

Flag di lingua

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 usando 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

Qualunque sia la tecnica che stai utilizzando per ottimizzare le tue immagini, è quasi certo che PageSpeed ​​Insights (o GTMetrix o qualsiasi altro strumento che utilizzi 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 permette di comprimere le tue immagini senza perdita di dati e di risparmiare centinaia di Kb, come affermano nella loro home page. 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 Riot (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 a un 1000 di larghezza e 668 di altezza sarà il nuovo peso del file 173.9 Kb!

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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.