Velocizzare Sito Web – Le Immagini
Eccoci alla prima puntata della rubrica Velocizzare Sito Web, presentata ieri pomeriggio e portata avanti in un periodo nel quale il tempo di caricamento delle pagine è diventato particolarmente importante agli occhi dei webmaster.
Come prima cosa mi sembra doveroso parlare del punto più evidente e importante che va ad influenzare le dimensioni delle pagine web: le immagini. Probabilmente vi sarete accorti che generalmente gli elementi più lenti da caricare in una pagina web sono proprio le immagini, stupende parti di grafica senza le quali probabilmente la metà dei siti web perderebbe senso.
In alcuni siti il problema sta semplicemente nel numero eccessivo di immagini, inserite senza senso ma ci sono anche portali che non possono vivere o perdono senso senza un giusto numero di foto: ad esempio i portali turistici e quelli di alberghi e ristoranti nei quali è fondamentale mostrare qualche immagine della struttura per stupire sin dalle prime occhiate il possibile cliente. Lo stesso problema si ripropone però anche in portali che non hanno a che fare così strettamente con le foto ma nei quali le immagini danno un tocco grafico fondamentale.
Parliamo quindi sin da subito non della rimozione di immagini superflue, per la quale non ci vuole alcuna guida, ma della diminuzione del “peso” di queste parti grafiche. Facendo una prima analisi tramite dei tools che si possono trovare in rete(e dei quali si parlerà nelle prossime puntate di questa rubrica) si può vedere quanto a volte le immagini possono incidere sul peso complessivo di una pagina:
Per diminuire le dimensioni di queste immagini ci sono vari modi, vediamone due:
Salvataggio per il Web tramite Photoshop
Photoshop, il noto software della Adobe, permette il salvataggio delle immagini ottimizzate per il web, scegliendo il giusto formato di compressione ogni volta. Scegliendo questo tipo di salvataggio è possibile andare a modificare diverse opzioni di salvataggio e scegliere quale formato e qualità dell’immagine fa per noi, cercando un compromesso fra estetica e peso dell’immagine.Usando questo tipo di salvataggio è possibile ridurre drasticamente il peso delle immagini.
Dopo aver aperto Photoshop e caricato l’immagine cliccare prima di tutto su File>Save for Web & Devices per far aprire la finestra di salvataggio:
Ora bisogna impostare tutti i parametri per riuscire ad ottenere il compromesso ideale fra qualità e leggerezza. Generalmente per le immagini abbastanza grandi che non richiedono la proprietà di trasparenza io uso il formato JPEG, scegliendo di volta in volta la qualità dal menu a tendina in alto:
- Low
- Medium
- High
- Very High
- Maximum
Si può poi andare ad operare sulla qualità tramite la scala numerica a lato da 0 a 100. In basso a sinistra, sotto l’immagine appaiono i dati che ci interessano: il peso ed il tempo di caricamento in base alla connessione, che può essere cambiata: di default è 56Kb.
Non avendo Photoshop è possibile comunque utilizzare programmi freeware come The Gimp, abbinato al plugin Save for Web.
SmushIt
Yahoo offre un ottimo servizio, Smush.it, tramite il quale è possibile ottimizzare le immagini senza perdere qualità. Per ottimizzare un’immagine non bisogna fare altro che recarsi sul sito SmushIt e scegliere in che modo inviare le immagini al tool: è possibile inserire diversi URLs, uno per linea o caricare le immagini direttamente dal proprio computer.
Alla fine del processo SmushIt restituirà le immagini ottimizzate e le renderà scaricabili sul proprio computer, indicando quanti byte sono stati salvati e qual’è la percentuale di byte risparmiati sul totale. A volte può succedere anche di ritrovarsi con immagini dalle dimensioni dimezzate grazie a questo tool, senza perdere qualità.
CSS Sprites
Un modo per ridurre il numero di immagini e quindi di richieste HTTP, e diminuire in questo modo il tempo di caricamento delle pagine, è l’uso delle CSS Sprites: in pratica si crea una sola grande immagine contenente più immagini e tramite la proprietà background position dei CSS si seleziona ogni volta una sola determinata porzione di tale immagine. In questo modo il risultato è identico ma le richieste HTTP diminuiscono.
E’ particolarmente usata per gli effetti di rollover: se avete un pulsante che cambia con il passaggio del mouse potete tenere le due immagini in un’unica immagine; un’operazione del genere è abbastanza semplice rispetto alle sprite fatte su una grande immagine e prelevando porzioni all’interno di essa ma se ci pensate dimezza le richieste HTTP relative alle immagini con il rollover.
Su HTML.it c’è un’ottima guida all’uso delle CSS Sprite per chi ha tempo e voglia di farlo manualmente(è ovviamente la cosa migliore in quanto vi da la possibilità di gestire totalmente la cosa). Ci sono invece alcuni tools per la creazione automatica delle CSS Sprite, ecco una piccola lista contente alcuni di questi tool, cercando nel web ce ne sono comunque altri:
Paolo Dello Vicario
11 gennaio 2010
Ciao Paolo, aggiungo solo che CSS Sprites si può fare anche su coppie di immagini, ad esempio sulle immagini che hanno un rollover. Tramite questa tecnica applicata anche solo ai rollover si dimezzano le chiamate al server.
, si può cominciare con poco e notare già i primi effetti.
Lo dico solo perchè sembra una tecnica estrema invece è molto semplice e non è necessario caricare tutti gli sfondi in un’unica jpg di millemila pixel
Ciao e buona settimana.
Ciao Francesco,
anche il sito della casa bianca usa la tecnica da te indicata per i rollover:
http://www.whitehouse.gov
Sì, le CSS Sprites per il rollover, soprattutto sui menu, è veramente molto usata.
Andare a selezionare quadratini da un’unica immagine è un’impresa e non è quasi mai realizzabile tra l’altro, per i rollover invece è molto più semplice!
Lascia un Commento!
Pagine
Ultimi Articoli
Advertising