Bilder für Web optimieren

Bilder für’s Web optimieren: 3 Dinge, die du dabei nicht vergessen darfst

Stell dir mal vor du blätterst durch deinen News-Feed auf Facebook. Wie sieht der aus? Schwarz auf weiß und eintönig?

Eher nicht. Überall ist irgendwas bunt und bewegt sich vielleicht auch noch. Sogar diese (mehr oder weniger) witzigen, nachdenklichen oder sinnlosen Sprüche vor denen man sich kaum retten kann, werden nicht einfach ins Textfeld eingetippt und gepostet, sondern auf ein Bild draufgepackt.

Wozu eigentlich? Am Inhalt ändert das erstmal gar nix. Aber es beeinflusst unsere Wahrnehmung.

Deshalb solltest du auf deiner Webseite Bilder haben

Unser Gehirn liebt Bilder. Die kann es viel schneller erfassen als Text. Deshalb ist es auch ständig auf der Suche danach und bleibt sofort daran hängen.

Kein Wunder also, dass es kaum Webseiten ohne Bilder und Grafiken gibt. Die ziehen nicht nur die Aufmerksamkeit des Besuchers an. Sie sollen neugierig machen, damit wir nicht gleich wieder verschwinden, sondern den ganzen Text lesen.

Ein Bild in regelmäßigen Abständen lockert lange Texte auf. Es ist wie die Raststätte auf der Autobahn. Du kannst anhalten, Arme und Beine strecken und dir ein bisschen die Füße vertreten. Danach kannst du viel konzentrierter weiterfahren.

Darum sind nicht optimierte Bilder im Web ein Problem

Ok, Bilder sind toll. Das hätten wir geklärt. Und jetzt sage ich dir, dass Bilder doch nicht so toll sind und wie du das ändern kannst.

Das Doofe an Fotos und Grafiken ist, dass sie im Vergleich zu Text sehr groß sind. Nicht unbedingt der Raum, den sie auf dem Bildschirm oder Display einnehmen. Es geht um die Dateigröße.

Ein Vergleich: Eine A4 Seite Text in einer Word-Datei ist 16 Kilobyte groß. Ein Foto in guter JPG-Qualität ebenfalls in A4-Größe (72 DPI, JPG Qualität 10) erreicht problemlos 216 Kilobyte. Ok… Das hat ein bisschen was von Äpfeln und Birnen, aber ganz abwegig ist es nicht und macht das Problem recht deutlich.

Zum Glück sind die Zeiten von Modem und Co. vorbei. Aber blitzschnelle Verbindungen sind noch lange nicht überall verfügbar.

Und mal ehrlich: Läuft deine Leitung immer perfekt und auf Top-Speed? Meine jedenfalls nicht. Vergessen dürfen wir auch die ganzen Smartphones nicht. Auf meinen Seiten nutzt etwa die Hälfte der Besucher ein mobiles Gerät. Was mobiles Internet angeht, hängen wir wirklich hintendran. Unser Datenvolumen ist begrenzt (und teuer) und es gibt genug Flecken auf der Landkarte wo auf dem Handy nur ein „G“ für die Verindung steht. Und G heißt gäääääähnend langsam.

Dann stell dir mal vor du willst eine Seite aufrufen und dann steckt so ein fettes Bild in der Leitung. Die Seite lädt und lädt und wird nicht fertig. Wie lange wartest du bevor du genervt das Fenster schließt?

So optimierst du Bilder für’s Web

1. (und 2.) Das richtige Dateiformat (und die Komprimierung)

Die Wahl des passenden Formats kann unter Umständen schon einen gewaltigen Unterschied machen. Es gibt eine ganze Menge an Formaten für Bilder. Beispielsweise JPG (manchmal auch JPEG), PNG, TIFF, GIF und noch exotischeres Zeug.

In welchem Format ein Bild vorliegt, erkennst, wie du wahrscheinlich weißt, an der Endung hinter dem Dateinamen. Da steht sowas wie „Bild.jpg“.

Die wichtigen Formate für uns als Webseitenbetreiber und Blogger sind JPG und PNG. Die werden von den meisten Programmen und Tools auch unterstützt.

Wo liegt jetzt der Unterschied?

Beim JPG handelt es sich um eine verlustbehaftete Komprimierung. Das heißt beim Speichern als JPG gehen ein paar Details verloren. Je nach dem wie stark du die Komprimierung einstellst. In vielen Tools kannst du beim Speichern eines JPG die Qualität einstellen. Meistens geht das entweder von 1 bis 100, manchmal auch von 1 bis 10 (oder 12). Je niedriger der Wert, desto kleiner das Bild. Allerdings bekommst du bei starker Kompression früher oder später sogenannte Artefakte ins Bild, wie du sie auf dem Foto hier siehst (am besten anklicken, dann wird’s in groß angezeigt:

zu stark optimiertes Bild mit Artefakten
Zwei unterschiedlich stark komprimierte Versionen des gleichen Bildes. Die rechte Hälfte wurde stark komprimiert. Siehst du die kleinen Quadrate überall?

Beim PNG wird dagegen verlustfrei komprimiert. Das ist natürlich toll. Hat aber, du ahnst es bestimmt, einen Haken. Ein Foto als PNG ist viel größer als ein JPG.

Ich schreibe hier absichtlich Foto. PNG und JPG funktionieren sehr unterschiedlich in der Art wie sie die Bildinformationen abspeichern und komprimieren. Das hat zur Folge, dass Grafiken wie Banner, Logos und alles, was über große einfarbige Flächen verfügt, als PNG deutlich kleiner sind als im JPG-Format.

Außerdem kann das PNG transparente Pixel speichern. Das ist bei vielen Grafiken ganz nützlich. Denn so musst du nicht jedes Mal einen Hintergrund in der Farbe deiner Webseite hinter die Grafik packen.

Grundsätzlich gilt also: Für Fotos nimmst du JPG, für Grafiken PNG. Im Zweifelsfall probierst du einfach aus welche Datei am Ende kleiner ist.

3. Die passende Bildgröße

Je größer ein Bild ist, also aus je mehr Pixeln es besteht, desto mehr Speicherplatz braucht es.

Logisch, oder?

Wenn wir mal schauen wie groß die Bilder aus aktuellen Digitalkameras sind, dann wirst du feststellen, dass die gewaltig sind. Viel, viel größer als wir das brauchen.

Ich hab grade mal geschaut: Eine kleine Digitalkamera für die Hosentasche, die bisschen was über hundert Euro kostet, hat eine Auflösung von 16 Megapixeln. Das sind 16.000.000 Pixel – in Worten: Sechzehn Millionen!

Ein Foto aus dieser Kamera ist knapp 5000 Pixel breit und etwas mehr als 3000 Pixel hoch. Zum Vergleich: Die meisten Computerbildschirme haben eine Full-HD Auflösung (wie beim Fernseher) und die beträgt 1920 Pixel in der Breite und 1080 Pixel in der Höhe.

Retina-Displays, wie Apple sie beispielsweise verbaut, haben etwas mehr. 4k-Monitore (auch Ultra-HD genannt) können wir noch eine Weile vernachlässigen.

Ich bin der Meinung größer als 1920 Pixel in der Breite brauchst du ein Bild nicht abspeichern für den Einsatz im Web. Besser ist natürlich, wenn du es nur so groß abspeicherst wie es maximal dargstellt wird. Kaum eine Webseite nimmt den ganzen Bildschirm ein, ein einzelnes Bild sowieso nicht.

Überleg dir also vorher wie groß das Bild in etwa angezeigt wird und verkleinere es entsprechend. Vergiss dabei nicht, wenn deine Seite für mobile Geräte optimiert ist (und dann sollte sie sein), dass die Ansicht am Computerbildschirm nicht unbedingt die ist, in der das Bild am größten angezeigt wird.

Meistens ist das eher die Ansicht für Tablets. Denn viele Webseiten haben neben den Hauptinhalten eine Seitenleiste (Sidebar genannt), in der zusätzliche Infos untergebracht sind. Diese Sidebar wird, wenn weniger Platz zur Verfügung steht, meist als erstes unter den Hauptinhalt verschoben oder komplett ausgeblendet. Dadurch kann es passieren, dass der erstmal breiter wird als am PC.

Testen kannst du das ganz einfach, indem du dein Browserfenster verkleinerst. Dazu bei Windows einfach oben rechts auf das mittlere Icon (neben dem X) klicken. Jetzt kannst du den Browser mit der Maus am seitlichen Rand anpacken und größer und kleiner ziehen. Du wirst sehen, dass die meisten Webseiten sich mitskalieren und irgendwann das Layout umbrechen.

Übrigens kann WordPress automatisch verschieden große Varianten eines Bildes anlegen, das du hochlädst. Die Einstellungen dazu findest du unter „Einstellungen“ -> „Mediathek“. Ich verwende das mittlere Bildformat normalerweise für Bilder, die ich in den Fließtext einbaue.

größeneinstellung zur optimierung von bildern im web
Varianten in verschiedenen Größen, die von WordPress automatisch erstellt werden, sind sehr hilfreich beim einsparen

Falls du jetzt denkst: „Das ist aber ein Haufen Arbeit jedes Mal gucken wie groß ein Bild an dieser und jener Stelle ist.“, kann ich dich beruhigen. Du wirst auf deinem Blog keine zwanzig verschiedenen Stellen für Bilder haben. Nicht mal zehn. Vielleicht fünf. Eher weniger. Und du sollst es auch nicht übertreiben. Stell die drei Bildgrößen von WordPress vernünftig ein, dann passt das schon.

Die besten Tools, um Bilder für’s Web zu optimieren

Jetzt hab ich dir viel erzählt was du tun kannst. Aber nicht wie und auch nicht womit. Das holen wir jetzt nach.

Wie du jetzt weißt setzen wir zum Optimieren deiner Bilder an zwei Stellen an, eigentlich an drei: Das Dateiformat und die Bildgröße in Pixeln, außerdem die Stärke der Komprimierung.

Leider ist mir noch kein Tool untergekommen, das alles in einem Rutsch einwandfrei erledigt.

Schauen wir erstmal auf Dateiformat und Bildgröße. Das erledigst du am besten in deinem Bildbearbeitungstool. Sehr beliebt unter Bloggern ist Canva. Das Tool kannst du sehr gut in der kostenlosen Variante nutzen, die Bezahlversion bringt einige Komfort-Features zusätzlich.

Obwohl ich einige (teure) Grafikprogramme besitze, nutze ich auch Canva. Allerdings nur zum Erstellen von PDFs, eBooks und so, nicht für einfache Bilder. Da bietet es mir einfach nicht genug Möglichkeiten. Gerade weil ich, und das ist ein guter Tipp, den Bildern einen einheitlichen Farblook verpasse. So bekomme ich eine homogenere Bildsprache was den Wiedererkennungswert enorm steigert.

Die Nummer 1 in Sachen Bildbearbeitung ist ganz sicher Photoshop von Adobe. Kennt jeder, oder?

Übrigens ist Photoshop im Abo gar nicht mehr so teuer. Mit knapp zehn Euro (plus Steuer) bist du Stand September 2017 dabei. So richtig anfreunden konnte ich mich mit diesem Abomodell aber nicht (und werde es wohl auch nicht).

Umso besser, dass es eine super Alternative gibt, die Photoshop in nichts nachsteht (zumindest was unsere Anforderungen als Blogger angeht): Affinity Photo von Serif. Kostet einmalig knapp 55 Euro und die Jungs und Mädels bei Serif sind sehr fleißig das Tool immer weiter zu verbessern.

Wenn du noch gar kein Tool für Bildbearbeitung hast, ist Affinity Photo meine Empfehlung für dich.

Egal ob Photoshop oder Affinity Photo, beide Programme haben einiges an Funktionen und sind auf den ersten Blick vielleicht etwas verwirrend. Aber für beide findest du von den Entwicklern und anderen massig Tutorials im Netz und beispielsweise auf Youtube.

Zwei Punkte abgehakt, fehlt noch die Komprimierung.

Natürlich kannst du bei Photoshop und Affinity beim Speichern eines JPG die Qualität und damit die Komprimierung einstellen. Bei Canva geht das nicht (jedenfalls hab ich die Funktion noch nicht gefunden).

Allerdings werden Tools, die deine Seite auf Optimierungspotential überprüfen (beispielsweise Google Pagespeed) diese Bilder trotzdem noch bemängeln. Irgendwo können also noch ein paar Einsen und Nullen eingespart werden.

Um das Problem zu lösen hast du mehrere Möglichkeiten:

Du kannst ein Online-Tool wie Optimizilla nutzen. Hier lädst du deine Bilder auf den Server hoch, dort wird alles nochmal so richtig komprimiert und du bekommst die fertigen Bilder als Download zurück.

Wenn dir bei dem Gedanken deine Bilder auf irgendeinen fremden Server hochzuladen nicht ganz geheuer ist, kannst du folgende kleine Programme nutzen:

  • JPEGmini komprimiert, wie der Name schon vermuten lässt nur JPG-Dateien. In der kostenlosen Trial-Version kannst du zwanzig Bilder am Tag komprimieren. Das sollte eigentlich ausreichen in den meisten Fällen.
  • ImageOptim optimiert JPG und PNG Dateien. Allerdings fabriziert JPEGmini kleinere JPGs, da die Komprimierung dort verlustbehaftet ist (was nicht schlimm ist, da man den Unterschied nicht sehen wird). Deshalb würde ich ImageOptim nur für PNGs nutzen. Das Tool gibt’s leider nur für Mac.
  • PNGGauntlet ist die Alternative für die Optimierung von PNGs auf Windows und ist wie ImageOptim kostenlos.

Eine dritte Variante gibt es für alle, deren Webseite mit WordPress läuft. Du ahnst es bestimmt, es gibt natürlich auch dafür ein WordPress Plugin. Sogar mehrere. Empfehlen möchte ich dir zwei Stück, ein kostenloses und ein kostenpflichtiges.

WP Smush ist in seiner kostenlosen Variante vollkommen ausreichend und wird von einem professionellen Team entwickelt. Der größte Haken ist, dass hier die Bilder auf einen Server in die USA übertragen werden wo sie optimiert werden.

Die kostenpflichtige Alternative ist Optimus. Auch hier steht ein professionelles Studio dahinter und auch hier werden die Bilder nicht lokal, sondern auf einem externen Server optimiert. Der steht allerdings in Deutschland. Insgesamt ist Optimus von der Funktionsweise und den Features meiner Meinung nach besser als WP Smush. Dafür kostet’s halt Geld.

Welche dieser Lösungen du dir am Ende aussuchst, ist egal. Alle haben irgendwelche Vor- und Nachteile. Ich bin gespannt zu lesen wofür du dich entschieden hast. Vielleicht hast du auch einen heißen Tipp? Schreib’s mir in den Kommentaren.

Ist deine Webseite bereit für den Aufstieg?
Websteiger Webseiten Fitness Check Logo

Mach mit beim Websteiger Fitness-Check und find's raus! Kostet nix und lohnt sich, versprochen.

Los geht's

2 Gedanken zu „Bilder für’s Web optimieren: 3 Dinge, die du dabei nicht vergessen darfst“

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Meine Webseite nutzt Cookies. Nutzt du die Seite weiterhin, erklärst du dich damit einverstanden. Mehr Infos dazu