Bilder für Webseiten optimieren

In der digitalen Mediengestaltung, zu welcher auch das Webdesign gehört, wird grundsätzlich zwischen zwei Arten von Bildern unterschieden. Dies sind zum einen die Vektorgrafiken und zum anderen die Pixelbilder (Bitmaps). In das Webdesign werden Pixelbilder eingebunden. Typische Beispiele für Pixelbilder sind digitale Fotos oder eingescannte Bilder.

Vektorgrafik | Bitmap | Fotos | Jpg-Bilder

Eigene Bilder bearbeiten

Bilder sind aus dem modernen Webdesign nicht mehr wegzudenken. Sie sollten optimal auf die textlichen Inhalte einer Webseite abgestimmt sein. Auch wenn Fotos aus Digitalkameras bereits in einem Pixelformat vorliegen sind sie für die Verwendung auf Webseiten meist überdimensioniert. Wichtig sind deshalb die Bearbeitung und Optimierung der, für die Website, vorgesehenen Bilder. Dabei sollte auch der optimale Bildausschnitt festgelegt werden. Falls die Fotos im RAW-Format aufgenommen wurden müssen sie vor dem Einbinden in die Webseite noch ins jpg-Format konvertiert werden. Auch Kontrast, Farben und Schärfe müssen beim RAW-Format fast immer angepasst werden.

Zum Bearbeiten und Optimieren der Bilder stehen, von kostenlos bis sehr teuer, die unterschiedlichsten Bildbearbeitungsprogramme zur Verfügung. Im privaten Bereich leisten kostenlose Grafikprogramme sehr gute Dienste. Mit der Digitalkamera gelieferte Programme können ebenfalls schon sehr hilfreich sein, wobei die Funktionen meist sehr eingeschränkt sind.

Für die Ausgabe von Grafiken und Fotos auf PC, Mac und Notebook ist eine Auflösung von 72 bis 104 ppi im Bildbearbeitungsprogramm richtig eingestellt. Bilder die größer sind benötigen nur zusätzliche Ladezeit und bringen unter Umständen riesige Bilder auf den Bildschirm, die der Browser bestenfalls, nach dem endlos langen Ladevorgang, auf eine darstellbare Größe reduziert. Tut er es nicht und ist das Bild größer als das Display, muss horizontal und vertikal gescrollt werden, was den Besucher ganz sicher noch mehr verärgern wird, als es die lange Ladezeit ohnehin schon getan hat.

Wichtig ist es deshalb zu überlegen, welchen Platz die einzelnen Bilder auf dem Monitor von PC, Mac und Notebook sowie auf den Displays mobiler Endgeräte einnehmen sollen. Zu bedenken ist auch, wie groß Bilder bereitgestellt werden, die für den Druck vorgesehen sind. Die, für eine bestimmte Darstellungsgröße, auf dem Monitor benötigte Anzahl der Pixel eines Fotos, kann genau berechnet werden.

Bilder für den Druck sollten mindestens 300dpi aufweisen. Stellen Sie Bilder zum Drucken am besten als gesonderten Download bereit. Es ist günstig eine Übersicht mit einer Auswahl von kleinen Vorschaubildern anzuzeigen, bevor die großen Bilder aufgerufen werden können. So kann der Besucher selbst wählen, ob und welche Bilder er sich in voller Größe ansehen möchte. Das gilt auch für die Bilder die als Download für den Druck bereit gestellt werden. Es macht wenig Sinn einen A4-Ausdruck mit mindestens 300dpi in voller Größe im Browser öffnen zu lassen.

Das richtige Grafik-Formates für die Internetpräsentation

Bevor Sie Ihre Bilder in die Webseiten einfügen können müssen diese in einem für Browser darstellbaren Format vorliegen. Das Speichern von Grafik-Dateien kann verlustfrei und verlustbehaftet erfolgen. Verwendet werden dafür Bildbearbeitungs- oder Illustrationsprogramme. Grafikformate, bei denen eine Komprimierung durchgeführt wird, sind meist verlustbehaftet, vor allem wenn hohe Komprimierungsraten erreicht werden.

Für das Einbinden von Fotos in Internetpräsentationen ist das jpg Format die erste Wahl. Obwohl es mit einer verlustbehafteten Komprimierung arbeitet, bietet es doch sehr kleine Dateigrößen bei guter bis sehr guter Qualität, je nach Komprimierungsstufe. Diese ist so zu wählen, dass eine möglichst kleine Datei entsteht jedoch noch keine Artefakte sichtbar werden.

Das weniger bekannte png-Format ist ebenfalls für das Einfügen von Fotos ins Weblayout geeignet, konnte sich aber bisher nicht richtig durchsetzen, wahrscheinlich weil es im Vergleich zum jpg-Format, deutlich größere Dateien erzeugt.

Das dritte Format zur Verwendung auf Webseiten ist das gif-Format. Dieses wird vor allem eingesetzt, wenn Vektorgrafiken für das Internet in eine Pixelgrafik exportiert werden sollen. Das können Logos, Diagramme, Button, Dokumente oder technische Zeichnungen sein. Vektorgrafiken bestehen oft aus Formen größerer Flächen mit meist nur wenigen Farben. Da beim Speichern im gif-Format die Farben der Grafik auf höchstens 250 Farbwerte reduziert werden, kann somit eine starke Dateiverkleinerung im Verhältnis zu jpg oder png erreicht werden. In einem Dialogfeld können die Farbwerte sogar noch weiter reduziert werden. Wenn beispielsweise nur vier Farben vorhanden sind muss die Auswahl nicht auf 250 Farben stehen sondern kann auf die vier vorhandenen Farben eingestellt werden, was eine weitere Dateiverkleinerung bewirkt. Weitere Anwendugnsgebiete für das gif-Format sind kleinere, aus mehreren Ebenen bestehende Animationen und Bilder, die transparente Bereiche enthalten. Zum Speichern von Fotos ist das gif-Format weniger geeignet, da Fotos einen deutlich größeren Farbumfang aufweisen.

Pdf-Dateien können neben vektorbasiertem Text ebenfalls Bilder enthalten. Auch pdf-Dateien können in Webseiten eingebunden werden. Sehr praktisch ist das Pdf-Format zur Anfertigung von Katalogen oder Broschüren, die zum Download oder online-blättern bereit gestellt werden können.

Zu erwähnen wäre noch das ico-Format. Es dient dazu die kleinen Grafiken aufzunehmen, die in der Adresszeile vieler Browsers angezeigt werden. Als favicon.ico werden sie im <head>-Bereich der Webseiten eingebunden. Damit wären dann die websitetauglichen Bildformate, die ein Browser anzeigen kann schon aufgezählt.

Software Tipps - Bildbearbeitungsprogramme

Wer beispielsweise die eigenen Bilder für die Gestaltung der privaten Website bearbeiten möchte, jedoch nicht gleich mehrere Hundert bis Tausend Euro für ein professionelles Bildbearbeitungsprogramm ausgeben will, ist mit den folgenden beiden, kostenlosen Programmen sicher gut beraten. Genaue Informationen über die Nutzungsbedingungen und den Leistungsumfang der empfohlen Programme erhalten Sie auf den Websites der Hersteller. Dort wird auch der Download angeboten.

Freeware Bildbearbeitung

IrfanView ist ein sehr guter Bildbetrachter, der einige Bearbeitungsmöglichkeiten für Bilder bietet. Für den privaten Gebrauch ist IrfanView Freeware.
Gimp ist ein kostenloses, sehr gutes Bildbearbeitungsprogramm unter der GNU-Lizenz mit Ebenenunterstützung und sehr großem Funktionsumfang. Die Darstellung von transparenten Bereichen in den Bildern, welche auch als Alphakanäle bezeichnet werden, und die Erzeugung animierter gif's stellen für dieses Grafikprogramm keine Probleme dar.