Bilder sind eine tolle Möglichkeit, um Inhalte auf Websites und Blogs aufzulockern und Textwüsten entgegenzuwirken. Sie helfen, Botschaften und Emotionen zu vermitteln und besser einzuprägen. Bei der Verwendung von Bildern im Web solltet ihr auf ein paar Dinge achten – zwingend auf das Komprimieren von Bildern, für ideale Nutzung auch einige Dinge bezüglich Suchmaschinenoptimierung und Nutzung in Social Media. In diesem ersten Teil der kleinen Reihe geht es um Grundlagen und Tool-Empfehlungen.

Mit diesem Beitrag nehmen wir an der Blogparade von Zielbar „Deine Top-Online-Tools“ teil. Was ist eine Blogparade?

Bilder bearbeiten für die Website – ein „Muss“

Es geht doch eigentlich so einfach – mit dem Smartphone oder der Kamera einen Schnappschuss gemacht, auf den PC übertragen und hochgeladen. Wunderschönes Bild, also passt doch alles, oder? Nein, so einfach ist es leider nicht. Aber keine Sorge, so schwierig auch nicht. Ihr müsst nur diese grundlegende Dinge beachten: Größe, Komprimieren und Reduzieren des Bildes.

Denn Kameras und Smartphones haben mittlerweile so hochwertige Standards, dass die Bilder viele Bildinformationen beinhalten und immer höher Auflösungen haben. Dies ist nicht sinnvoll fürs Netz, denn das verursacht lange Ladezeiten.

Auswirkungen schlechter Ladezeiten

Schlechte Ladezeiten der Website wirken sich negativ auf eure Absprungraten von Website-Besuchern und die Suchmaschinenoptimierung aus. Lange Ladezeiten nerven unheimlich – ist euch bestimmt auch schon so ergangen, ihr kommt auf eine Website und sie lädt und lädt und lädt…bei der Nutzung von Smartphones kommt noch hinzu, dass manchmal eine schlechte Verbindung zum Internet besteht, was das ganze nochmals verschlimmert. Bevor ich euch zeige wie ihr vorgehen könnt, gibt es (ich habe Philipp interviewt ;-)) zuerst noch ein paar theoretische Grundlagen.

Entgegen manchen Fehlbehauptungen: Es ist nicht allein die Auflösung, auf die es ankommt!

[Tweet „#Bildbearbeitung fürs Web: Es ist nicht nur die Auflösung, auf die es ankommt!“]

Es sind eigentlich drei verschiedene Faktoren, auf die ihr einwirken müsst: Die Größe des Bildes (Auflösung/Pixelanzahl), Komprimierung des Bildes und Reduktion der Bildinformationen.

Die passende Größe/Auflösung für eure Bilder

Für Interessierte noch eine kleine Erklärung, was Auflösung bedeutet: Die Auflösung beschreibt die Gesamtanzahl der Bildpunkte in einem Bild, die Anzahl der Bildpunkte vertikal mal die Anzahl der Bildpunkte horizontal. Des Weiteren ergibt sich aus diesen Maßen das Seitenverhältnis.

FullHD hat beispielsweise die Auflösung 1920 x 1080, damit ergibt sich ein Seitenverhältnis von 16:9 und die Anzahl der Bildpunkte von 1920 * 1080 = 2.073.600, was man auch in Megapixel ausdrücken kann = 2,07 MP.

Standardauflösungen und Seitenverhältnisse findet ihr hier: Bildauflösungen in der Digitalfotografie.

Die passende Größe/Auflösung des Bildes ist demnach leicht herzustellen – schneidet das Originalbild auf die Größe zu, die ihr benötigt.

Etwas komplizierter wird es dann bei der Bildreduktion/-kompression.

Bildreduktion/-kompression

Hier wird unterschieden zwischen verlustbehafteter und die verlustfreier Kompression. Bei der verlustfreien Kompression werden nur Komprimierungsverfahren verwendet (wie zum Beispiel beim Zippen), die Bildinformation wird aber nicht reduziert.

Bei der verlustbehafteten Kompression (beispielsweise JPEG) werden zusätzlich Bildinformationen reduziert. Bis zu einem gewissen Grad sieht man das nicht. Hier gilt es mit unterschiedlichem Komprimierungsgrad zu jedem Bild zu experimentieren, denn je nach Bildart sieht man die Komprimierungsartefakte früher oder später. Hier müsst ihr also abwägen und ein wenig austesten. Es gilt einen Kompromiss zu finden zwischen: „So gute Qualität wie nötig, so starke Kompression wie möglich.“

[Tweet „#Bildbearbeitung: So gute Qualität wie nötig, so starke Kompression wie möglich.“]

Welches Dateiformat ist besser, jpg oder png?

Das kann man verallgemeinernd nicht sagen. PNG wird verwendet für Bilder mit Transparenz und Bilder mit vielen Textelementen oder auch Comics/Illustrationen. Also Bilder mit vielen harten Kanten.

JPG hingegen eignet sich für Fotografien mit weichen Kanten wie Fotos ohne (oder mit wenig) Textelemente(n). Transparenz kann mit jpg nicht dargestellt werden.

Jetzt kommen wir endlich zum praktischen Teil und stellen euch ein paar Tools vor, mit denen ihr Bilder für eure Website und Blog optimieren könnt.

Toolempfehlungen

Gimp

Hier haben wir lange überlegt. Ein Bildbearbeitungsprogramm das wir euch hier vorstellen, ist Gimp. Hier könnt ihr Gimp herunterladen: www.gimp.org/downloads/.

Wir haben Gimp ausgewählt, da es einerseits kostenlos ist und andererseits trotzdem sehr umfangreich – wer also weiter ins Thema Bildbearbeitung einsteigen will und kein Geld für Profi-Programme ausgeben will, ist hier gut aufgehoben. Allerdings erfordert Gimp etwas Einarbeitung – die Nutzerfreundlichkeit und Logik der einzelnen Workflows könnte meines Erachtens (nett formuliert) besser gelöst sein. Es gibt jedoch sehr viel Tutorials zum Beispiel auf YouTube. Und hier ein kleines von uns. Da Philipp, unser Informatiker und Fotograf leider keine Zeit hatte, musste ich das übernehmen ;-)

In dem Video zeige ich euch, wie ihr mit Gimp Bilder verkleinern und komprimieren könnt. Ebenso lernt ihr, wie ihr ganz einfach ein png in jpg umwandelt.

Kurz in Worten:

Bild verkleinern: Bild – Bild skalieren – gewünschte Größe eintragen – Datei – exportieren (und ggf. komprimieren).

Bild umwandeln: png-Bild auf Datei – exportieren – .png zu .jpg ändern – exportieren (und ggf. komprimieren).

Ist euch Gimp zu mächtig und ihr braucht ein Tool rein zum Komprimieren, könnten die folgenden Onlinetools hilfreich für euch sein.

Tinypng und Tinyjpg

Tinypng bzw. Tinypjp komprimiert eure Bilder schnell und ist kinderleicht zu bedienen. Ihr zieht einfach mit gedrückter Maustaste (per Drag and Drop) euer Bild in das Eingabefeld. Kurz darauf könnt ihr es komprimiert wieder herunterladen – das Tool wählt automatisch einen Komprimierungsgrad aus.

Optimizilla

Wer den Grad der Komprimierung selbst beeinflussen will, dem sei Optimizilla ans Herz gelegt. Optimizilla komprimiert eure Bilder ebenso online. Gleiches Spiel wie oben, ihr zieht das Bild (oder mehrere gleichzeitig) in das Eingabefeld oder ladet es hoch. Danach könnt ihr entweder die automatisch erstellte komprimierte Variante eures Bildes herunterladen. Oder eben selbst austesten und entscheiden, wie stark ihr eure Bilder komprimieren möchtet. Das tolle daran – ihr seht direkt eine Vorschau des Bildes und könnt dann nochmal ändern, wenn ihr nicht zufrieden seid.

Zusammenfassung

Bilder müssen fürs Web bearbeitet werden durch Anpassen der Größe und Komprimieren/Reduzieren. Ansonsten habt ihr lange Ladezeiten, die sich negativ auf Aspekte der Suchmaschinenoptimierung und vor allem eure Besucher auswirken.

Ein empfehlenswertes kostenloses und umfangreiches Programm ist Gimp, bei den Online-Tools stehen unter anderem tinypng bzw. tinyjpg oder Optimizilla zur Auswahl.

Also – lasst eure Website durch Bilder wirken :-)

Wenn ihr noch mehr Toolempfehlungen anschauen wollt, geht auf den Artikel von Zielbar (s.o.) – in den Kommentaren sind viele tolle teilnehmende Blogs verlinkt.

War der Artikel hilfreich? Erzählt uns von euren Erfahrungen. Mit welchen Tools arbeitet ihr?