Development #17305
possibilité d'inclure les images sous forme d'URI data:
0%
Description
Pour des petites images le coût des requêtes supplémentaires peut être significatif; une technique utilisée par endroit est de créer une image unique qui reprend les différentes images (technique des sprites); une autre est d'incorporer les images directement dans le fichier CSS, sous forme d'URI data.
C'est cette option que propose ce patch, en l'appliquant à l'image arrow-down.svg utilisée dans les <select>. (mais la vraie utilisation c'est pour la multitude d'icônes dans GNM).
Fichiers
Révisions associées
Historique
Mis à jour par Frédéric Péters il y a presque 7 ans
- Fichier 0001-scss-add-support-for-embedding-images-as-data-URIs-1.patch 0001-scss-add-support-for-embedding-images-as-data-URIs-1.patch ajouté
- Statut changé de Nouveau à En cours
- Patch proposed changé de Non à Oui
Nouvelle règle dans le Makefile pour appeler le script make_data_uris.py, qui prend comme paramètre le chemin à traiter, ici simplement static/includes/. Le script parcourt le img/ et pour les petites images png ou svg (< 10 Kio), ça crée une entrée dans un fichier _data_uris.scss qui peut ensuite être utilisé dans les scss, basiquement :
- background-image: url(img/arrow-down.svg); + background-image: url($arrow-down);
L'avantage de l'scss, c'est que si jamais la variable correspondant à une image n'est pas utilisée, le data: ne se trouve pas dans le css final, donc zéro coût.
Aussi, j'ai essayé pour les svg d'en faire des svgz mais ça a été finalement pour découvrir que ce n'était pas pris en charge par les navigateurs.
Mis à jour par Frédéric Péters il y a presque 7 ans
- Fichier 0001-scss-add-support-for-embedding-images-as-data-URIs-1.patch 0001-scss-add-support-for-embedding-images-as-data-URIs-1.patch ajouté
Le même patch, sans les import liés à mes essais sur le svgz.
Mis à jour par Thomas Noël il y a presque 7 ans
Quelque chose que je dois rater : si l'image img/arrow-down.svg fait 20ko, que se passe-t-il avec url($arrow_down) ?
Mis à jour par Frédéric Péters il y a presque 7 ans
Si l'image fait 20ko il y aura une erreur de compilation parce que la variable ne sera pas définie.
Mis à jour par Thomas Noël il y a presque 7 ans
Frédéric Péters a écrit :
Si l'image fait 20ko il y aura une erreur de compilation parce que la variable ne sera pas définie.
Ah ok (j'aurai dû essayer).
Et sinon, est-ce qu'on n'ajouterait pas un petit espace de nommage histoire de tenter d'éviter un éventuel conflit, et de clarifier l'intention ? Genre $data-uri-quelque-chose, donc data_uris.append('$data-uri-%(varname)s: ... ?
Mis à jour par Frédéric Péters il y a presque 7 ans
- Fichier 0001-scss-add-support-for-embedding-images-as-data-URIs-1.patch 0001-scss-add-support-for-embedding-images-as-data-URIs-1.patch ajouté
Voilà, revu avec $data_uri_ comme préfixe (parce que même si sass permet les tirets dans les noms de variable, ça démange quand même (mais je n'ai pour autant pas renommé arrow-down.svg)).
Mis à jour par Frédéric Péters il y a presque 7 ans
- Statut changé de En cours à Résolu (à déployer)
commit 02ef8bf029a116efa18dcc9af0c919de571ae1c3
Author: Frédéric Péters <fpeters@entrouvert.com>
Date: Sat Jul 1 14:34:06 2017 +0200
scss: add support for embedding images as data URIs (#17305)
Mis à jour par Frédéric Péters il y a plus de 5 ans
- Statut changé de Résolu (à déployer) à Solution déployée
scss: add support for embedding images as data URIs (#17305)