Tempo fa avevo letto di una tecnica che consente di inserire le immagini di pochi byte direttamente nel proprio foglio di stile, codificandole opportunamente per trasformarle in testo semplice. Questo consente, tra le altre cose, di ridurre il numero di accessi che il browser deve fare per caricare tutti i pezzi che compongono una pagina, per la gioia sia del provider che ospita il sito, sia dell’utente che vedrà apparire i contenuti ancora più in fretta. Così non potevo esimermi dallo sperimentare le Data URI (questo il nome scientifico del giochino) sul mio blog. Mi è bastato usare uno dei tanti servizi disponibili, e copiare il risultato all’interno del mio foglio di stile. Che alla fine dell’operazione è ingrassato di circa 5 kb, i quali però diventano pochi byte dopo la compressione gzip. Se vuoi saperne di più, fatti pure avanti nei commenti!
Commenti
Ottimo lavoro. Vorrei avere il tempo di seguirti – puntualmente – a ruota, invece sono ancora fermo (con quasi tutto pronto) coi css sprities da mettere online. Dannato lavoro che ruba ore al giorno!
Ciao,
Emanuele
Risposte al commento di Emanuele
@Emanuele: a chi lo dici 🙂 Se non fosse per il lavoro a quest’ora avrei fatto “miracoli” su questo blog eheh. Comunque, proprio in questi giorni mi chiedevo che fine avesse fatto il tuo intervento sugli sprites. Io in settimana conto di creare i miei su alcune icone che avevo trascurato (tipo quella del contatto ed rss in alto a destra).
@Emanuele: e noi facciamo sciopero.. vogliamo i giorni di 28 ore.. 😉 😀
apparte lo scherzo.. anche io sono un po fermo.. però non per il lavoro.. ma per lo studio.. 🙁 cazz devo fare 7 materie tra giugno e settembre… apparte quello sto cercando di capire bene come funziona questa tecnica..
se non ho capito male migliora di molto la velocità di un sito internet.. (anche se ormai c’è l’adsl o la fibra) non tutti hanno la possibilità dell’alta velocità.. quindi mi sa che devo adeguarmi.. 🙂
Risposte al commento di Vincenzo La Rosa
@Vincenzo La Rosa: per fortuna quando studiavo io ancora non avevo un blog 🙂 Anzi, i blog praticamente non esistevano! E questo la dice lunga sulla mia vetustà. Ad ogni modo, riguardo alla tecnica, ci sono pregi e difetti, ma tra le cose positive, come giustamente dici, c’è quella di velocizzare un sito, impacchettando un gruppo di immagini piccole (pochi byte) in un unico file (il foglio di stile), evitando che il browser le debba richiedere una ad una. Lo svantaggio però è che ogni volta che cambi l’immagine, devi ricodificarla ed infilarla nel foglio di stile.
Risposte al commento di camu
@camu: si ovviamente se uno fa un lavoro per un tizzio che paga.. bisogna cercare di fare il lavoro migliore.. e questi piccoli dettagli (da dove si vede e si distingue un vero programmatore) fanno grande il lavoro, e per questo uno si fa pagare (il giusto ovviamente) [qua appena chiedi 100€ per un sito ti sparano perche gli sembra tanto] ma è anche vero che la sicilia è la sicilia… comunque.. anche l’enventuale aggioramento bisognerebbe farlo pagare.. 😉 poi bisogna considerare e fare una sorta di statisticha dei propri utenti.. che tipo di connessione hanno, e tutti i piccoli dettagli che ti aiutano a capire la situazione degli utenti e cosa vorrebbero.. ottimizzazione della velocità o no.. 😉 comunque al di la di questo un sito che porta i suoi frutti (qualora ci fossero, di sti tempi e impossibile, o quasi..) non può non essere ottimizzato per la velocità.. 😀
Risposte al commento di Vincenzo La Rosa
Infatti raramente mi spingo così oltre per i miei clienti. Sul fatto che pagano poco, t’assicuro che non succede solo in Sicilia eheh
Ottimo, valer per tutti i formati d’immagine? O solo .gif?
Risposte al commento di Lorenzo
@Lorenzo: teoricamente vale per tutti, ma in genere sono gif e png quelli più piccoli e dunque adatti ad essere usati con questa tecnica.
@camu: ottimo, così posso mettere i png e falli leggere a chiunque, anche a chi usa per lavoro ancora IE6 🙂
prima di fare questo snellisci le immagini con quel software di yahoo?
Risposte al commento di Lorenzo
@Lorenzo: no, attenzione, IE6 ed IE7 non supportano questo metodo, tant’è che io ho dovuto usare un barbatrucco (un foglio di stile a parte) per mantenere la compatibilità con quei browser. E si, ho fatto fare alle immagini una cura dimagrante con Google PageSpeed 😀
Risposte al commento di camu
@camu: com’è che non conoscevo ancora Google Page Speed? E com’è che tu totalizzi 99 su 100? Maledetto! (Io 88 – pensavo peggio, ma ora voglio arrivare almeno a 90!).
Risposte al commento di Davide
@Davide: di Page Speed ho parlato già in passato, si vede che non sei stato attento, ahi ahi ahi! 🙂 Sul punteggio, è il risultato di un luuuuuungo lavoro di limatura dei dettagli a 360 gradi, dal CSS all’uso di sottodomini specifici (anche di questo ho parlato), dall’uso di gzip “statico” all’ottimizzazione lossless di ogni singola immagine ed icona. E ti dirò di più: non arrivo a 100 solo per scelta personale, perché non voglio attivare la compressione dell’HTML…
Risposte al commento di camu
@camu: vado a cercarmi il post di page speed 🙂 comunque complimenti veramente, riesci a dimostrare che anche con un hosting economico si possono realizzare siti con ottime prestazioni 🙂
@camu: stavo notando che rispetto al test online, quello tramite plugin mi dà punteggi inferiori (tra l’altro vi è pure differenza tra il punteggio restituitomi dal plugin per Firefox e quello dall’estensione per Chrome!). Comunque sto cercando di minimizzare un po’ di roba anch’io… 🙂
Risposte al commento di Davide
@Davide: si, il plugin di Firefox a me da circa 92 sul mio blog, ma dipende dalla pagina che analizzo, si va da 92 a 96. Il tool online non l’ho mai provato, anche perché il plugin mi consente di salvare le versioni ottimizzate delle immagini 🙂
se posso farti una domanda semplice, ma per curiosità, come mai non adotti file svg? non sono più leggeri da trasferire? tanto alla fine parliamo di icone semplici… (forse per la compatibilità con ie, ma anche qui con questo sistema non va)
Risposte al commento di Lorenzo
@Lorenzo: si, svg non m’è mai piaciuto per via della compatibilità. Comunque, cosa intendi con “non va”? Dalle mie prove, il mio metodo dovrebbe funzionare anche su IE6, visto che ho implementato le espressioni condizionali di Explorer nel codice 🙂
Risposte al commento di camu
@camu: scusa mi sono espresso veramente male, intendevo visto che per ie (alcune versioni) hai adottato un foglio di stile specifico, perché non usare l’svg normalmente e fare la stessa cosa. chi ha ie al di sotto del 9 si prende un foglio css a parte e tutti gli altri vedono icone svg, che sono scalabili (e con i sistemi mobili fare uno zoom e vederli sempre nitidi è una piacevole sensazione) e in più dovrebbero essere leggeri nel trasferimento. penso che il vantaggio rispetto al metodo che hai descritto qui è che non devi modificare ogni volta il css se cambi di un pelo le immagini… che ne pensi? 🙂
Risposte al commento di Lorenzo
@Lorenzo: in effetti hai ragione 🙂 Ma come faccio a convertire un’icona scalare nel corrispondente vettoriale? La devo ridisegnare a mano? Sono una capra in questo settore…
Risposte al commento di camu
@camu: confesso che ho gettato lì l’idea ma che non so come si fa… vado a vedere se trovo qualche link e poi te lo posto da queste parti (sono più fotografo che grafico) 🙂
@camu: dimenticavo (tanto per romperti un po’ 🙂 ) magari si potrebbe fare anche uno sprites svg… mi studio un po’ l’argomento e poi ne riparliamo 😉
Risposte al commento di Lorenzo
@Lorenzo: assolutamente 🙂 Io come hai intuito, sono aperto ad ogni nuova sperimentazione…
Risposte al commento di camu
@camu: io ho capito che sei un malato dell’ottimizzazione e che risparmieresti anche un bit, e la cosa mi diverte perché lo sono anche io 😀
è dai piccoli dettagli che si vede un buon lavoro.
allora, vanno ridisegnate a mano… ci sono programmi free tipo inkscape ma suppongo tu possa utilizzare anche illustrator e mettere in un livello inferiore l’immagine da ricalcare… se hai un po’ di pazienza puoi fare anche lo sfondo attuale (questo verde) che sembra molto semplice da realizzare in vettoriale.
questo link spiega come realizzare icone semplici, ma è già un buon inizio:
http://www.starfishwebconsulting.co.uk/articles/inkscape-tastic-icons?/tasty_icons
Risposte al commento di Lorenzo
@Lorenzo: grazie per il link 🙂 Ci darò un’occhiata, anche se l’idea di ricalcare a mano le icone già mi mette paura, essendo io più uno sviluppatore che un grafico…
Ancora mi mancava questa tecnica per velocizzare il caricamento del sito 😀 Grazie per l’ennesima volta!
Risposte al commento di Paolo
@Paolo: figurati, a buon rendere 🙂