Ottimizzazione delle immagini – una facile vittoria per un sito più veloce
L’ottimizzazione della velocità di un sito web può essere una pratica complessa e, a volte, troppo tecnica, ma i “non-tecnici” saranno felici di sapere che uno dei maggiori problemi è in realtà più facile da risolvere di quanto non si pensi.
Il problema con le immagini
Le immagini sono in genere uno dei più grandi problemi per quanto riguarda il tempo di caricamento della pagina. Anche con il caching e un CDN, un’immagine non ottimizzata trascinerà verso il basso il tempo di caricamento della pagina. Ma, come proprietario del sito, le immagini sono completamente sotto il vostro controllo, quindi imparando a lavorare e ottimizzare le immagini, si potrà avere un grande impatto sulla velocità del vostro sito.
Guardando i siti internet, vedo che le immagini contribuiscono, in media, circa il 30% del tempo totale di caricamento della pagina. Spesso questo è il maggior responsabile della lentezza di caricamento. In casi estremi, potrebbe essere più vicino al 60% del tempo di caricamento.
Ecco un esempio di ciò che le immagini non-ottimizzate faranno al vostro sito:
Il tempo di caricamento è di 10,5 secondi e la dimensione della pagina è 8MB. Di quelli 8MB, le immagini rappresentano 6.7MB. Questo è fuori controllo!
Il numero di richieste http viene comunemente citato come un fattore nel tempo di caricamento, mentre è importante, in ultima analisi, la dimensione della pagina che è il vero indicatore della velocità o la lentezza. Si può avere un piccolo numero di richieste HTTP, ma se tali richieste sono quelle di immagini giganti, si avrà un problema reale.
Reducing page size by reducing image size is a simple and effective strategy for improving load time.
Comprendere le Dimensioni e la grandezza del file
Le dimensioni dell’immagine, cioè la quantità di spazio che un’immagine occupa sullo schermo, si misurano in pixel, essi non riguardano al 100% la grandezza del file, ma sono tra di loro correlati. Più grande è la dimensione della vostra immagine, maggiore sarà la grandezza del file.
La dimensione del file viene misurata in kilobyte (KB) e megabyte (MB) 1MB = 1000KB
Per darvi un punto di riferimento, il contenuto della colonna principale di questo blog è larga 796 pixel.
Se si scatta una foto con lo smartphone, a seconda delle impostazioni, quella foto potrebbe essere nella dimensione di 2500 pixel di larghezza (o anche più), con una grandezza di 3 MB (o 3000 KB). Se dovessi fare una foto con il mio telefono e caricarla su questo blog, senza alcuna modifica, io andrei a caricare un file che è circa 3 volte più grande di quanto dovrebbe essere – un totale spreco di risorse e di lentezza di caricamento della pagina.
Così, mentre scattare foto del telefono e caricarle sul tuo blog potrebbe essere semplice, ciò crea un vero problema se si desidera un sito veloce, con l’aggiunta di tonnellate di peso superfluo.
Before you upload that photo, you need to do two things: resize it and compress it.
Ridimensionare le immagini
Quindi la prima cosa che devi fare è ridimensionare le immagini al formato corretto per il tuo sito. Per le immagini del blog, prima bisogna capire quanto è larga l’area del contenuto del tuo blog e mai caricare un’immagine più ampia di quella. Se avete intenzione di utilizzarla in un dispositivo di scorrimento, assicurarsi, prima, di determinare le dimensioni dello slider.
Come fare a sapere quanto ampia è la vostra zona del blog?
Se sai come usare gli strumenti di sviluppo integrati a Chrome o Firefox, è possibile utilizzare quelli. Ma se questo ti suona spaventoso ci sono strumenti più semplici disponibili in rete.
Se sei su un Mac, c’è uno strumento di cattura dello schermo, Grab, già integrato, e quando si delinea un’area dello schermo vi dirà i pixel (Comando veloce CMD+SHIFT+4). Questo articolo lo spiega in modo più dettagliato.
Oppure è possibile installare l’addon facile facile Page Ruler per Chrome
Una volta che hai capito quali dovrebbero essere le dimensioni delle immagini, è possibile utilizzare uno dei seguenti strumenti per ridimensionare le immagini:
Applicazioni per il Ridimensionamento
- —Photoshop
- —GIMP – free, Windows & Mac
- —Irfan View- free per Windows
- —Preview for Mac – è già installato!
- —Developers on Macs can check out sips, a command line tool
Strumenti per il ridimensionamento Online
- —Picmonkey.com
- —Pixlr.com (ha anche un’app mobile)
- —Fotor.com (ha anche un’app mobile)
Non importa quale usate – tutto quello che dovete fare è individuare la funzione di ridimensionamento. Sarete in grado di settare la larghezza in pixel desiderata e l’applicazione farà in modo che l’immagine rimanga in proporzione regolando automaticamente l’altezza.
Formati immagine
Le Immagini sul web possono essere salvate sia in .jpg, .png, o eventualmente .gif
JPEG sono i più utilizzati per le fotografie e le immagini di uso generale in cui non servono trasparenze. È possibile comprimerle facilmente e ottenere un file di dimensioni inferiori adatte per il web.
PNG spesso genererà un file di grandi dimensioni quindi deve essere utilizzato solo quando si dispone di un’immagine che richiede trasparenza.
GIF sono utilizzati meno di frequentemente. Hanno una gamma limitata di colore quindi possono essere utilizzate solo per le immagini molto semplici, ma occupano poco spazio.
Compressione delle Immagini
Fino ad ora abbiamo affrontato le dimensioni fisiche dell’immagine, ora cerchiamo di affrontare il ‘peso’ delle immagini. Noi vogliamo comprimere l’immagine per renderla il più snella e veloce possibile per il caricamento. L’obiettivo è quello di ridurre la dimensione del file. Non c’è un numero magico di come ogni immagine dovrebbe essere, in quanto dipende da come verrà utilizzata l’immagine. Immagini utilizzati in un hero banner o uno slider saranno più grandi, ma se avete bisogno di molti slider, a me piacerebbe che fossero ciascuno di 100 KB o meno.
Piccole immagini che dovranno essere utilizzate per le miniature, i loghi, ecc saranno molto molto più piccole. Il logo nella parte superiore di questo blog, per esempio, è 3.8KB.
Con la compressione ci può essere una leggera perdita in termini di qualità, siete alla ricerca di un equilibrio tra qualità e dimensione del file. Ma ricordate sempre che la più piccola è la dimensione del file, più veloce sarà il tempo di caricamento.
Applicazioni
- —Photoshop – assicuratevi di usare la funzione Save For Web
- —GIMP
- —ImageOptim (Mac)
Online Tools
- —WP Rocket ha appena lanciato il suo strumento di ottimizzazione delle immagini, Imagify. Lo si può utilizzare tramite il sito web Imagify.io, o installare il plugin WordPress: https://wordpress.org/plugins/imagify/
WordPress Plugin
E ‘preferibile ridimensionare e comprimere le immagini prima di caricarle in WordPress.
Tuttavia, se il sito è già esistente, è necessario ottimizzare le immagini che sono già lì.
Per le immagini cruciali, più importanti come loghi, intestazioni e altri, che si caricano in ogni pagina del tuo sito, che sarebbe stato meglio avere le nuove versioni delle immagini, come descritto sopra, è meglio installare il plugin Enable Media Replace plugin. Questo vi permetterà di sostituire semplicemente le immagini esistenti nella vostra libreria multimediale con i nuovi, quelli ottimizzati, senza disabilitare o cancellare tutti i collegamenti.
Per le altre immagini che sono nella vostra libreria multimediale, dove non sarebbe realistico, ne salutare andarle a sostituire tutte individualmente, ci sono alcuni plugin utili che vi aiuteranno.
EWWW Image Optimizer
Questo plugin può passare attraverso la vostra libreria multimediale esistente e comprimere tutto in modo automatico.
Se costruire siti per i clienti o avete un sito con più utenti dove non è possibile garantire che tutti utilizzano le migliori pratiche per caricare immagini ben ottimizzate, i plugin di seguito riportati aiuteranno a mitigare gli errori.
Imsanity
È possibile determinare le impostazioni in modo che se qualcuno carica un’immagine gigantesca, essa verrà automaticamente ridotta alle dimensioni massime di tua scelta. Non più immagini di 4000 pixel che intasano la vostra biblioteca multimediale!
Compress JPEG & PNG images
Una volta impostato, questo utilizza l’API TinyPNG per comprimere automaticamente le immagini durante il caricamento. È possibile ottenere una chiave API gratuita fino a 500 immagini / mese che dovrebbe essere abbastanza per un blogger medio.
Se avete bisogno di punto di riferimento per calcolare la velocità del vostro sito, o fare un confronto prima / dopo con le immagini dopo l’ottimizzazione, seguite questa guida su come misurare correttamente il tempo di caricamento del vostro sito.
Credit. Wp-Rocket
Se vuoi registrarti alla newsletter per essere informato delle prossime novità , invia il modulo qui sotto!!!
[contact-form-7 id=”4″ title=”Sottoscrizione Newsletter”]
