Bilder sind ein essentieller Bestandteil der Webseiten-Inhalte. Und spätestens seit die Ladezeit ein Rankingfaktor für die Suchmaschinen ist, gilt es auf optimierte Bilder zu achten.
In diesem Artikel erfährst du, welche vielfältigen Möglichkeiten es gibt Bilder für Webseiten zu optimieren und die Ladezeit und Nutzungserlebnis damit zu verbessern.

Auch auf Webseiten gilt häufig der alte Spruch: Ein Bild sagt mehr als tausend Worte. Und da wir gerade in einer Zeit leben, in der uns visueller Content immer und überall umgibt (siehe Snapchat, Instagram usw.), kommt der Bedeutung und dem Einsatz von Bildern besondere Bedeutung zu.

Auch und gerade auf Webseiten werden Bilder daher gerne und reichhaltig eingesetzt.
Auf den meisten Webseiten verursachen die Bilddaten aber die größten Datenmengen wie das folgende Bild exemplarisch zeigt:

Neben einer guten Motivauswahl, kommt es daher darauf an das richtige Bildformat auszuwählen und die Bilder dann zu komprimieren. Denn je kleiner die Bilddateien sind, je kleiner als die Datenmenge ist, umso schneller lädt die Seite. Umso größer ist dann auch das Nutzungserlebnis deiner Besucher und umso besser für das Suchmaschinenranking. Eine win-win-Situation also!

Nicht selten lässt sich durch Komprimierung eine zweistellige Prozentzahl an Datenvolumen einsparen.

Die Bildauflösung

Bevor ein Bild in eine Webseite eingebunden wird, sollte es auf die richtige Größe, sprich Bildmaße, gebracht werden. Die Bildmaße werden in Pixel angegeben. Umgangssprachlich wird hier auch gerne von der Bildauflösung gesprochen, was aber eigentlich etwas anderes meint.

Die Bildmaße sind die reinen Pixelangaben. Also zum Beispiel 800 x 600 Pixel. Dann hat das Pixel 800 Pixel in der Breite und 600 Pixel in der Höhe. So groß ist das Bild.
Die Bildauflösung meint eigentlich wie viele Pixel auf eine bestimmte Längeneinheit kommen. Also bspw. wie viele Pixel pro Zentimeter oder Inch (da hier gerne mit amerikanischen Längeneinheiten gearbeitet wird). Dies ist da interessant, wo es um konkrete Längenmaße geht, wie bspw. beim Druck. Hier muss ein Bild eine bestimmte Größe in Zentimeter oder eben Inch haben, z.B. 15 x 10 cm.
Und hier ist es dann wichtig, wie viele Pixel innerhalb eines cm sein sollen. Je mehr, umso feiner die Bildauflösung. Für den professionellen Druck werden 300 Pixel pro Inch benötigt.

Hier geistert dann oft die Auflösung von 72dpi für das Web herum. Das würde bedeuten, im Web muss die Bildauflösung 72 Pixel pro Inch betragen. Dies ist nicht korrekt (hier findest du mehr über diesen schon sehr alten 72er-Mythos).

Die Bildauflösung ist bei Bildern fürs Web egal, wichtig sind die Bildmaße.

Die richtigen Bildmaße ergeben sich daher aus der gewünschten Darstellungsgröße des Bildes auf der Webseite. Das ist natürlich von Webseite zu Webseite und von Bild zu Bild unterschiedlich.
Wer kein professionelles Bildbearbeitungsprogramm zur Hand hat oder „mal eben schnell“ die Bildgröße anpassen will, kann das Online-Tool Picture Resezier benutzen.

Mehr Infos zur Pixelgröße und dem optimierten Speichern fürs Web aus Photoshop, gibt es im Video Bilder für das Web optimieren und speichern.

Die wichtigsten Bildformate im Überblick:

Wenn die Bildgröße festgelegt wurde (und sonstige relevante Bildbearbeitungen stattgefunden haben), muss das Bild gespeichert werden. Dazu stehen viele unterschiedliche Dateiformate zur Verfügung. Fürs Web sind vor allem vier Dateiformate interessant:

JPG: Für Bilder mit vielen Details und vielen Farben

Das JPG, manchmal auch JPEG geschrieben, steht für Joint Photographic Experts Group und wurde speziell zum Speichern von Fotografien entwickelt. Das JPG dürfte das meistverbreitete Bildformat im Web sein.
Das JPG-Format eigentlich sich vor allem für Bilder mit fotorealistischen Motiven, die in guter Qualität, aber recht geringem Datenvolumen abgespeichert werden sollen. Bei größeren einfarbigen Flächen wird die verlustbehaftete Komprimierung schnell sichtbar.

Eigenschaften des JPG-Bildformats:

  • Gut geeignet für fotorealistische Bilder mit vielen Farben.
  • Optimierungs-Optionen: Komprimierung einstellbar.
  • Relativ geringer Speicherplatzbedarf (von der Komprimierung abhängig).
  • Komprimiert mit Qualitätsverlust, mehr oder weniger sichtbare Artefakte.
  • Starke Komprimierung = geringe Speicherbedarf = schlechte Bildqualität.
  • Geringe Komprimierung = großer Speicherbedarf = gute Bildqualität.

PNG

Das PNG-Format (Portable Networks Graphics) ist im Vergleich zu den beiden bereits vorgestellten Formaten ein noch relativ junges Bildformat, welches als Alternative zum GIF entwickelt wurde.
Die Komprimierung des PNGs ist nicht so verlustreich wie beim JPG, dafür die Datenmenge auch größer. Das PNG kann als 24 Bit (PNG-24) und als 8 Bit (PNG-8) abgespeichert werden. Die 24 Bit-Variante ist sozusagen der Standard für fotorealistische Motive (mit der Möglichkeit über 16 Mio. Farben). Die 8 Bit-Variante kann nur 256 mögliche Farben darstellen und eignet sich daher nur für Motive mit wenigen Details.

Eigenschaften des PNG-Bildformats:

  • gute Bildqualität
  • Möglichkeiten der Transparenz
  • verlustfreie Komprimierung

GIF: Comeback durch Bewegtbilder

Das GIF-Format kann Bilder nur mit maximal 256 Farben (8 Bit) darstellen. Es kommt daher vor allem bei Motiven mit einem geringen Farbspektrum, wie z.B. Logos, Icons, Illustrationen oder Navigationsbilder zum Einsatz. Eigentlich ist das GIF-Format inzwischen fast überflüssig. Mit seinen wenigen Farben ist es für fotorealistische Motive ungeeignet. Es kann zwar Transparenzen darstellen, aber das PNG-8 kann dies auch.
Was das GIF den anderen beiden voraus hat, ist die Möglichkeit (kurze) Animationen, bzw. vielmehr einzelne Bilder nacheinander, abzuspielen.

Diese sogenannten GIF-Animationen lassen sich inzwischen teilweise auch durch CSS3-Animationen (und/oder JavaScript) ersetzen. Ab und an lassen sich die aber auch wirkungsvoll einsetzen, um mit geringen Datenmengen Der Interfaces zu erklären oder sind auch beliebt bei den sog. Cinemagraphs oder als kleine animierte Bilder, um sie in den Weiten der sozialen Netzwerke zu teilen wie die folgenden Beispiele zeigen.

SVG

Das SVG-Format (Scalable Vector Graphics) ist das einzige Vektorformat in dieser Reihe. Damit gibt es hier keine Bildgröße mit Pixelmaßen.
Vektorgrafiken haben einige Vorteile gegenüber Pixelgrafiken: Da sie aus mathematisch exakt beschriebenen Punkten, Linien und Kurven bestehen, sind sie auflösungsunabhängig und daher beliebig skalierbar. Im Vergleich zu Pixelgrafiken, die jeden einzelnen Farbpixel abspeichern müssen, werden hier nur Parameter gespeichert, so dass sie meistens einen sehr geringen Speicherbedarf haben.

Seit HTML5 können SVG-Grafiken auch ohne Plug-in in Webseiten eingebunden werden. Alle modernen Browser (auch ab IE9) können mit ihnen umgehen. Überall da, wo Motive mit einfachen grafischen Inhalten vorkommen, ist das SVG-Format geeignet, z.B. bei Logos, Diagrammen oder (einfachen) Illustrationen.

Eine sehr umfangreiche Darstellung und Vergleich der einzelnen Bildformate liefert: Optimizing Images.

Tools, um Bilder zu komprimieren

Wenn Bildmaße und Dateiformat optimiert, bzw. bewusst ausgewählt und das Bild gespeichert wurde, ist das Bild einsatzbereit. Doch auch jetzt lässt es sich noch weiter optimieren. Es gibt Online-Tools (Link), mit denen sich die Dateigröße weiter reduzieren lässt. Das ist vor allem daher interessant, da Bilder meistens die größten Datenmengen verursachen. Hier lohnt es sich also besonders weiter zu optimieren.

Wichtig ist bei der Komprimierung darauf zu achten, dass der sichtbare Qualitätsverlust nicht zu groß wird. Daß heißt, dass er nicht sichtbar ist, oder zumindest nicht sichtbar stört.

Es gibt inzwischen schon Dutzende Programme, die Bilder komprimieren können. Im folgenden stelle ich ein einige von ihnen vor:

TinyPNG

Das Tool mit dem Panda: TinyPng komprimiert PNGs, aber auch JPG-Dateien – und zwar ohne Qualitätsverlust.
Das Tool ist auch gut für PNGs mit Transparenzen geeignet. Aus 24BIT-PNGs können sogar 8BIT-PNGs erzeugt werden, was die Datenmenge natürlich spürbar reduziert (laut Angaben auf der Webseite teilweise über 70%).
TinyPNG

Wer TinyPNG als Photoshop-Plugin möchte, kann dies für $50 erwerben und muss dann nicht mehr den „Umweg“ über die Webseite gehen.

Compressnow

Bei Compress Now unterstützt JPG-, PNG- und GIF-Dateien und es lässt sich die Komprimierungsstufe selber einstellen. Wurde ein Bild hochgeladen, wird dynamisch angezeigt wie sich die Dateigröße bei unterschiedlicher Komprimierungsrate verändert.
Das Bildergebnis lässt sich auch sofort begutachten (zumindest in einem kleinen Vorschaufenster). Wenn einem das Ergebnis gefällt, kann man das Bild gleich downloaden.
Compressnow

JPEG Optimizer

Der Name ist Programm: Hiermit lassen sich JPG-Dateien optimieren. Es lässt sich aber nicht nur die Komprimierungsrate einstellen. Die Bildmaße lassen sich auch anpassen. Es wird die gewünschte neue Bildbreite angegeben und die Höhe wird dann proportional angeglichen.
Nach dem Optimieren werden die alten und neuen Daten gegenüber gestellt, so dass man einen schönen Vergleich hat. Vor allem die eingesparte Dateimenge in Prozent überzeugt.
JPEG Optimizer

Optimizilla

Mit dem Tool Optimizilla lassen sich bis zu 20 JPG- und PNG-Dateien auf einmal hochladen und komprimieren. Für jedes Bild wird dann groß und deutlich die eingesparte Dateimenge angezeigt. Wer noch feiner justieren will, kann für jedes Bild die Komprimierung auch einzeln einstellen. Danach lässt sich ein ZIP-Archiv mit den komprimierten Bildern downloaden.
Optimizilla

Dieses Tool ersetzt im Grunde die beiden beliebten Komprimierung-Werkzeuge Compress JPEG und Compress PNG, die jeweils nur für das eine Dateiformat geeignet waren.

Compressor

JPG, PNG, GIF lassen sich mit diesem Tool komprimieren. Es gibt eine verlustfreie Kompression, aber selbst bei der verlustbehafteten Komprimierung sind die Unterschiede kaum erkennbar.
Das Tool überzeugt vor allem durch die moderne und intuitive Bedienung. Etwas womit nicht jedes Tool glänzen kann…
Compressor

Responsive Bilder

Zu Beginn des Artikels habe ich von den Bildmaßen in Pixeln gesprochen und dass das Bild auf die Ausgabegröße optimiert werden sollte.

Bei responsiven Webdesigns ist es aber meistens so, dass sich die Bildmaße flexibel verändern. Es gibt hier nicht nur „die eine“ Bildgröße, sondern viele unterschiedliche. Das formatfüllende Bild auf einem großen Monitor ist in seinen Dimensionen auf einem Smartphone natürlich total „oversized“.

So lassen sich Bilder im responsiven Webdesign zum Beispiel nach der Pixeldichte optimieren: Bei hochauflösenden Displays (wie z.B. das Retina-Display von Apple) kann man Bilder mit einem größeren Pixelumfang anzeigen lassen.

Bei unterschiedlichen Bildschirmauflösungen können unterschiedliche Bilder (mit unterschiedlichen Maßen) angezeigt werden. Dies lässt sich über Breakpoints realisieren.
Mehr dazu, und vor allem technische Einzelheiten samt Beispiel-Quellcodes, finden sich in diesen beiden Artikeln:
5 Tipps für Responsive Images mit HTML
Responsive Images – , srcset, sizes & Co.

Interessant ist das Tool Adaptive Images. Dieses liefert die passende Bildgröße zu dem jeweiligen Screen des Besuchers aus. Es werden also, sozusagen in Echtzeit, jeweils passende Bildgrößen erstellt. Das spart nicht nur Ladezeit beim User, sondern erspart auch die Erstellung verschiedener Bildgrößen im voraus:

Alternativen zu Bildern

Bildgröße, Dateiformat, responsive Bilder – da gibt es schon einiges zu beachten. Es lässt sich aber bei Bedarf noch mehr optimieren. Und zwar schon eventuell schon VOR der Entscheidung für ein Bild. So gibt es die Option ganz auf Bilder zu verzichten.

CSS3-Techniken

Die (ok, inzwischen nicht mehr ganz so neuen) CSS3-Techniken erlauben Effekte, die früher auf Webseiten nur mit Pixelbildern umzusetzen waren. Schattenwürfe, Rundungen, Drehungen, Verzerrungen, Transparenzen, Verläufe oder die aus Photoshop so beliebten Blendmodi (Mischmodi) und noch andere lassen sich jetzt recht simpel per CSS umsetzen.

Werden solche „Effekte“ mit CSS3 statt Pixelbildern umgesetzt, spart dies deutlich Datenmengen.

Folgendes kleines Beispiel zeigt anschaulich ein paar der mit CSS3 möglichen Effekte auf:

See the Pen Button.css: CSS3 Button Animations by Zixuan(Kevin) Fan (@kevinfan23) on CodePen.

CSS-Sprites

Statt mehrerer (kleiner) Bilder zu laden, gibt es die Möglichkeit, diese in einem großen Bild abzuspeichern. Und dann per CSS immer nur einen, den passenden, Ausschnitt dieses Bildes einzublenden. Das spart insofern Ladezeit, weil nur ein einziges (sicherlich größeres) Bild geladen werden muss und nicht mehrere (kleinere). Dadurch werden aber die Abfragen an den Server reduziert. Icons (z.B. der sozialen Netzwerke) oder Länderflaggen sind beliebte Beispiele und Einsatzgebiete für die CSS-Sprites.

Mehr zu den CSS-Sprites im Artikel CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Zwei Beispiele für CSS-Sprites: Viele kleine Icons in einem großen Bild

Bilder nachladen

Normalerweise werden alle Seiteninhalte nach und nach geladen. Unabhängig davon ob der User sich auch alle Inhalte anschaut. Bei der aktuellen Entwicklung zu immer längeren Seiten mit immer größeren Bildern (was sich in den One-Pagern zuspitzt) werden also häufig große Datenmengen geladen, zu denen der User nie gelangt (sei es weil er die Seite vorher verlässt oder auf einen Link klickt) – was natürlich für beide Seiten ungünstig ist.

Hier hilft das „faule“ Laden. Die Bilder werden erst dann geladen, wenn der User, also der Browser, auch an die entsprechende Stelle der Seite gelangt, in dem das Bild angezeigt wird. Das kann dazu führen, dass es immer wieder einen Moment dauert bis das entsprechende Bild geladen ist, also immer wieder kurz eine leere Fläche zu sehen ist. Aber das erstmalige Laden der Seite an sich geht wesentlich schneller. Und vor allem werden weniger „unnütze“, weil nicht beachtete, Daten geladen.

Für dieses sogenannte „Lazy Load“ gibt es ein jQuery-Plugin, das sich simpel einbinden lässt und den Rest erledigt:
Lazy Load Plugin for jQuery .

Um diesen kurzen Ladeeffekt der leeren Fläche nicht zu haben, lassen sich die Bilder auch schon „kurz“ vorher Laden, bevor der User an der entsprechenden Stelle ist.

Tips für Bilder in WordPress

Da viele Leser WordPress einsetzen, habe ich zum Abschluss noch ein paar Tips für dieses schöne CMS.

Vorschaubilder in WordPress

Von jedem hochgeladenen Bild werden ja standardmäßig gleich Thumbnails, also kleine Vorschaubilder angelegt. Im Backend unter „Einstellungen“ → „Medien“ lassen sich die generierten Bildgrößen ändern. Das geht aber so nur für zukünftige Bild-Uploads und sollte daher im Idealfall direkt nach beim ersten Einrichten der WordPress-Seite erfolgen.

Wer zusätzliche Vorschaubilder in anderen Maßen braucht, kann dies in der functions.php angeben. Ein paar hilfreiche Tips finden sich dazu im Artikel Bildgrößen im WordPress Theme.

Möchte man die Vorschaubilder noch nachträglich anpassen geht das gut mit dem Plugin Regenerate Thumbnails.

Bilder in WordPress komprimieren

Oben habe ich schon ein paar Tools vorgestellt, um Bilder, bzw. die Datenmenge zu optimieren. Mit dem Plugin https://wordpress.org/plugins/wp-smushit/ lassen sich direkt im WordPress-Backend die Bilder verlustfrei komprimieren und bei Wunsch auch die Dateimaße anpassen. Die Bilder kann man entweder direkt beim hochladen komprimieren oder auch auf Knopfdruck alle schon vorhandenen gleichzeitig (bzw. bei der kostenfreien Version immer 25 zusammen).

So lassen sich die Bilder auch nachträglich noch optimieren. Das Plugin zeigt auch an, ob ein Bild schon komprimiert wurde oder nicht.

Bilder nachträglich laden

Oben habe ich die Technik des „Lazy Load“ vorgestellt. Hierzu gibt es natürlich auch passende WordPress-Plugins, u.a. Lazy Load WordPress.

Fazit

Bilder zu optimieren, gehört zur Standard-Arbeit eines Webdesigners. Das beginnt bei der richtigen Bildgröße und Dateiformat und endet manchmal erst beim „faulen Laden“…

Was ich fast vergessen hätte: Ganz am Anfang könnte natürlich die Frage stehen, ob ein Bild überhaupt benötigt wird. Ist er unersetzlich für das Verständnis des Inhalts? Nicht selten werden ja großformatige Bilder eingesetzt, die vor allem „nett“ aussehen sollen. Großformatige Landschaftsbilder beispielsweise, die aber nicht mal einen direkten Bezug zur Thematik der Webseite oder den Inhalten haben. Trotz aller „Visualität“, der wir ausgesetzt sind und in der es heißt sich „durchzusetzen“ und auf sich aufmerksam zu machen:

Vielleicht ist manchmal ratsamer, weniger Bilder einzusetzen und stattdessen die Typografie feiner auszugestalten!

So, in diesem Artikel habe ich dir einige Aspekte und Techniken vorgestellt, um deine Bilder zukünftig zu optimieren und das Nutzungserlebnis für deine Besucher möglichst groß zu halten, bzw. durch unnötige Datenmengen nicht zu verschlechtern.
Wenn du noch weitere Tips hast, immer her damit in den Kommentaren!

Bilder optimieren fürs Web – Tools, Dateiformate & Plugins
527 Stimme[n]

Weiterempfehlen ausdrücklich erlaubt:

Die Webdesign Checkliste

Webdesign-Newsletter +
WEBDESIGN-CHECKLISTE
mit 90 Checkpunkten für
Dein nächstes Projekt:

Keine Sorge, Spam gibt es hier nicht und Adressen gebe ich natürlich auch nicht weiter!
(Beispiele, Datenschutz, Analyse und Widerruf)

Autor:
Martin Hahn ist Webdesigner, Dozent, Fachbuchautor und dreifacher Papa. Seit vielen Jahren hilft er anderen effektivere Webdesigns zu erstellen – in Schulungen und mit Artikeln in diesem Blog. Tägliche Webdesign-Links von Martin gibt es auch auf twitter.

9 Kommentare

  1. Moin Martin,
    danke für die ausführliche Zusammenfassung. Als Alternative zu Bilddateien und als Ablösung der CSS-Sprites (für monochrome Icons) wäre aber eine Erwähnung der Icon-Fonts (FontAwesome, etc.) absolut essentiell! Im Zuge der ganzen Tools zur einfachen Erstellung solcher Icon-Font-Libraries (IcoMoon, Fontello etc.) wäre das vielleicht auch ein Thema für einen extra Beitrag!
    Ansonsten: weitermachen! 😉

    Danke und Gruß,
    Thorsten

    • Hallo Thorsten,
      ja, danke für die Ergänzung, da hast du absolut Recht!
      Über die Einbindung von Icon-Fonts hatte ich hier schon mal was geschrieben.
      Ich hatte auch überlegt, die Webfonts in den Artikel dazu zu nehmen. Da man bei besonderen Schriftarten-Anforderungen seltener auf Text als Bild zurückgreifen muss.
      Aber gut, jetzt haben wir es hir ergänzt 😉

      Gruss
      Martin

  2. Hallo Martin,
    super informativer Artikel zu diesem Thema.

    Bildbearbeitung wird ja immernoch sträflich au Websites vernachlässigt bzw. viele wissen einfach nicht wie genau und mit was genau. Da bietet dein Artikel einen tollen Mehrwert. Danke!

    Empfehle ich gerne weiter!

    Viele Grüße, Bettina

    • Hallo Bettina,
      danke für Dein Feedback und die Weiterempfehlung.

      Gruss
      Martin

  3. Hallo Martin

    Danke für die gute Übersicht. Frage: Macht eines der hier vorgestellten Tools die Komprimierung besser als die Funktion „Fürs Web speichern“, die Photoshop enthält und die ich regelmässig nutze? Ein Bild gleich bei der Bearbeitung auf die passende Grösse herunterzurechnen als dafür ein Plugin oder sonst ein Tool zu benutzen ist ja ohnehin das einfachste.

    Gruss, Dominik

    • Hallo Dominik,
      „besser“ ist hier der falsche Begriff. Ich würde die Tools zusätzlich nutzen.
      Also zuerst die Bilder aus Photoshop in der passenden Bildgröße komprimiert speichern und dann schauen, ob und was du noch mit einem der Tools herausholen kannst. Meistens geht da noch was…
      Gruss
      Martin

  4. Hallo Martin,

    auch ich habe vor kurzem schmerzlich erfahren müssen, wie stiefmütterlich ich mit den auf meiner Website verwendeten Bildern und Fotos umgegangen bin. Nach einem Website-Speed-Test ist es mir wie Schuppen von den Augen gefallen, meine Page war einfach viel zu langsam und fiel komplett durch!

    Und als ich dann auch noch lesen musste, dass das Google-Ranking unter schlecht bzw. nicht optimierten Bildern leidet habe ich lange zwei Tage daran gesessen, jedes einzelne Bild zu optimieren und mit ALT-Tags zu versehen.

    Ich kann nur jedem raten, diesen guten Artikel zu beherzigen und von vorn herein seine Bilder zu optimieren. Tut euch selber diesen Gefallen denn eine spätere Optimierung ist wahnsinnig zeitaufwendig.

    • Hallo Christian,
      ja, ein nachträgliches Optimieren ist zwar möglich, aber etwas aufwendiger.
      Aber Hauptsache man macht es 😉

      Gruss
      Martin

  5. Sehr spannender Artikel! Bisher habe ich immer auch mit Photoshop „für Web speichern“ als PNG verwendet. Ich werde es mal mit deinen Tipps probieren, danke Martin!

Kommentar schreiben

Email-Adresse wird nicht veröffentlicht!