Das Internet und die gesamte Flugindustrie haben global dieselbe CO₂ Emssionen. Beide betragen 4% der gesamten Emssionen.
Gemäss dem Moorschen Gesetz muss die Speicherkapazität sich alle 18 Monate verdoppeln, um mit Datenmengen mithalten zu können. Die Speicherkapazität wächst cirka 20% pro Jahr, die Datenmengen hingegen 40%. Im Jahr 2025 kann die Technologie gemäss Prognosen nicht mehr mithalten.
Bild
Bilder sind eines der energieintensivsten Elemente auf einer
Website. Jedes auf der Website verwendete Bild ist ein Bild,
das auf dem Server gespeichert werden muss. Einfachere
Bilder helfen, die Bildgrösse zu verringern. Icons und Vektoren
können eine gute Möglichkeit sein, um dennoch illustrative
Inhalte darzustellen. Das HTTP-Archiv schätzt, dass
die durchschnittliche Webseite im Jahr 2023 21 Bilder enthielt,
mit einer Gesamtübertragungsgrösse von einem Megabyte.
Bilder können die Website oder App sehr schwer
machen, daher ist die Wahl des richtigen Stils und Formats
und die Optimierung der Bilder entscheidend.
Vektorbilder
SVG sind leichte, skalierbare Dateien und bieten eine leichte
Bilvariante an. Net2zero hat hierzu mit p5.js eine Methode
entwickelt, welche Pixelbilder in Vektoren umwandelt. SVG
können durch CSS zudem animiert werden.
Dither
Durch Dithering von Bildern, werden die Farben reduziert.
Da monochrome Bilder helfen die Dateigrösse zu verringenern.
Für Websites, die die Seitengrösse reduzieren möchten,
ohne Bilder und Bildgrösse zu opfern, kann die Dithering-
Kompressionstechnik nützlich sein.
Komprimieren
Bildkomprimierungstools wie Shortpixel, TinyPNG, und ImageOptim
minimieren die Dateigrössen ohne unerwünschte
Verschlechterung der Bildqualität. Viele dieser Tools bieten
Möglichkeiten, sie in wIhre Website zu integrieren, so dass
alle Bilder automatisch optimiert werden, was Ihnen Zeit
spart. Von Hand komprimierte Dateien lassen jeweils eine
noch kleinere Datei zu. Unschärfe hinzuzufügen, verringert
die Grösse zu verringern.
https://imageoptim.com/mac
https://shortpixel.com/
https://tinypng.com/
Plugin Figma um Bilder zu exportieren:
https://www.figma.com/community/
plugin/920429287038206017
Lazy Load
Lazy Loading bedeutet, dass Bilder erst geladen werden,
sobald sie auf dem Bildschirm angezeigt werden. Angenommen,
alle Bilder werden sofort geladen: Stellt der Nutzer
fest, dass er auf der falschen Seite gelandet ist, verlässt
er die Website, ohne nach unten gescrollt zu haben.
Bilder, die weiter unten auf der Website platziert sind, hat
er also gar nicht angeschaut – sie wurden umsonst geladen.
Lazy Loading verhindert das und erhöht nebenbei die
Nutzerfreundlichkeit durch eine schnellere Ladezeit.
Responsive
Verschiedene Bildergrössen für verschiedene Endnutzer
Geräte bereitzustellen, vermindert die Datengrösse, welche
vom Server aberufen werden müssen.
