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. ha scritto:

    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

    1. camu
      ha scritto:

      @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 scritto:

      @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

      1. camu
        ha scritto:

        @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
        1. Vincenzo La Rosa
          ha scritto:

          @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
        2. camu
          ha scritto:

          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 scritto:

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

    Risposte al commento di Lorenzo

    1. camu
      ha scritto:

      @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 scritto:

      @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

      1. camu
        ha scritto:

        @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
        1. Davide
          ha scritto:

          @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
        2. camu
          ha scritto:

          @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
        3. Lorenzo
          ha scritto:

          @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 scritto:

          @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
        5. camu
          ha scritto:

          @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 scritto:

    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

    1. camu
      ha scritto:

      @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

      1. Lorenzo
        ha scritto:

        @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
        1. camu
          ha scritto:

          @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
        2. Lorenzo
          ha scritto:

          @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 scritto:

        @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
        1. camu
          ha scritto:

          @Lorenzo: assolutamente πŸ™‚ Io come hai intuito, sono aperto ad ogni nuova sperimentazione…

          Risposte al commento di camu
        2. Lorenzo
          ha scritto:

          @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 scritto:

    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

    1. camu
      ha scritto:

      @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 scritto:

    Ancora mi mancava questa tecnica per velocizzare il caricamento del sito πŸ˜€ Grazie per l’ennesima volta!

    Risposte al commento di Paolo

    1. camu
      ha scritto:

      @Paolo: figurati, a buon rendere πŸ™‚

Rispondi a camu

Torna in cima alla pagina