E’ Sempre Più Importante Ottimizzare Le Immagini Nel Proprio Blog

Il consumo di banda sta diventando un problema sempre più comune, soprattutto per i siti web di grandi dimensioni che attraggono un rilevante numero di visitatori. Se vi siete trovati di fronte ad un sito che, di solito, si caricava facilmente e velocemente e che ora, invece, è molto lento probabilmente vi siete imbattuti in un caso di consumo della banda sino ai suoi limiti. La difficoltà di un browser a caricare una pagina potrebbe proprio dipendere da un problema relativo alla banda (del server), la quale deve sopportare un numero troppo elevato di richieste e di “carichi”.

Per un sito internet in espansione, quale Codeido, è necessario intervenire ponendo in essere tutti gli “aggiustamenti” e gli accorgimenti che siano in grado di alleggerire il carico e il lavoro dei server. Ci sono moltissimi modi e tanti sistemi per ottimizzare il vostro sito web in modo da consentire una navigazione agevole e scorrevole come, ad esempio, nel caso in cui decidiate di ottenere o di inserire una prima pagina di Digg per uno dei vostri articoli.

Infatti, è importante aver chiaro un concetto: I server devono gestire tantissime richieste durante le “ondate” di grande traffico e non è tutta colpa delle immagini inserite negli articoli o da voi realizzate. La colpa può essere maggiormente attribuita al codice inserito, ai temi di WordPress, alla presenza di plugins e così via …e anche alle immagini. Ma se state utilizzando molte immagini di grandi dimensioni, il server dovrà fare del lavoro straordinario per caricare le immagini; senza l’ottimizzazione necessaria il vostro sito potrebbe continuare ad essere caricato lentamente, o a non essere caricato per nulla, fino allo smaltimento del traffico sulla rete.

Ci sono molti modi, come già detto, per rendere migliore e più veloce il vostro sito, ma noi ci concentreremo sull’ottimizzazione delle immagini presenti sul vostro sito.

  1. Il formato delle immagini

La maggior parte delle persone non capisce quale sia la differenza tra un’immagine JPG, BMP, PNG, GIF o altri tipi di immagini compatibili con la rete Internet, non comprendendo neppure quale sia il loro impatto con l’intero sito presente sulla rete stessa. Tutti i diversi formati sono, semplicemente, riferiti a differenti tipologie di compressione dei dati che compongono le immagini. Essi fanno parte della directory “Lossy Compression Format”.

Forse avrete incontrato anche il formato RAW in alcune macchine fotografiche digitali di alto livello. È un formato che occupa molto più spazio (e che consente di avere immagini migliori nel momento in cui le si stampa su carta), il che significa che tali immagini impegneranno anche molto più spazio all’interno della vostra scheda di memoria rispetto, ad esempio, ad un’immagine di formato JPG. In questo caso si tratta di un tipo di compressione più limitata rispetto a quella prevista per altre tipologie di immagini maggiormente compresse.

Qui potete trovare una piccola descrizione dei più popolari formati di immagine recuperata direttamente da Wikipedia (inglese e italiano):

[box type=”info”]JPEG (Joint Photographic Experts Group) – è un sistema di compressione delle immagini; le immagini che vengono compresse in JPEG sono generalmente salvate nel formato JFIF (JPEG File Interchange Format ossia formato per l’interscambio delle immagini JPEG). La compressione in JPEG, nella maggior parte dei casi, porta alla perdita di alcuni dati. In DOS l’estensione utilizzata per i file JPEG/JFIF è JPG (ma altri sistemi operativi possono utilizzare anche la dicitura JPEG). Ormai ogni fotocamera digitale è in grado di salvare i file in formato JPEG/JFIF, il che determina un’organizzazione delle immagini di 8 bit per colore (rosso, verde e blu) per 24 bit totali; questo consente di realizzare file relativamente piccoli e leggeri. Quando non è troppo marcata tale compressione non intacca in modo visibile la qualità dell’immagine, ma i file JPEG “soffrono” di una progressiva degradazione nel momento in cui vengono ripetutamente modificati e salvati. Il formato JPEG/JFIF è anche usato come algoritmo di compressione delle immagini per il i file di Adobe PDF.

TIFF (Tagged Image File Format) – è un formato flessibile che consente, normalmente, di salvare I file a 8 o 16 bit per colore (rosso, verde e blu) per un totale, rispettivamente, di 24 e 48 bit totali; tali file, in genere, vengono salvati con l’estensione TIFF o TIF. La flessibilità dei file TIFF può essere, allo stesso tempo, un vantaggio e uno svantaggio; innanzitutto, non esiste un lettore che riesca a visualizzare tutti i tipi di TIFF. Tale tipologia di file può essere sia a compressione limitata sia rilevante; in alcuni casi si hanno buoni livelli di compressione con limitata perdita di dati per le immagini a doppio livello (in bianco e nero). Alcune macchine fotografiche digitali possono salvare i file in formato TIFF, usando l’algoritmo di compressione LZW per una minore perdita di dati. Tuttavia, il formato TIFF spesso non è ben supportato da alcuni tipi di browser. Il TIFF viene attualmente utilizzato quale formato standard per la fotografia e la stampa professionale. Il formato TIFF può gestire particolari tipologie di colori come accade per il CMYK (Cyan, Magenta, Yellow, Key Black ossia un sistema di quadricromia particolare formato dal Ciano, dal Magenta e dal Giallo) che vede anche l’utilizzo di particolari tipologie di colori per la stampa. Il pacchetto software OCR (Optical Character Recognition) è in grado di creare alcune forme, in genere monocromatiche, di file TIFF dalla scansione di pagine di testo.

RAW – si riferisce ad una “famiglia” di formati, definiti “grezzi” presenti, tra le diverse opzioni, all’interno di alcune macchine fotografiche digitali. Queste tipologie di immagini sono compresse in modo da non perdere nessun dato, o in modo, comunque, da determinare una minima perdita di essi, producendo, comunque, file che hanno un peso minore di quelli TIFF e di quelli completamente rielaborati dalle stesse fotocamere. Nonostante esista un formato standard per le immagini in raw, (ISO 12234-2, TIFF/EP), i formati raw utilizzati dalla maggior parte delle fotocamere digitali non sono standardizzati o documentati, e possono differire da produttore a produttore. Molti programmi di grafica ed editor di immagini possono non essere in grado di leggere alcuni o tutti i formati raw, e tra quelli più vecchi questo accade spesso, non consentendo di aprire e utilizzare le immagini in raw. Si è cercato di standardizzare il formato raw creando file digitali negativi di Adobe (DNG); tali file possono essere usati dalle macchine fotografiche, oppure all’interno di strumenti e sistemi di archiviazione di immagini il cui formato sia stato convertito da un precedente, e non “documentato” formato raw. Il DNG è utilizzato da alcune tipologie di macchine fotografiche “di nicchia” che includono alcuni modelli della Pentax, della Leica e della Samsung. Il formato raw previsto per più di 230 modelli di macchina fotografica, che includono anche modelli di produttori di largo mercato quali Canon, Nikon, Sony e Olympus, può essere trasformato in DNG. Tale formato è stato creato sulla base del sistema ISO 12234-2, TIFF/EP, e l’aggiornamento ISO del TIFF/EP dovrebbe includere alcune delle modifiche previste da Adobe e degli sviluppi e aggiornamenti previsti per DNG. Anche le cineprese e le videocamere sono interessate e prese in considerazione per lo sviluppo di risorse in raw. Le Arriflex D-20 e D-21 dell’ARRI prevedono una risoluzione raw da 3K seguendo un modello Bayern per le immagini fisse (una per ogni fotogramma) salvate in un particolare formato, con estensione .ari. L’azienda Red Digital Cinema Camera, che utilizza i sensori Mysterium per foto e videocamere, usa un ulteriore formato chiamato REDCODE (.R3D è l’estensione prevista per i file) che consente di salvare insieme le informazioni, in un unico file compresso, di audio e video.

PNG (Portable Network Graphics) – è un formato creato quale successore, gratis e open source, del formato GIF. I file PNG supportano la tecnologia truecolor (con 16 milioni di colori), differentemente dai file GIF con i quali si arrivava a soli 256 colori. L’utilizzo di tale formato è eccellete soprattutto in quei casi nei quali le immagini abbiano aree grandi dai colori non uniformi. Il sistema di compressione PNG, che consente una limitata perdita dei dati, è ottimo per tutte le attività di modifica ed intervento sulle immagini. Tutti i formati che consentano una limitata perdita di dati, come il JPG, sono i migliori nel caso in cui sia necessaria la distribuzione e l’utilizzo su larga scala delle immagini; soprattutto, il JPG è più utile in questi casi in quanto i file salvati in tale formato sono più piccoli di quelli in PNG. Alcuni browser di vecchia data possono non supportare le immagini in PNG; tuttavia, così come Mozzilla Firefox e Internet Explorer 7, tutti gli attuali browser web supportano, per gli usi più comuni, i formati PNG, incluso quello a 8 bit con completa traslucenza (Internet Explorer 7 potrebbe mostrare alcuni colori un po’ strani per le immagini con traslucenza ma solo nel caso in cui ad essa si combini il filtro opacità di IE). L’interlacciamento Adam 7 consente anche di avere un’anteprima abbastanza veloce anche quando la percentuale di immagine oggetto di trasmissione sia ancora piuttosto bassa. PNG dà la possibilità di sostituire, grazie ad un formato non sottoposto a brevetto, le immagini GIF, consentendo anche di superare gli usi più comuni delle immagini TIFF. Le immagini colorate, quelle in scala di grigi e quelle in truecoloro sono supportate, con la presenza anche di un ulteriore “canale alfa”. Le immagini PNG sono create in modo da poter essere utilizzate per i sistemi di visualizzazione online e per il World Wide Web; esse, infatti, sono visualizzabili nella loro interezza utilizzando progressivamente le differenti opzioni per la visualizzazione. I file PNG sono resistenti in quanto si prevede sia la possibilità di valutare l’integrità dell’intero file, sia si individuare facilmente eventuali errori di trasmissione. Inoltre, con il formato PNG si possono memorizzare anche i dati relativi alla gamma e alla cromaticità per consentire una sempre più precisa rispondenza dei diversi tipi di colori anche modificando la piattaforma di utilizzo. Alcuni programmi non gestiscono correttamente i file PNG, il che può determinare il salvataggio,e la visualizzazione, di immagini più scure di quelle originali. I formati di immagini animate derivate dal PNG sono il MNG e il formato APNG. Quest’ultimo è supportato anche da Firefox e Opera ed è compatibile con il PNG.

GIF (Graphics Interchange Format) – è limitato ad una gamma di 8 bit di colori, o, al massimo, a 256 colori. Questo fa sì che tale formato sia utilizzato per salvare immagini grafiche con pochi colori, come semplici grafici, forme, loghi e immagini con lo stile cartoon. Il formato GIF supporta le animazioni ed è, appunto, spesso utilizzato proprio per la realizzazione e il salvataggio di immagini animate. Inoltre, utilizza una compressione minima che è molto più efficace nel momento in cui ci si trovi di fronte a grandi aree di colore, con una sola tinta; invece, è poco consigliato nel caso in cui si prendano in considerazioni immagini dettagliate o retinate.

BMP (Windows bitmap) – serve per gestire file grafici all’interno di Windows. I file BMP non sono compressi, anche nel caso in cui siano particolarmente “pesanti”. Il loro vantaggio è dato dalla semplicità e dalla compatibilità con i diversi programmi di Windows.[/box]

Immaginate di stare utilizzando un’immagine BMP quando, ad un certo punto, 10 mila persone cercano di caricare il vostro blog. Il vostro blog contiene 5 immagini BMP con un peso di 5 MB ognuna. Questo significa che una sola persona sarebbe in grado di aggiungere un carico di 25 MB al vostro traffico di banda. E si sale facilmente rispetto a tale cifra. Infatti, se 10 mila persone cercassero di caricare 5 immagini per un totale di 25 MB esse aggiungerebbero un carico, sulla vostra banda, di 250 GB in un breve lasso di tempo. Ovviamente, com’è di facile comprensione, il formato di un’immagine all’interno del vostro sito può avere un grande impatto sulla vostra rete e sulla sua velocità e, com’è chiaro, anche sulla possibilità di caricamento e raggiungimento del vostro sito internet.

[box]In conclusione: Usate un formato con una buona compressione per le immagini, qualora il vostro sito attiri parecchio traffico. Rimarrete sorpresi dalla qualità che riuscirete a raggiungere semplicemente comprimendo in modo significativo le vostre immagini. Potete, ovviamente, optare per il formato a voi più congeniale, tuttavia tutto dipende dalla portata della vostra banda, oltre che dal traffico che viene generato dal vostro sito. Se vi trovate a fare i conti con un server che non è in grado di sostenere tutto il carico generato dal vostro sito non esiste ragione per non optare per un risultato di qualità migliore.

In ogni caso, è sempre necessario ricordare che la velocità di un sito e di un tipo di navigazione diventa sempre più importante di questi tempi; infatti, i motori di ricerca calcolano il tempo di risposta del vostro sito e utilizzano tale informazione per individuare quale “posizione” dare a tale indirizzo nelle loro liste di ricerca. Più il vostro sito si dimostrerà veloce, migliore sarà la posizione raggiunta nei risultati dei motori di ricerca. Comunque, non focalizzatevi solo sull’obiettivo velocità. Esistono ancora utenti interessati al vostro sito e se la scarsa qualità delle immagini dovesse far apparire tutto peggiore, non attirereste molti utenti. La chiave sta nel bilanciare le diverse esigenze.[/box]

2. CSS invece di immagini

In alcuni casi i designer utilizzano un’immagine ad un solo colore invece di codificare i differenti colori, utilizzando CSS. È un errore comune che molti designer fanno,  e va tutto a sfavore dell’utilizzo della vostra banda. Davvero, se vi trovate a progettare un elemento grafico nel quale si richiede l’utilizzo di un’immagine, come, ad esempio, una semplice ombreggiatura, è proprio l’immagine la via da seguire. In questo caso la compressione può essere più difficile e, talvolta, può andare a scapito della qualità.

Nel caso in cui l’immagine non fosse realmente necessaria potreste utilizzare il colore di sfondo #000 o #0f0f0f (dipende dal colore che si vuole ottenere).

L’aspetto e il risultato finale che si vogliono ottenere devono essere chiari prima di iniziare il lavoro, e questo può significare che vi dobbiate occupare in futuro di valutare se il vostro sito traffico intasa troppo la rete, senza preoccuparvi, almeno inizialmente, del fatto per cui il vostro sito possa rimanere “congelato” per qualche tempo. In ogni caso, è importante ricordare che tutti i siti passano attraverso diverse fasi durante le quali sarà necessario impegnarsi per semplificare, eliminare o modificare alcune caratteristiche allo scopo di consentire il fluire di maggior traffico.

[box]In conclusione: Assicuratevi di aver progettato il design e l’aspetto del vostro sito prima di iniziare la fase di implementazione. In questo modo sarete in grado di ridurre il vostro progetto e di riprogettarlo in modo da consentire al sito stesso di ospitare maggiori visitatori. Rimarrete sorpresi da ciò che riuscirete a fare utilizzando CSS al posto delle immagini. E, allo stesso tempo, a volte sarà più semplice e veloce utilizzare proprio le immagini, anche se non è sempre la miglior via da intraprendere. [/box]

3. Disabilitate l’Hot Linking

È più comune di quanto crediate: molti utenti utilizzano il vostro traffico senza saperlo. Questo fenomeno si chiama, in gergo, Hot Linking. È un problema diffuso e può rallentare di molto il vostro sito. Tuttavia, così come per altri problemi, la soluzione per eliminare gli Hot Linking è semplice.

Utilizzando un file .htaccess è possibile disabilitare l’utilizzo delle vostre immagini al di fuori del vostro sito internet, eliminando le “sanguisughe” prima che provochino una riduzione del vostro potere di banda. Tutto quello che dovete fare è creare un file utilizzando .htaccess Generator da Basix inserendo il file stesso nella cartella che contiene le immagini che utilizzate per il vostro sito. Invece di visualizzare la vostra immagine, gli altri utenti, che vi rubavano traffico, vedranno una semplice crocetta rossa che indicherà che l’immagine non è più disponibile.

Per un tutorial passo passo potete visitare questo indirizzo .htaccess Tutorial. Qui potrete trovare ulteriori informazioni e istruzioni per evitare che le immagini vi vengano indebitamente prese dal vostro sito internet.

[box]In conclusione: L’approccio con .htaccess vi consente di evitare le sanguisughe che consumano il vostro traffico di banda. Tuttavia, è necessario che conosciate il rovescio della medaglia: qualora decidiate di inserire le vostre immagini in un’area sicura con .htaccess potreste proibire anche a siti quali Digg, StumbleUpon e altri social media di inserire le immagini nelle anteprime che si riferiscono ai vostri post e articoli. Questo potrebbe ridurre le visite al vostro sito. Dovete soppesare bene vantaggi e svantaggi. Molto dipende dal tipo di sito che avete e gestite. Se è vostra intenzione condividere con molte persone il suo contenuto, forse mettere al sicuro le immagini non è la strategia migliore. Tuttavia, se, invece, avete allestito un sito di fotografia, forse mettere al sicuro le vostre immagini potrebbe essere la via da seguire, assicurandovi che molti visitatori sappiano dove trovare i vostri capolavori. [/box]

4. Il servizio di Hosting

Un altro aspetto importante quando si affronta il problema relativo al risparmio di banda si riferisce alla necessità di assicurarsi di avere a disposizione un servizio di hostig che vi permetta di ottenere ciò che desiderate. Scegliete un servizio che vi consenta di attirare i visitatori per i quali il sito è stato creato. Iniziare dal piccolo non è di certo sbagliato ma assicuratevi di poter ingrandire il vostro sito, e il traffico stesso, qualora diventi necessario.

Un errore comune è quello di ricorrere alla soluzione meno dispendiosa, accorgendosi solo dopo di dover cambiare operatore per poter aumentare l’ampiezza della banda e gli accessi al sito. Spostare un sito può essere costoso e anche fastidioso, oltre al fatto per il quale potreste non trovarvi a disposizione delle medesime risorse e servizi che vi venivano precedente offerti, nonostante l’alta qualità del nuovo servizio di hosting.

Ecco, quindi, una lista dei maggiori servizi di hosting in grado di offrirvi anche delle forme di upgrade senza discussioni, qualora vi fosse necessario:

[box type=”info”]

BlueHost

“La nostra tecnologia è ciò che ci distingue dalle altre aziende. Abbiamo la nostra base dati, costruiamo i nostri server, abbiamo la nostra rete che attraversa tutta la Nazione, realizziamo le nostre versioni di Linux, adatte alle diverse esigenze. In breve, siccome ci occupiamo di ogni aspetto dell’attività di hosting, non sarete obbligati a vedervela con 5 diverse compagnie per avere la risoluzione di un problema”   [CONSIGLIATO da Codeido]

VPS Hosting

“Le alte performance di SherWeb e del VPS vi daranno la possibilità di controllare un server dedicato con la raggiungibilità, la flessibilità e la semplicità di un servizio di hosting condiviso. La nostra tecnologia di server virtuale vi darà la possibilità di aumentare la capacità del vostro server, qualora ciò divenga necessario in base alle vostre richieste, senza la necessità di comprare dell’hardware aggiuntivo”

MediaTemple

“Media Temple ospita diversi siti web. Piccoli e grandi. Per anni abbiamo preso in mano tecnologie complesse rendendole più semplici per consentirne una gestione da parte del cliente finale e dei privati. I nostri prodotti sono progettati per essere potenti, efficienti e per avere prezzi accessibili. Guardatevi pure intorno, date un’occhiata ai nostri prodotti: magari Media Temple potrebbe essere una buona scelta per il vostro prossimo progetto”.

InMotion Hosting

“La nostra rete di web hosting è basata sui sistemi operativi Linux e Unix, veloci e affidabili. Offriamo una monitorizzazione 24 ore su 24 e 7 giorni su 7 per ogni forma di attività anomala, con una continua comparazione e valutazione delle performance. Questo ci consente di rispondere immediatamente alle richieste più semplici, crescendo insieme all’aumentare anche dell’ottimizzazione del nostro sistema. Tutto questo per far funzionare sempre tutto al meglio ed in modo economico”

Rackspace

“Fanatical Support® ha reso Rackspace la leader nel mondo in fatto di Hosting. Forniamo i nostri servizi ad aziende di tutti i tipi e in tutte le parti del mondo. Abbiamo iniziato nel 1998 e da quel momento siamo arrivati ad avere, oggi, più di 99.000 clienti, di cui più di 80.000 che utilizzano il sistema di cloud computing” [/box]

[box]In conclusione: Tenete in considerazione la quantità di utenti che vi piacerebbe richiamare e soddisfare. Questo vi consentirà di individuare con quale servizio di hosting iniziare e se vi servirà qualche forma di upgrade. Inoltre, considerate anche le opzioni e i servizi che vi servono per far rendere al meglio il vostro sito, individuando anche quanta banda vi servirà per utilizzarlo al meglio. Trascurare le implicazioni e le opzioni che costituiscono la base del vostro sito potrebbe portarvi ad avere problemi relativi all’implementazione dello stesso. Se siete convinti di volere il miglior servizio, quello che calza a pennello rispetto alle vostre necessità, sedetevi, individuate le vostre esigenze (e le modalità di realizzazione) e prendete in considerazione anche ciò che vi potrà essere utile nel lungo periodo. In questo modo avrete un’immagine chiara del vostro sito e della sua progressione nel tempo.[/box]

Leave a Reply

Your email address will not be published. Required fields are marked *