« Zurück zur Übersicht
Schaukeln im Park

Bilder für das Web optimieren

Oft werden wir gefragt, wie man Bilder für den eigenen Internetauftritt optimiert. Fotos sollen komprimiert werden und dennoch nicht an Qualität verlieren. Es folgen nun ein paar hilfreiche Tipps, mit denen ihr eure Bilder für das Web aufbereiten könnt.

Bilder zuschneiden:
Oft werden Bilder automatisch für den Benutzer vom Skript zugeschnitten. Es empfiehlt sich dennoch ein manueller Zuschnitt auf das benötigte Maß, wenn dies bekannt ist. Somit lässt sich der angezeigte Ausschnitt selbst bestimmen und man kann überflüssige Informationen gleich wegschneiden, damit die wichtigeren besser zur Geltung kommen.

Auflösung dpi:
Dpi bedeutet dots per inch – Tintentropfen pro inch (1inch = 2,54cm). Überall gibt es Verwirrung über dpi. Welche Einstellung ist nun richtig? Oft liest man 72dpi, zum Teil 300dpi. Jedoch ist dies nur im Druck wichtig. 
Im Web ist nur das Pixelmaß wichtig, da dies die Größe der Darstellung im digitalen Bereich bestimmt und die dpi sind völlig belanglos.

Dateigrößen so klein wie möglich:
Es gibt mehrere Aspekte, weshalb man die Dateigrößen der Grafiken der eigenen Website so gering halten sollte wie möglich.
Ein Punkt ist die langsame Internetverbindung, welche von manchen noch benutzt wird. Es wird noch nicht überall eine schnelle Leitung angeboten und man möchte diese Besucher ja nicht ausschließen.
Ein weiterer Punkt ist die steigende Nutzung von Smartphones, Tablets und Ähnlichem. Immer mehr Besucher von Webauftritten gehen mit einem mobilen Endgerät surfen. Viele davon benutzen sicher auch ihr mobiles Internet. Große Bilder verbrauchen zum einen viel vom monatlichen Datenvolumen und zum Anderen benötigt die Website unnötig lange zum Laden.

Dateiformate für Bilder im Web:
Die gängigsten Formate für das Web sind JPEG, GIF und PNG. Zwischen den Formaten gibt es einige Unterschiede, unter Anderem in Komprimierung, Einstellungsmöglichkeiten und Dateigröße.
Hier ein kleiner Überblick über die Hauptmerkmale der ausgewählten Formate:

  • JPEG: Bei der Kompression von JPEG (Joint Photographic Experts Group) können Bildinformationen und somit ein Teil der Qualität verloren gehen. Wenn man jedoch nicht mit der Komprimierung übertreibt, sind diese Verluste jedoch kaum sichtbar und man spart hiermit einiges an Speicherplatz. Zusätzlich kann man in das Format noch Metadaten, wie zum Beispiel den Eigentümer des Bildes, einbetten.
    Anwendungsbeispiel: Fotos
  • GIF: Das Graphic Interchange Format (GIF) wird verlustfrei komprimiert und ist deshalb zum Speichern von Logos und animierten Grafiken geeignet. Jedoch kann GIF nur 256 Farbtöne darstellen, weshalb dieses Format für Fotos total ungeeignet ist.
    Anwendungsbeispiel: Animierte Grafiken, kleine Grafiken
  • PNG: Es gibt zwei Versionen von PNG (Portable Network Graphics).
    PNG-8 ist im Prinzip wie GIF und kann nur 256 Farbtöne darstellen. Der einzige Unterschied ist, dass PNG-8 keine Animationen speichern kann.
    Das Format PNG-24 bietet die beste Qualität. Es speichert komplett Verlustfrei und unterstützt Transparenz. Allerdings hat dies auch zum Nachteil, dass die Dateigröße größer ausfällt.
    Anwendungsbeispiel: Logos, Grafiken mit Transparenz

Tools/Webseiten:
Es gibt unzählige Werkzeuge zur Bearbeitung von Bildern. Hier einige Beispiele, die bei der Bildoptimierung helfen können:

  • Fotosizer: Ein weiteres nützliches Programm ist Fotosizer. Die kostenlose Version reicht zum Zuschneiden und Größe verändern vollkommen aus.
  • GIMP: GIMP wird von manchen als das Photoshop unter den kostenlosen Programmen bezeichnet. Hiermit kann man Fotos mit zahlreichen Tools bearbeiten.
  • Bilder editieren: Die Website bilder-editieren.de bietet einem die Möglichkeit, Bilder im Browser zu skalieren, sie selbst zuschneiden und Filter auf diese anzuwenden.
  • Adobe Photoshop: Wer die professionelle Bildbearbeitungssoftware Adobe Photoshop besitzt, kann man die Funktion „Für Web speichern…“ nutzen. Hier kann man anschließend noch das gewünschte Dateiformat und die dazugehörigen bestimmen.