Non sai come ottimizzare le immagini per il Web? Ti spiego come fare in questo articolo, usando i migliori strumenti online e programmi gratis.
Molti webmaster non conoscono bene l’importanza che possono avere le immagini, soprattutto nel Web e l’impatto che possono avere sulla velocità e le performance di un sito. Dalla mia esperienza, posso dirti che c’è una grande differenza e molti siti che ho avuto modo di vedere, sono lenti proprio a causa delle immagini; usano formati non adatti al web, le immagini a volte sono eccessivamente grandi, non compresse, non ottimizzate. Forse di starai chiedendo, ma come è possibile che solo qualche immagine non ottimizzata possa rallentare un sito web?
Prima di tutto, non ho parlato solo di un’immagine; pensa ad un normale blog, con blocchi di categorie e notizie, solitamente nell’homepage sono sempre mostrate una decina di notizie (minimo), con anteprime delle immagini vicino, magari uno slider nella parte superiore, qualche altra immagine nella sidebar o nel footer. Come vedi, parliamo già di 20 – 30 immagini, se non di più ancora.
Tutti kilobyte in più, che aumentano il peso complessivo della tua pagina web e di conseguenza, la rendono più lenta a caricarsi. Tanto è vero, che spesso su PageSpeed Insights o GTMetrix, due famosi strumenti per testare la velocità dei siti web, uno dei consigli più frequenti è proprio Optimize Images. Quando è presente, vicino questa voce, vengono anche riportate l’elenco delle immagini che puoi ottimizzare ed il risparmio in Kb. Quindi, mettiamoci all’opera!
Formati delle immagini
Esistono diversi formati per salvare le immagini, i principali sono soprattutto questi tre:
- Gif
Supporta la trasparenza ed è possibile realizzare delle semplici animazioni; - Jpg/jpeg
La più utilizzata perché permette di avere immagini più leggere; - Png
Molto simile al Gif, nasce nel 1994, come sostituto aperto del Gif presenta quindi delle migliorie rispetto a quest’ultimo;
Chiarita l’importanza di ottimizzare le immagini per il Web, ti mostro i migliori strumenti online ed alcuni programmi gratuiti che puoi utilizzare.
I nostri consigli
E’ possibile che tu sia un pò confuso, visto la varietà di formati disponibili per le immagini. Pertanto, cerco di riassumerti alcuni principi e consigli fondamentali:
- Le immagini in formato JPEG, sono quelle più utilizzate nel Web, assieme a quelle in formato .PNG;
- Le immagini in formato .PNG sono usate soprattutto quando hai bisogno di inserire immagini con la trasparenza, senza sfondo;
- Le immagini in formato .GIF, sono utilizzate in minor parte e solitamente, per immagini animate;
Qual’è la differenza tra le immagini JPEG e quelle PNG?
La principale differenza tra i due formati, sta nella compressione. Le immagini PNG, non sono compresse avendo pertanto una migliore qualità d’immagine; lo svantaggio, sta nell’avere dimensioni più grandi. Quelle in JPEG invece sono già compresse, con dimensioni minori rispetto alle PNG ma una qualità d’immagine inferiore.
Come usare le immagini per il Web?
Sicuramente userai delle immagini per il tuo sito, lo facciamo tutti. Ma è bene farlo con attenzione, rispettando alcune piccole regole, in modo da non intaccare le performance e rallentare il tuo sito. Ecco qualche utile consiglio da tenere sempre a mente:
- Carica file non eccessivamente grandi, che non superano i 30 – 40 Kb; se riesci a tenerti sui 10 – 15 Kb, ancora meglio;
- Se devi caricare una vera e propria foto, prova ad utilizzare il formato JPG; solitamente è il formato migliore per foto piene di colore e può farti risparmiare molti Kb;
- Evita il ridimensionamento delle immagini in automatico; questa pratica può rallentare un sito. Ogni immagine deve avere gli attributi “width” e “height”, altrimenti costringe il browser a calcolare automaticamente proporzioni;
Programmi per ottimizzare le immagini
Adobe Photoshop è un software a pagamento, indubbiamente uno dei più conosciuti del suo settore. Consente, tra le sue numerosissime funzioni, di ottimizzare le immagini per il web. Basta aprire un’immagine, cliccare su File e poi su Salva per Web e Dispositivi.
Verrà aperta una nuova schermata; sul lato destro, puoi impostare differenti formati di immagini. Per il formato JPEG, avrai differenti opzioni per la qualità. Quando selezioni le opzioni che preferisci, automaticamente vedrai nella parte inferiore la dimensioni dell’immagine. In questo modo, puoi ottimizzare le immagini per il web, con PhotoShop; mi rendo conto però, che si tratta di un software alquanto costo, per questo vediamo anche quali programmi gratuiti poter usare.
Un semplicissimo programma gratuito, per modificare e ottimizzare le immagini. Ha numerose caratteristiche, tra le quali: supporta molti formati di immagini, e’ molto veloce, duplice vista immagine originale e ottimizzata contemporaneamente, funzioni come: pan e zoom, ruotare, capovolgere. Regolazione di: luminosità, contrasto, gamma. Senz’altro da provare.
FILEminimizer Pictures permette di comprimere le tue foto e immagini fino al 98% usando la tecnica di ottimizzazione « nativa » che preserva la qualità e il formato originale. Contrariamente alla tecnologia di « zip », und decompressione successiva non è più necessaria. Le tue foto ottimizzate sono molto più piccole e ideali per l’invio via email o l’utilizzo nei siti web.
Creato dal programmatori di giochi, Ken Silverman, PNGOUT è un semplice e gratuito tool per ottimizzare le tue immagini. PNGOUT può essere avviato da riga di comando oppure tramite interfaccia Windows. Offre numerose opzioni per comprimere e ottimizzare al meglio le immagini, nei formato più popolari, ovvero JPG, GIF e PNG.
JPEGmini usa una particolare tecnologia per la ricompressione che riduce notevolmente le dimensioni delle immagini, senza intaccare la qualità. Puoi utilizzare la versione Free oppure acquistare quella Pro.
SuperGIF è una utility gratuita, per Windows e Mac OS, che permette di ottimizzare le immagini GIF. Ha un’interfaccia semplice ed intuitiva che permette di usare le funzioni per il Drag and Drop, e in alcuni casi, riesce a comprimere le immagini GIF anche del 50%. La versione Free, può comprimere solo un’immagine per volta, ma possiede tutte le caratteristiche della versione Pro, tranne quella del “batch processing”.
ImageOptim è una utility per Mac, che comprime le immagini senza perdita di qualità, trovando automaticamente il miglior rapporto di compressione, a seconda del tipo e dei colori dell’immagine. Il suo equivalente per i sistemi Windows, è Trimage.
PNGGauntlet
PNGGauntlet è l’equivalente di PNGOUT, ma con interfaccia grafica GUI. Può essere utilizzato per convertire JPG, GIF, TGA, PCX, e BMP in immagini PNG altamente ottimizzate. PNGGauntlet è perfetto per tutti gli utenti che non gradiscono la riga di comando, ma al tempo stesso possiede tutti i vantaggi algoritmici di PNGOUT.
Strumenti online per ottimizzare le immagini
Un servizio online gratuito ed efficiente, offerto da Yahoo, che permette ottimizzare un’immagine senza perdere di qualità.
TinyPNG è un tool online, che consente di ottimizzare le immagini PNG, senza perdere qualità. Tutto quello che devi fare, è caricare l’immagine sul sito di TinyPNG, comprimere l’immagine e scaricare la nuova versione ottimizzata.
Online Image Optimizer è uno strumento online, sviluppato da Dynamic Drive, utile per l’ottimizzazione e la compressione di immagini. E’ possibile inserire l’URL dell’immagine da ottimizzare oppure caricarla direttamente sul sito. Inoltre, puoi decidere se l’immagine finale deve essere convertita in un altro formato o deve mantenere quello iniziale. Puoi caricare immagini di dimensione fino a 2.86 MB.
Conclusioni:
Ti ho mostrato in questo articolo, come ottimizzare le immagini per il web. Ora hai diverse soluzioni per farlo, non ti resta che testare i tool online ed i programmi, e scegliere quelli con i quali ti trovi meglio. Per qualsiasi dubbio o domanda, noi siamo qui. Buona ottimizzazione!
