Skip to content

Instantly share code, notes, and snippets.

@Cycymomo
Created March 26, 2014 15:10

Revisions

  1. Cycymomo revised this gist Jun 5, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion base64VSspriteCSS.md
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@ J'ai d'ailleurs fait une étude de cas il y a peu de temps pour ma boite entre u
    - Une image convertie en base64 est au final 10% plus lourde que si elle est sur un sprite. (Base64 = 6bit pour un caractère. Ceux en ASCII/utf-8 représente 8bit donc passer une image en chaine dans le CSS accroit de 25% de plus le poids. Mais une fois gzippé, on regagne d'où les 10% en gros. Bref)
    - L'image, comme elle est dans le CSS, est obligatoirement chargée même si on n'en a pas forcément besoin
    - Un fallback est nécessaire pour IE 6/7 malheureusement (non support des data URIs
    - Pour les écrans rétina, ce n'est clairement pas fait pour alors que les sprites CSS
    - Pour les écrans rétina, ce n'est clairement pas fait pour. Alors que les sprites CSS oui

    **Points positifs comparés au sprite CSS :**

  2. Cycymomo revised this gist Jun 5, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions base64VSspriteCSS.md
    Original file line number Diff line number Diff line change
    @@ -4,12 +4,14 @@ J'ai d'ailleurs fait une étude de cas il y a peu de temps pour ma boite entre u
    ça consiste donc à encoder les images en base64 et les stocker dans le fichier CSS directement.

    **Points négatifs comparés au sprite CSS :**

    - Une image convertie en base64 est au final 10% plus lourde que si elle est sur un sprite. (Base64 = 6bit pour un caractère. Ceux en ASCII/utf-8 représente 8bit donc passer une image en chaine dans le CSS accroit de 25% de plus le poids. Mais une fois gzippé, on regagne d'où les 10% en gros. Bref)
    - L'image, comme elle est dans le CSS, est obligatoirement chargée même si on n'en a pas forcément besoin
    - Un fallback est nécessaire pour IE 6/7 malheureusement (non support des data URIs
    - Pour les écrans rétina, ce n'est clairement pas fait pour alors que les sprites CSS

    **Points positifs comparés au sprite CSS :**

    - Le sprite CSS impose quand même un appel HTTP request de plus pour charger ce sprite.
    - Tant qu'il n'est pas chargé, la page n'affichera pas les icônes. Donc on peut etre dans un "état intermédiaire" où l'utilisateur voit la structure, mais ne voit les images qu'après coup.
    Avec la méthode base64, la page doit avoir son CSS chargé avant de fournir l'affichage, donc les icônes le sont en même temps.
  3. Cycymomo created this gist Mar 26, 2014.
    16 changes: 16 additions & 0 deletions base64VSspriteCSS.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    J'ai d'ailleurs fait une étude de cas il y a peu de temps pour ma boite entre utiliser une image encodée en Base64 dans le CSS *Versus* un Sprite CSS pour gérer les images à but décoratif. Je partage les grandes lignes :

    *Autre alternative : image encodée en base64*
    ça consiste donc à encoder les images en base64 et les stocker dans le fichier CSS directement.

    **Points négatifs comparés au sprite CSS :**
    - Une image convertie en base64 est au final 10% plus lourde que si elle est sur un sprite. (Base64 = 6bit pour un caractère. Ceux en ASCII/utf-8 représente 8bit donc passer une image en chaine dans le CSS accroit de 25% de plus le poids. Mais une fois gzippé, on regagne d'où les 10% en gros. Bref)
    - L'image, comme elle est dans le CSS, est obligatoirement chargée même si on n'en a pas forcément besoin
    - Un fallback est nécessaire pour IE 6/7 malheureusement (non support des data URIs
    - Pour les écrans rétina, ce n'est clairement pas fait pour alors que les sprites CSS

    **Points positifs comparés au sprite CSS :**
    - Le sprite CSS impose quand même un appel HTTP request de plus pour charger ce sprite.
    - Tant qu'il n'est pas chargé, la page n'affichera pas les icônes. Donc on peut etre dans un "état intermédiaire" où l'utilisateur voit la structure, mais ne voit les images qu'après coup.
    Avec la méthode base64, la page doit avoir son CSS chargé avant de fournir l'affichage, donc les icônes le sont en même temps.