Startseite
Updates · Suchen

Minimalisieren einer Webseite (Teil I)

Ressourcensparender Webserver mit Solarenergie

Es gibt ja eine großartige Seite im Netz, deren Ableger auf einem kleinen Platinenrechner läuft, der mit Solarenergie in Barcelona angetrieben wird - und zwar die Seite Low<-Tech Magazine. Mir gefällt das konsequente Konzept (und auch deren sehr lesbaren Inhalte) von ihnen sehr. Einerseits ist die Seite nur dann erreichbar, wenn die Akkus auch soweit aufgeladen sind, dass sie die Nacht- oder Regenstunden oder gar Tage überbrücken können, zudem ist über die Webseite sichtbar der Ladestatus gelegt, man kann also als Leser immer auch selber abschätzen, wie es dem Server gerade geht und dementsprechend auch seine eigenen Besuche steuern und zudem beschäftigen sich die kreativen Köpfe der Seite im Hintergrund natürlich auch mit der Reduzierung der Datenmenge und der Serverlast - um Energie zu sparen. Mehr zu der Philosophie und Idee steht in ihrem Eintrag hier.

Alles in allem also natürlich genau die richtigen Themen für mich, weil die einfach immer interessant sind und Spaß machen. Und zudem meiner Philosophie entsprechen - das Netz wieder leichter, effizienter und unabhängiger machen. Deswegen werde ich bei solchen Projekten immer neugierig und kann mich damit lange und ausgiebig beschäftigen. Zwar muss man sagen, dass sie definitiv nicht die Limits ausgereizt haben und da noch viel mehr gehen würde, wenn man noch weiter in die Tiefe gehen würde, aber Fakt ist: der Server läuft und das recht gut sogar. Man kann es als sinnlose, technische Spielerei abtun und auch den Einsatz von Akkus und Co. umwelttechnisch in Frage stellen, aber in meinen Augen geht es hier einfach um einen Machbarkeits-Versuch, der viele, gute Fragen und Möglichkeiten aufwirft. Und der natürlich nicht unikat ist, denn Webseiten bzw. Webserver mit Solarstrom gab es schon mehrfach, aber es tut gut, dieses Thema immer wieder neu auferstehen zu lassen.


Daten reduzieren

Das Nette an dem Thema ist vor allem, wie kann man mit den geringsten Eigen-Mitteln Informationen im Web bereit stellen - und dabei auch den Ressourcenbedarf des Lesers zu schonen - und dazu gehört die technische Optimierung... da heißt es natürlich die ganze moderne Bibliotheks-Seuche und JavaScript-Flut zu umschiffen, auf eine statische Ausgabe zu setzen (hinterfrage ich jedoch, siehe hier mein Wiki) und vor allem auch die heute überall üblichen Bilddateien massiv zu reduzieren. Und damit sind wir beim Kern der Notiz hier... ich wollte mal schauen, ob ich nicht bei meinen Bildern da und dort noch mehr tun und die Datenmenge reduzieren kann. Also habe ich mir ein paar Bilderchen geschnappt und dann über die Kommando-Zeile via ImageMagick runtergerechnet. Und ich habe enorm viele Varianten und Funktionen ausprobiert. Farbtiefe reduziert, verschiedenste Berechnungsmethoden, sogar auch andere Bild-Optimierungstools und dergleichen und da und dort bekommt man wirklich gute Ergebnisse mit etwas Hilfe oder Komplexität an Software. Ebenso bei dem Spiel zwischen JPG und PNG und diversen Zwischenformen. Ebenso radikales Dithering wie es Low<-Tech Magazine macht.


Fotos verkleinern und Dateigröße reduzieren

Aber das Alles will ich nicht. Ich möchte quasi mit den einfachsten, schnellsten Mitteln das einfachste, aber beste Ergebnis an einfachen, normalen Farbfotos erreichen. Deswegen habe ich mich mal rumgespielt, was passiert, wenn man beim "converten" von Bildern via ImageMagick einfach eine feste Maximal-Datei-Endgröße für die Bilddatei angibt. Ich habe im Laufe eines Abends schließlich zig-Durchläufe an und mit verschiedenen Dateigrößen probiert (von 100 bis 10 kb) und bin schlussendlich bei einem Durchschnittswert von 50 kb als unterste Grenze bei einer klassischen Stapelverarbeitung vieler, unterschiedlicher Bilder eines Ausfluges gelandet. Das Ganze zudem auch ohne Zusatzfilter oder andere Berechnungs-Methoden oder gar der Mehrfach-Konvertierungen mit stufenweisen Runterrechnen und so weiter... im Endeffekt wurde es gerade mal:

convert -strip -resize 900x -define jpeg:extent=50kb *.jpg klein_%03d.jpg

Übersetzt heißt dieser Kommandozeilen-Code:

Konvertiere - Reduziere Bildinformationen - setze Bildbreite auf maximal 900px - setze Dateigröße auf maximal 50 kb - Alle JPG-Bilder in dem Order - Und speichere sie neu mit Nummerierung ab.

Und die Ergebnisse sind soweit in Ordnung im großen Maßstab gesehen, dass ich mit diesem Wert zukünftig alle Fotos vor dem Einstellen hier im Wiki konvertieren werde. Teilweise lassen sich damit mehr als die Hälfte an der bisherigen Datenmenge im Schnitt einsparen und das ist schon ordentlich. 900px Breite ist übrigens schon vor Jahren mein persönlicher Standardwert für alle meine Bilder online geworden, weil es der beste Kompromiss für nicht zu groß, aber auch nicht zu klein ist. Wichtig zu erwähnen ist jedoch, es geht hier nur um die reine Anwendung auf einer Webseite oder Blog und dergleichen, um einen Text aufzuhübschen. Ein paar Beispiele:

Das erste Herbstblatt-Bild hat 149,1 kb, nach dem Durchlauf 49,5 kb - es wurden also gerundet 100 kb an Daten eingespart. Bei genauem Hinschauen erkennt man natürlich den Unterschied, tatsächlich ist er im Alltag vernachlässigbar.

Hier starten wir mit 110 kb und rechnen es ebenfalls auf 49,5 kb hinunter. Das nicht geschulte Auge wird sich hier nur wenig beschweren, auch wenn wir die Hälfte an Datenmenge reduziert haben - lohnenswert also.

Hier wird es schon interessanter. Das erste Bild aus der Wiener Innenstadt kommt auf "fette" 387,2 kb, nach dem Durchlauf mit Imagemagick sind es dann die festgelegten, knappen 49,5 kb. Hier erkennt man aufgrund der verschiedenen Kontraste und Bereiche doch etwas deutlicher den Qualtiätsverlust. Damit wäre das Bild schon ein sichtbarer Kompromiss, auch wenn die Bildinformation als solches noch immer die idente Aussage und Nutzwert trägt.

198,1 kb gegen reduzierte 48 kb. Hier könnte man sehr wohl die verwaschene Befleckung auch im Alltag reklamieren, dem unbedarften Betrachter hingegen wird es beim mal eben Anschauen nicht wirklich auffallen.

Bei diesem roten Klatschmohnbild war ich gespannt, aber der Unterschied ist nicht nur visuell eher gering - von 73,6 kb auf 49,2 kb. Ändert nicht allzuviel, aber es ist dennoch eine Einsparung.

Auch bei diesem Bienenfoto ist in der Alltagspraxis die Einsparung von Vorteil, da der visuelle Impact recht gering ist... 115 kb im Vorfeld und bisher bei diesem Foto, nach dem Durchlauf sind es anschließend ebenfalls die 49,8 kb. Mehr als die Hälfte also an Daten subtrahiert und trotzdem kann und darf das Bild den identen Mehrwert bringen.

Wer die Fotos übrigens mit dem Handy betrachtet, wird noch weniger einen Unterschied sehen - ein ebenfalls entscheidender Punkt, denn die meisten Webseiten-Besucher surfen heutzutage mobil, viele davon sowieso zwischendurch im "hektischen" Alltag auf der Straße, im Bus oder mal eben schnell am Sofa, beim Essen oder am Klo. Heißt also, dass die Qualitäts-Anforderungen eigentlich nicht so hoch sind, trotz HighRes-Bilder, die aber sowieso nur wie Junk Food konsumiert und gedanklich wieder weggeworfen werden. Die Idee eines Bildes ist meiner Meinung nach bei Texten sowieso nur (oder zumindest bei mir) eine schlichte Ergänzung oder die Vermittlung einer Stimmung oder eines Erlebnisses. Und hierbei reichen eben auch maximal 50 kb an Daten.

Man kann sie natürlich noch weiter runter rechnen, allerdings ist mir ein simpler, fester Durchschnittswert lieber, den man einfach relativ unbedarft immer und immer wieder einsetzen kann, als jedes Mal sich pro Bild einzeln an die jeweiligen Grenzen zu testen. Denn so lässt sich ein einfaches Batchscript zusammentippen, noch etwas erweitert mit Farb- und Kontrast-Erhöhung und man hat einen einfache Einzeiler an Code, mit dem sich binnen Sekunden ganze Fotoserien umwandeln lassen... ganz ohne GUI oder Zusatzprogramme oder gar kommerzielle Ableger dessen.


Ein Bild = die ganze Webseite

Es lassen sich einzelne Bilder übrigens natürlich auch auf 35 bis 40 kb noch weiter reduzieren, manche sogar auf 30 kb und sie sind trotzdem noch relativ tragbar, aber es beginnt bei einigen Bildern schwieriger zu werden - für eine Stapelverarbeitung ohne viel Nachzudenken nicht ganz so ideal. 50 kb scheint bei dieser Bildgröße mit 900 Pixel Breite der sinnvollste Kompromiss zu sein und trotzdem dabei die Ressourcen sehr gering zu halten.

Beispielsweise hätte diese Webseite hier, die Du gerade liest, ohne die Originalbilder, dafür mit den kleineren, reduzierten Bildern, plus dem HTML sowie dem CSS (ohne Zusatzfont) gerade mal um die 350 kb. Und das entspricht beispielsweise schon wieder dem oberen, ersten, originalen Innenstadtfoto. Wir haben also mit so einer simplen Spielerei die Datenmenge der ganzen, bebilderten Webseite auf ein klassisches Bild alleine reduziert. Und das ist ein deutlicher und massiver Unterschied und kommt vor allem dem User bzw. Leser entgegen, aber auch dem Webserver, weil die Auslastung dadurch deutlich sinkt. Würde man auf Ressourcenquellen wie Sonnen- oder Windenergie beim Webserver setzen, ein essentieller Ansatz also.