Bildoptimierung für Websites / Applikationen

Bilder aus der Digitalkamera oder einem Smartphone mit einer guten Kamera können problemlos für die Nutzung auf Websites oder in Applikationen taugen. Wichtig zu Wissen ist aber, das die Bilder niemals direkt dafür verwendet werden sollten. Dies wegen der Dateigrösse, welche ab Digitalkamera problemlos bis zu 25 MB und selbst bei einem Smartphone noch mehr als 10MB gross sein kann. 

Auch sind die Grössenverhältnisse oft um ein vielfaches zu gross, da eine mittlere Digitalkamera schon Bilder mit einer Seitenlänge von über 5000 Pixel haben kann (eine komplette Website ist ca. 2200 Pixel breit!). Beides in Kombination auf einer Website würde zu einer langen Ladezeit oder im Extremfall dazu führen, das die Datei gar nicht angezeigt wird. 

Somit muss die Originaldatei mit einem Fotoprogramm bearbeitet werden. Ein Vorgang der zwar aufwendig ist, sich aber sehr lohnt und die Vorteile deutlich überwiegen! Die Ladezeit für den Nutzer ist deutlich schneller, die Qualität ist auch im bearbeiteten Zustand für den Nutzer dennoch nicht schlechter. 

Die Vorteile

• Schnellere Verarbeitung: Die Inhalte sind deutlich schneller auf den Server hochgeladen und verarbeitet.
• Keine Verzögerung weiterer Inhalte: Bei laden einer Seite entstehen keine Verzögerungen anderer Inhalte.
• Weniger Speicherplatzverbrauch im Webhosting: Der vorhandene Speicherplatz im Webhosting reicht für mehr!
• Besseres Ranking bei Suchmaschinen: Google und andere Suchmaschinen belohnen schnelle Websites!
• Kein Website-Cache nötig: Bei gut optimierten Bildern kann eine Website sehr schnell sein auch ohne Zwischenspeicher!

Qualität und Masse

Optimal werden Fotos mit einer möglichst passenden oder leicht zu grossen Grösse der Verwendung gespeichert. Es sollte aus Qualitätsgründen aber vermieden werden, Fotos „aufzublasen“, also grösser in einer Website einzufügen als die Datei in Wirklichkeit ist!

In der Qualität reicht in der Regel eine Qualität von 40 – 60% aus, ohne das optisch eine Qualitätseinbusse entsteht. Die folgenden Masse können als ungefähren Richtwert gesehen werden:

• Bilder für die Website: ca. 400 – 600 Pixel Längsseite. 
• Bilder für Moodle in Fragen: ca. 400 Pixel Längsseite.
• Banner für die Website (ganze Breite der Website): 2200 Pixel.

Welche Software?

Natürlich gibt es eine Vielzahl von Softwares, welche eine Optimierung von Bildern oder Grafiken für das Web möglich machen. Eine abschliessende Liste wäre aber der Menge an Programmen wegen unmöglich zu erstellen. Wichtig ist es, die Bilder in eine Waage zu bringen: Optimale Grösse und Auflösung vs. möglichst kleiner Speicherplatzbedarf. 

Nachfolgend findest du eine Möglichkeit mit der Software Photoshop Elements, da diese Software weit verbreitet scheint.

Photoshop Elements

Die Software Photoshop Elements ist der kleine Bruder der bekannten Bildbearbeitungssoftware Photoshop. Die Funktionsvielfalt ist um einiges kleiner und übersichtlicher. Auch der Preis ist mit ca. CHF 100.- für gelegentliche Nutzer erschwinglich. Die Software ermöglicht mit der Funktion „Für Web speichern“ die Option, die Bildgrösse und die Bildqualität zu reduzieren und die Datei neu abzuspeichern, ohne das Original zu verändern.

• Öffne das Bild (alternativ Grafik oder anderes) mit Photoshop Elements. 
• Klicke auf „Datei“ und weiter auf „Für Web speichern“

• Wähle im folgenden Fenster die Optionen aus, in welchem das Bild gespeichert werden soll.
• Erstelle die Bildgrösse unter „Nur Grösse“ und die Qualität in Prozenten (empfohlen: 40 – 60%)