LowTech
- Techniques
- Sites
- Articles
- Comment créer un site web basse technologie
- Le Libre peut-il faire le poids ?
- Pourquoi la révolution des machines à écrire est-elle nécessaire dans les bureaux?
- Vidéos
Techniques
Optimiser ses images avec le «Dithering»
Afin de diminuer au maximum le poid de ces images, le site de [LOW←TECH MAGAZINE] à mit en place une ancienne technique de compression d’image appelée « diffusion d’erreur ».
Cette technique repose sur deux grand principes :
La «quantification des couleurs»
Une image habituel est composé de pixel pouvant avoir nimporte quel couleur codé sur trois canneaux : Rouge, Vert, Bleu, avec pour chaque une valeur allant de 0 à 255.
L’indexation d’image est une technique qui consiste à réduire les couleurs de l’image à une palette réduite.
Cette technique, aussi nommée «Color Quantization» économise beaucoup de poid, mais laisse place à moins de nuances.
L’équipe de [LOW←TECH MAGAZINE] a fait le choix d’utilier 4 nuances de gris, et d’y appliquer un filtre CSS pour remplacer le blanc par une couleur : mix-blend-mode: hard-light;
Par contre, si on se contente d’indexer les couleurs d’une image dans Gimp ou Photoshop, le rendu visuel ne sera pas forcément optimal, surtout en monochrome.
Le «trammage»
Pour améliorer la visibilité de l’image avec le moins de couleurs possibles, une bonne astuce est d’utiliser des trames «dithering».
Vu a une certaines distance, la quantité de noir et de blanc se mélangent et sont percu comme un gris.
Il existe plusieurs algorythme de dithering, imagemagick permet entre autre d’en appliquer en ligne de commande.
R&D de compression
J’ai voulu expérimenter différentes options d’imagemagick pour comparer les résultat tant visuelment que sur le poid du fichier final.
- Je suis partis de cette image source.
- Le poid des images s’affichent au survol.
Quantification des couleurs
# Resize & 2 grey : 19KB
convert gare.jpg -resize 400x600 -colors 2 -colorspace gray -normalize gare1.gif
# Resize & 3 grey : 24KB
convert gare.jpg -resize 400x600 -colors 3 -colorspace gray -normalize gare2.gif
# Resize & 3 colors : 25KB
convert gare.jpg -resize 400x600 -colors 3 -normalize gare3.gif
# Resize & 4 colors : 30KB
convert gare.jpg -resize 400x600 -colors 4 -normalize gare4.gif
Trammage en noir et blanc
# Resize & Ordered Dither 2 : 8KB
convert gare.jpg -resize 400x600 -colorspace gray -ordered-dither o2x2 gare5.gif
# Resize & Ordered Dither 3 : 10KB
convert gare.jpg -resize 400x600 -colorspace gray -ordered-dither o3x3 gare6.gif
# Resize & Ordered Dither 4 : 11KB
convert gare.jpg -resize 400x600 -colorspace gray -ordered-dither o4x4 gare7.gif
# Resize & Ordered Dither 8 : 12KB
convert gare.jpg -resize 400x600 -colorspace gray -ordered-dither o8x8 gare8.gif
Trammage en couleurs
# Resize & Ordered Dither 2 : 20KB
convert gare.jpg -resize 400x600 -ordered-dither o2x2 gare9.gif
# Resize & Ordered Dither 3 : 23KB
convert gare.jpg -resize 400x600 -ordered-dither o3x3 gare10.gif
# Resize & Ordered Dither 4 : 25KB
convert gare.jpg -resize 400x600 -ordered-dither o4x4 gare11.gif
# Resize & Ordered Dither 8 : 27KB
convert gare.jpg -resize 400x600 -ordered-dither o8x8 gare12.gif
Comparaison
Les trammages en noir et blanc donnent les meilleur compression :
- Ordered Dither 2 :
8KBPas assez de détails - Ordered Dither 3 :
10KBBeaucoup mieux - Ordered Dither 4 :
11KBTrès bon comprimit - Ordered Dither 8 :
12KBLes trames commencent à être trop visible
Suivi par :
- La quantification en 2 couleurs :
19KBpas du tout détaillée. - Le trammage coloré Ordered Dither 2 :
20KBmême niveau de détail.
Les autres vont de 23KB à 30KB ce qui commence à faire beaucoup comparé au 10KB totalement correcte que l’on a eu précédement.
Le meilleur compromit taille et esthétique se place donc entre :
- Ordered Dither 3
10KBqui fait des trames en forme de taches - Ordered Dither 4
11KBqui fait des trames en forme de croix
Je vais décliner ces réglages avec différentes images sources pour avoir un avis plus avisé.
Sources : gare.jpg ; matcha.jpg ; bike.jpg ; desktop.jpg ;
Déclinaison
10KB & 11KB
4KB & 4KB
13KB & 16KB
10KB & 11KB
Conclusion
On constate que dans certains cas, le «Ordered Dither 3» manque de détail. Je préconise donc «Ordered Dither 4» :
convert input.jpg -resize 400x600 -colorspace gray -ordered-dither o4x4 output.gif
Sites
LowTechLab
Ce site et surtout ce wiki servent à partager des astuces LowTech mais dans des domaines non numérique tel que :
- l’énergie,
- l’alimentation,
- l’eau,
- la gestion des déchets,
- les matériaux de construction,
- l’habitat,
- les transports,
- l’hygiène,
- la santé.
Articles
Comment créer un site web basse technologie
Introduction
Selon les dernières estimations, le réseau tout entier représente 10 % de la consommation mondiale d’électricité et la quantité de données échangées double tous les deux ans.
Faire fonctionner les centres de données avec des sources d’énergie renouvelables ne suffit pas à combler la consommation d’énergie croissante d’Internet.
Avec l’amélioration des terminaux et de la connexion internet, le poid moyen des pages web on été multiplié par 4 en 8 ans.
Des sites plus « lourds » ou plus « gros » ne font pas qu’augmenter la consommation d’énergie sur l’infrastructure du réseau, ils raccourcissent aussi la durée de vie des ordinateurs, car des sites plus lourds nécessitent des ordinateurs plus puissants pour y accéder. Ce qui veut dire que davantage d’ordinateurs ont besoin d’être fabriqués, une production très coûteuse en énergie.
En quelque année, on est passé d’une connexion ponctuel sur l’ordinateur au travail, à la maison, à la bibliothèque à une connexion permanante avec la wifi/4G et les smartphones.
Conception d’un site internet basse technologie
- Conception simplifiée pour diviser par 5 le poid moyen des pages.
- Allimentation 100% solaire avec juste une batterie tampon.
Avec un site internet poids plume alimenté par l’énergie solaire et déconnecté du réseau, nous voulons démontrer que d’autres décisions peuvent être prises. La taille de la page (d’accueil) a été divisée par plus de six, le nombre de requêtes par cinq, et la vitesse de téléchargement a été multipliée par dix.
Le site est statique
Les sites internet statiques sont donc basés sur le stockage de fichiers quand les sites dynamiques dépendent de calculs récurrents. En conséquence, un site statique nécessite moins de puissance de calcul, donc moins d’énergie.
Les images optimisées
Pour réduire le poid des images sans réduire l’atractivité du site. Les images consomment l’essentiel de la bande passante, les optimiser fait le gros du travail.
Nous avons plutôt choisi d’appliquer une ancienne technique de compression d’image appelée « diffusion d’erreur ». Le nombre de couleurs d’une image, combiné avec son format de fichier et sa résolution, détermine la taille de cette image. Ainsi, plutôt que d’utiliser des images en couleurs à haute résolution, nous avons choisi de convertir toutes les images en noir et blanc, avec quatre niveaux de gris intermédiaires.
Cette technique nommée «dithering» diminu par dix leur consomation de ressource.
Il y a des lib sur Github ou des fonctions dans ImageMagick
Police et Logo
Toutes les ressources chargées, y compris les polices de caractères et les logos, le sont par une requête supplémentaire au serveur.
Le choix est donc d’utiliser la typo par defaut du navigateur et d’utiliser un logo en typo.
Pas de pistage par un tiers, pas de services de publicité, pas de cookies
Avec un serveur auto-hébergé, nous pouvons obtenir et visualiser ces mesures de données avec la même machine: tout serveur génère un journal de ce qui se passe sur l’ordinateur. Ces rapports (anonymes) ne sont vus que par nous et ne sont pas utilisés pour profiler les visiteurs.
Avec un serveur auto-hébergé, pas besoin de pistage par un tiers ni de cookies.
Google collecte des informations sur les visiteurs du blog, ce qui nous contraint à développer davantage les déclarations de confidentialité et les avertissements relatifs aux cookies, qui consomment aussi des données et agacent les visiteurs. Nous avons donc remplacé Adsense par d’autres sources de financement (voir ci-dessous pour en savoir plus). Nous n’utilisons absolument aucun cookie.
Le Libre peut-il faire le poids ?
On y apprend que c’est un mouvement qui s’oppose frontalement aux géants, ce qui est fantastique.
Si les bribes d’idéologie LowTech orientent les gens vers des associations, comment fait-on pour sortir de terre une entreprise éthique, rentable et solidaire ?
Il donne les liens :
- https://usbeketrica.com/article/small-tech-poison-silicon-valley
- https://framablog.org/2019/03/14/demain-les-nains/
Nous avons besoin d’un antidote au capitalisme de surveillance qui soit tellement contradictoire avec les intérêts des Big Tech qu’il ne puisse être récupéré par eux.
Pourquoi la révolution des machines à écrire est-elle nécessaire dans les bureaux?
Le problème des écrans multiples est qu’ils augmentent énormément la consommation d’énergie. Ajouter un second écran à un ordinateur double la consommation d’électricité, en ajouter cinq la triple.
Le papier ne consomme rien la ou les seveurs consomment h24
Machine à écrire
Il est possible de remplacer le la rédaction un ordinateur par une machine à écrire. Il en existe des modernes, qui sauvegarde des fichier text. Elles sont monotache, donc sans distraction. Elle pouvent avoir un système de cloud pour sauvegarder le travail.
Papier carbone
Avec une machine à écrire, on peu avoir jusqu’a 10 verssions simultanée.
Imprimantes
Les imprimantes matricielles sont beaucoup plus moins energivore que celles celles laser, et bien moins cher que les cartouches jet d’encre.
Par contre elle ne permetent que l’imperssion de text en noir.
Vidéos
Et s'il existait des jeux en exemplaire unique ?
Il parle de web à partir de 3m32s
Jeu vidéo
Comparaison de l’industrie numérique ou rien n’est unique et ephemaire à certaines démarches d’artistes.
Il présente un developpeur de jeu vidéo qui vend des jeu qu’a la première personne qui l’achète, ne gardant pas lui même de copie. Laissant les clients faire ce qu’iels veullent de la copie. La supprimer, la distribuer…
Un autre artiste a lui créé un jeu, disponible uniquement sur dix CD, caché dans des lieux secret, atendant d’être toruvé ou détruit par le temps…
Web
Cette démarche de l’éphemaire lui fait énormément penser à celle du blog lowtechmagazine, qui parle et réflechit autour de la LowTech.
«C’est à dire des moyen de réduire notre consomation d’énergie avec la technologie, ou de comment favoriser le recyclage des appareils informatiques dans nos pratique et nos quotidiens»
Ils ont expérimenter l’adaptation de leur site dans une verssion la plus économique possible et dont documenté le tout dans un article. Parmit la multitude de partit prix, il y a celui de la remise question de la disponibilité du site.
La plupart des hébergeurs qui annoncent utiliser l’énergie solaire dans leurs datacenter utilisent aussi le réseau électrique urbain quand leurs bateries sont vides. Lowtechmagazine à prit la décision de ne compter uniquement sur l’énergie solaire, rendant donc le site innacecible quand il n’y a plus d’énergie, jusqu’au retour d’une météo plus clémente.
Cette démarche recréer un lien matériel, une phisicalité à un internet qu’on persoit bien trop souvent comme seulement virtuel.
Conclusion
Ces questions et bien d’autres vont être crutiales dans les années à venir. Dans un context ou la question de l’énergie et des ressources sera probablement contral.