Bilder für das Web optimieren

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.

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.

Es gibt mehrere Aspekte, weshalb man die Dateigrößen der Grafiken auf der 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.

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

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.

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.

Wir freuen uns darauf, Dein Projekt voran­zubringen.

Vielleicht hast Du ja sogar die Möglich­keit, bei uns in Augsburg auf einen Kaffee vorbei­zukommen. Der ist zwar nicht ganz so gut, wie unsere Software, aber ehrlich. Eben so, wie wir es mögen.

Anfrage senden   08 21/ 99 95 910   info@mpunkt.com