IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Signification de (data:image/png;base64)


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Homme Profil pro
    retraite
    Inscrit en
    Décembre 2015
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : retraite
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2015
    Messages : 4
    Par défaut Signification de (data:image/png;base64)
    Bonjour

    bien, ok je debute et donc je regarde à droite et à gauche
    pour me faire un site mais quand je tombe sur un truc comme
    ce qui suit, là .....

    est-ce que quelqu'un peut me dire à quoi correspond un code pareil
    pour un background ;

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    background: url('data:image/png;base64,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') #eee;

    Merci
    B M

  2. #2
    Expert éminent
    Avatar de adiGuba
    Homme Profil pro
    Développeur Java/Web
    Inscrit en
    Avril 2002
    Messages
    13 938
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Java/Web
    Secteur : Transports

    Informations forums :
    Inscription : Avril 2002
    Messages : 13 938
    Billets dans le blog
    1
    Par défaut
    Salut,


    C'est tout simplement une image encodé en base64.
    Il existe des outils online pour encoder/decoder du base64, comme http://base64online.org/decode/ par exemple.


    Cette technique est utilisé pour de petites images, afin d'éviter d'avoir à télécharger un fichier supplémentaire...


    a++

  3. #3
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2015
    Messages : 44
    Par défaut
    Bonsoir,

    Et en l'occurence il s'agit ici d'une image de fond composée de petits points...

    Pour voir à quoi ressemble cette image il suffit de copier-coller le code dans la barre de recherche de son navigateur favoris (enfin, au moins pour les vrais navigateurs...).

  4. #4
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 414
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 414
    Par défaut
    Cela permet au fichier d'avoir un rendu (ici le background) indépendant de l'existence d'un fichier image sur le serveur. Bien sûr faut pas en abuser, et même éviter quand c'est possible car ça alourdi le fichier html.

  5. #5
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2015
    Messages : 44
    Par défaut
    Base64 économise une requête http, mais la conversion donne de l'embonpoint au fichier qui prend 40% de poids en plus.

    D'aucuns disent qu'en activant gzip on s'y retrouve...

  6. #6
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 414
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 414
    Par défaut
    @Olivier C

    C'est le genre de données qui se compressent mal.

    Et puis avec la généralisation des ssd côté serveur les requêtes deviennent quasi instantanées sans compter que les images peuvent être mises en cache et donc chargées une seule fois par le navigateur.

    Avec cette solution la page sera toujours plus lourde à charger sans possibilité d'optimisation parallèle. On fait cela uniquement pour avoir une page indépendante du contexte, pas pour des problèmes de performance sinon c'est un mauvais calcul.

Discussions similaires

  1. [Image]Composition d'images PNG-24
    Par NikoGJ dans le forum Bibliothèques et frameworks
    Réponses: 3
    Dernier message: 22/11/2006, 21h05
  2. [D5] Zoom d'image PNG avec transparence
    Par Thierry Laborde dans le forum Delphi
    Réponses: 9
    Dernier message: 12/06/2006, 15h41
  3. [Image] Décomposer une image png.
    Par Quintoff dans le forum 2D
    Réponses: 3
    Dernier message: 06/01/2006, 20h22
  4. [Cross-Browser] Couleur d'une image PNG
    Par [BkM-) dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 17/11/2005, 21h00
  5. [Image]setCursor() et les images *.png
    Par feed_our_vision dans le forum Graphisme
    Réponses: 4
    Dernier message: 13/09/2004, 01h51

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo