due chiacchiere

Ho infilato le iconcine nel CSS

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

  1. Emanuele ha detto:

    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

    1. camu ha detto:

      @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).

    2. Vincenzo La Rosa ha detto:

      @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.. 🙂

      1. camu ha detto:

        @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.

        1. Vincenzo La Rosa ha detto:

          @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à.. 😀

        2. camu ha detto:

          Infatti raramente mi spingo così oltre per i miei clienti. Sul fatto che pagano poco, t’assicuro che non succede solo in Sicilia eheh

  2. Lorenzo ha detto:

    Ottimo, valer per tutti i formati d’immagine? O solo .gif?

    1. camu ha detto:

      @Lorenzo: teoricamente vale per tutti, ma in genere sono gif e png quelli più piccoli e dunque adatti ad essere usati con questa tecnica.

    2. Lorenzo ha detto:

      @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?

      1. camu ha detto:

        @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 😀

        1. Davide ha detto:

          @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!).

        2. camu ha detto:

          @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…

        3. Lorenzo ha detto:

          @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 🙂

        4. Davide ha detto:

          @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… 🙂

        5. camu ha detto:

          @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 🙂

  3. Lorenzo ha detto:

    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)

    1. camu ha detto:

      @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 🙂

      1. Lorenzo ha detto:

        @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? 🙂

        1. camu ha detto:

          @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…

        2. Lorenzo ha detto:

          @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) 🙂

      2. Lorenzo ha detto:

        @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 😉

        1. camu ha detto:

          @Lorenzo: assolutamente 🙂 Io come hai intuito, sono aperto ad ogni nuova sperimentazione…

        2. Lorenzo ha detto:

          @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.

  4. Lorenzo ha detto:

    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

    1. camu ha detto:

      @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…

  5. Paolo ha detto:

    Ancora mi mancava questa tecnica per velocizzare il caricamento del sito 😀 Grazie per l’ennesima volta!

    1. camu ha detto:

      @Paolo: figurati, a buon rendere 🙂

Lascia un commento