Base 64 encoder vs charger un fichier image
Donc, je travaille sur quelque chose en php où je dois obtenir mes images d'une base de données SQL où elles seront encodées en base64. La vitesse d'affichage de ces images est critique, j'essaie donc de savoir s'il serait plus rapide de transformer les données de la base de données en un fichier image, puis de le charger dans le navigateur, ou simplement de rappeler les données base64 brutes et d'utiliser:
<img src="data:image/jpeg;base64,/9j/4AAQ..." />
Qui est pris en charge par FireFox et d'autres navigateurs Gecko.
Donc, pour récapituler, serait-il plus rapide de transférer un fichier image réel ou le code base64. Est-ce que cela nécessiterait moins de requêtes http lors de l'utilisation d'ajax pour charger les images?
Les images ne dépasseraient pas 100 pixels au total.
Eh bien, je ne suis d'accord avec personne. Il y a des cas où vous devez charger de plus en plus d'images. Toutes les pages ne contiennent pas 3 images du tout. En fait, je travaille sur un site sur lequel vous devez charger plus de 200 images. Que se passe-t-il lorsque 100 000 utilisateurs demandent 200 images sur un site très chargé? Les disques du serveur, renvoyant les images doivent s'effondrer. Pire encore, vous devez faire autant de demandes au serveur au lieu d’une seule avec base64. Pour autant de vignettes, je préférerais la représentation base64, préenregistrée dans la base de données. J'ai trouvé la solution et une solide argumentation à http://www.stoimen.com/blog/2009/04/23/when-you-should-use-base64-for-images/ . Le gars est vraiment dans ce cas et a fait des tests. J'ai été impressionné et faire mes tests aussi. La réalité est comme elle dit. Pour autant d’images chargées sur une page, la réponse du serveur est vraiment utile.
- L'encodage Base64 rend le fichier plus volumineux et donc plus lent à transférer.
- En incluant l'image dans la page, il faut la télécharger à chaque fois. Les images externes ne sont normalement téléchargées qu'une fois, puis mises en cache par le navigateur.
- Ce n'est pas compatible avec tous les navigateurs
Pourquoi régénérer l'image encore et encore si elle ne sera pas modifiée. Hypothétiquement, même s’il existe 1000 différentes images possibles à afficher sur la base de 1000 conditions différentes, je pense toujours que 1000 images sur les disques sont meilleures. N'oubliez pas que les images sur disque peuvent être mises en cache par le navigateur et économiser de la bande passante, etc.
Ne pensez pas que data:// fonctionne dans IE7 ou inférieur.
Lorsqu'une image est demandée, vous pouvez l'enregistrer sur le système de fichiers puis la servir à partir de ce moment. Si les données d'image de la base de données changent, supprimez simplement le fichier. Servez-le depuis un autre domaine aussi, comme img.domain.com. Vous pouvez obtenir gratuitement tous les avantages des balises électroniques modifiées en dernier lieu ou de votre serveur Web sans avoir à démarrer PHP sauf si vous en avez également besoin.
Si vous utilisez Apache:
# If the file doesn't exist:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/(image123).jpg$ makeimage.php?image=$1
Pour répondre à la question initiale, j'ai lancé un test mesurant une image JPEG 400x300 px en 96 ppp:
base64ImageData.Length
177732
bitmap.Length
129882
C'est une solution très rapide et facile. Bien que la taille de l'image augmente d'environ 33%, l'utilisation de base64 réduira considérablement le nombre de requêtes http.
Les images Google et Yahoo utilisent base64 et servent des images en ligne. Vérifiez le code source et vous le verrez.
Bien sûr, cette approche présente des inconvénients, mais j'estime que les avantages l'emportent sur les coûts. J'ai constaté que les inconvénients sont les dispositifs lents. Par exemple, dans l'iPhone 3GS, le rendu des images fournies par Google Images est très lent, car les images sont gzipées depuis le serveur et doivent être décompressées dans le navigateur. Donc, si le client a un appareil lent, il souffrira un peu lors du rendu des images.
En règle générale, l’utilisation du codage base64 augmentera la taille en octets d’environ 1/3. À cause de cela, vous devrez déplacer 1/3 octets de la base de données vers le serveur, puis déplacer ces mêmes 1/3 octets supplémentaires vers le navigateur.
Bien entendu, à mesure que la taille de l'image augmente, les frais généraux mentionnés augmentent proportionnellement.
Ceci étant dit, je pense que c'est une bonne idée de changer les fichiers en leurs représentations d'octets dans la base de données et de les transmettre.
J'ai utilisé des images base64 une ou deux fois pour les icônes (10 x 10 pixels environ).
Base64 images pros:
- compact - vous avez un seul fichier. même si le fichier est compressé, l’image base64 est compressée presque à la taille de l’image normale.
- la page est récupérée en une seule demande.
Images base64 contre:
- pour être réaliste, vous devez probablement utiliser un moteur de script (tel que PHP) sur toutes les pages contenant l'image.
- si l'image est modifiée, toutes les pages en cache doivent être re-téléchargées.
- car l'image est en ligne, vous ne pouvez pas utiliser de CDN ni de serveur Web de contenu statique.
Les images normales pros:
- si vous utilisez le protocole SPDY, au moins théorique, page + images + CSS se chargera également avec une requête unique.
- vous pouvez définir l'expiration sur l'image pour que le contenu soit mis en cache à partir des navigateurs.
Si vous souhaitez obtenir la vitesse la plus rapide, vous devez les écrire sur le disque après leur téléchargement/modification et laisser le serveur Web gérer les fichiers statiques. Les suggestions de Rojoca sont également bonnes, car elles minimisent l'invocation de php. Un avantage supplémentaire de servir à partir d'un autre domaine est que (la plupart) les navigateurs émettent les demandes en parallèle.
En excluant tout cela, lorsque vous interrogez les données, vérifiez si elles ont été modifiées en dernier lieu, puis écrivez-les sur le disque et envoyez-les à partir de là. Assurez-vous de respecter l'en-tête If-Modified-Since afin de ne pas transférer des données inutilement.
Si vous ne pouvez pas écrire sur le disque ou sur un autre cache, il serait alors plus rapide de le stocker sous forme de données binaires dans la base de données et de le diffuser. Ajuster la taille des tampons aidera à ce stade.