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?
Hier klicken, um mehr zu erfahren
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?
Hallo Jutta, eine schöne Sammlung hast du da zusammen getragen.
Für die Bildoptimierung nutze ich mittlerweile nur noch jpeg-mini ( http://www.jpegmini.com ), es gibt das Tool in der kostenlosen Version ( bis 20 Bilder täglich kann man damit komprimieren), man kann aber auch upgraden, wenn man mehr als 20 Bilder bearbeiten muss.
Frank Stachowitz hatte jpegmini mal vorgestellt (http://stachowitz-medien.de/blog/jpegmini-hilft-beim-komprimieren-von-bildern) und seitdem nutze ich nichts anderes mehr.
LG Tina
Hallo Tina,
danke für deine Ergänzung. Wenn man kein anderes Bildbearbeitungsprogramm auf dem Rechner hat oder kein Online-Tool nutzen möchte, ist das sicher auch eine gute Möglichkeit.
LG Jutta
Hallo Jutta,
das ist eine tolle Zusammenstellung und ein sehr guter Überblick. Darauf werde ich gerne zurückgreifen.
Vielen Dank dafür!
Liebe Grüße,
Wolfgang
Hallo Wolfgang,
sehr gerne, freut uns, wenn der Artikel weiterhilft.
LG Jutta
Hallo Jutta,
vielen lieben Dank für diesen tollen Beitrag. Du hast mir Fragen beantwortet, die mir zurzeit ein wenig auf der Seele brannten, Stichwort „Ladezeit“. :)
Gimp habe ich privat nutzen wollen, aber kam absolut und überhaupt gar nicht damit klar. Aus dem Grund habe ich Photoshop Elements für meinen privaten Blog gekauft. Kann ich sehr empfehlen! Tinyjpg hatte ich auch privat im Gebrauch. Hat mir auch recht gut gefallen.
LG
Anna Franzen
Hallo Anna,
vielen Dank für deine Ergänzung, ist sicher auch für einige nützlich zu lesen. Wir haben uns hier für Gimp als Beispiel entschieden, da es kostenlos ist und es so jeder ausprobieren kann. Ich bin aber der Meinung, dass man sich mit einem Programm, das man öfter nutzt, wohl fühlen sollte. Da rentiert es sich auf jeden Fall, etwas zu investieren.
LG Jutta
Hallo Jutta,
da das Thema für mich gerade aktuell ist, habe ich mich damit eingehend befasst. Wenn es um reine Komprimierung fürs Web geht, erledigt das die Freeware Riot ganz gut.
MfG Thomas