Darüber dass sich Bildmaterial so gut wie nie unverändert im Original zur Veröffentlichung auf Internetseiten eignet, habe ich bereits unter dem Stichwort Bilder optimieren geschrieben. Dort kann man nachlesen, warum insbesondere Fotos unbedingt hinsichtlich ihrer Auflösung in Bildpunkte bearbeitet werden müssen, bevor man sie in eine Webseite einbindet. Also warum Bilder auf eine bestimmte Breite zugeschnitten oder verkleinert werden müssen. – Wie man das macht? Darum geht es in diesem Textbeitrag.
Abgesehen von technischen Notwendigkeiten kann es ja durchaus auch vorkommen, dass ein digitales Foto, das man gerne verwenden möchte, beim Aufnehmen ein bisschen zu dunkel oder zu hell geraten ist. Vielleicht hat die Aufnahme einen Farbstich? Solche Unschönheiten kann man mit einem Bildbearbeitungsprogramm zumindest in gewissen Grenzen korrigieren. Auch kann es vorkommen, dass Fotos Fehler des Bildsensors der Kamera enthalten, kleine weiße Flecken mitten im Bild. Oder womöglich möchte man den Pickel auf der Stirn der/des Liebsten lieber nicht auf einem Urlaubsbild haben, das man zum Beispiel in einem Fotoalbum der Familienwebsite veröffentlichen möchte? Retuschierarbeiten in kleinem Umfang sind auch für Amateure recht einfach durchführbar.
Allerdings: Wer solche Anpassungen an seinem Bildmaterial vornehmen möchte, wird zum Beispiel mit Windows-Bordmittel wie dem Standardprogramm Paint schnell an Grenzen stoßen.
Bildbearbeitungsprogramme
Für Profis und für ambitionierte Amateure gibt es eine breite Auswahl an Programmen, von denen ich hier nur drei aufführen möchte:
Photoshop vom Softwarehersteller Adobe ist sicher der Platzhirsch. Nicht umsonst hat das Tätigkeitswort „photoshoppen“ als Eintrag im Duden Platz gefunden. Ich verwende Photoshop aber aus zwei Gründen lieber nicht. Erstens enthält das Programm viele Funktionen, die ich niemals brauchen werde. Von denen ich teilweise gar nicht weiß, wofür sie dienen oder wie man sie steuert.
Und zweitens kostet Photoshop inzwischen im Abonnement pro Jahr fast 300 Euro.
GIMP ist die kostenfreie Alternative zu Photoshop. Leute, die sich beruflich mit Bildbearbeitung beschäftigen, loben GIMP als ebenbürtige Lösung zu Adobes Photoshop. Natürlich habe auch ich die freie Softwarelösung GIMP ausprobiert. Das Programm ist ganz sicher solchen Menschen zu empfehlen, die sich gerne und viel mit Bildbearbeitung beschäftigen. Für die hier angeführten Zwecke ist allerdings auch GIMP zu mächtig: Man braucht den Großteil der Funktionen nicht.
Paint.NET ist ein ebenfalls kostenfreies Grafikprogramm für Windows. (Während Photoshop und GIMP für verschiedene Betriebssystem verfügbar sind, ist Paint.NET auf Windossyteme beschränkt.) Was ich besonders schätze an Paint.NET: Es ist ein schlankes, sehr übersichtliches Programm mit einem Grundstock an Bearbeitungsmöglichkeiten, der für alles ausreicht, was wir für die Vorbereitung von Bildern für unsere Webseiten benötigen. Wer darüber hinaus mehr Funktion benötigt, kann zusätzlich Plugins installieren und damit die Möglichkeiten des Programms gezielt erweitern. (Ein Beispiel für so ein Plugin: Im Logo dieser Website ist ein Text zu sehen, der im Kreis um das WordPress-W herumläuft. Kreistext ist Bestandteil eines Plugins, das ich installiert habe.)
Es gilt also: Paint.NET wächst mit Deinen persönlichen Ansprüchen.
Paint.NET
Ja, ich gebe zu, Paint.NET ist mein Lieblingsbildbearbeitungsprogramm. Man kann damit Abbildungen in vielen weit verbreiteten Formaten öffnen, bearbeiten und – falls gewünscht – auch in ganz anderen Formaten abspeichern: JPG-Dateien, PNG-Dateien und neuerdings auch WEBP-Bilder.
Gute Zwischenfrage: Welche Bildformate solltest Du auf Deiner Website verwenden?¹
Hinweis am Rande: Sogar Fotos im Apple-Format HEIC kann man mit Paint.NET seit der Version 4.2 (2019) bearbeiten. Früher musste man dieses Format, das man zum Beispiel mit iPhones aufnehmen kann, vor dem Öffnen mit einem Konvertierer in JPG umwandeln.
Wie man Paint.NET installiert und wie man damit arbeitet, will ich hier nicht erklären. Dafür gibt es jede Menge sogenannter Tutorials, zum Beispiel bei Youtube. Eine dieser Kurzanleitungen möchte ich Euch empfehlen: Kostenloses Bildbearbeitungsprogramm für Einsteiger und Profis – Tutorial von Jukeman (Dauer: 15 Minuten).
Übrigens: Warum ich dieses Youtube-Video nicht einfach hier in den Beitrag zum bequemen Abspielen direkt auf dieser Seite einbinde, erkläre ich in einem separaten Beitrag.
Komprimierung von Bilddateien
Beim Abspeichern fertiger Abbildungen könnte man in Paint.NET festlegen, mit welcher Bildqualität das Speichern erfolgen soll. Das empfehle ich jedoch ausdrücklich nicht. Man weiß nämlich im Voraus nicht, wie gut das Ergebnis hinterher auf dem Bildschirm aussehen wird.
Deshalb rate ich dazu, das Werk in der höchsten verfügbaren Qualität (bei JPG 100 Prozent, bei PNG die höchste Bittiefe) abzulegen. Denn im Anschluss sollte man ohnehin noch ein professionelles Komprimierungs-Werkzeug über die Bilddatei laufen lassen. Damit reduziert man die Dateigröße erheblich, ohne jedoch Qualitätsverluste hinnehmen zu müssen. Wie diese Komprimierung funktioniert, erkläre ich in einem separaten Beitrag.
Von den Anbietern der Programme, die ich auf diesen Webseiten empfehle, erhalte ich keine Provisionen oder sonstige Vergünstigungen. Es handelt sich also nicht um Werbung. Vielmehr sind das eben genau die Werkzeuge, die ich selbst gerne verwende.
Zur gefahrlosen Verwendung von Bildern auf Deiner Website beachte unbedingt auch meinen Beitrag zu Urheberrecht und Recht am eigenen Bild.
Hinweis: Dieser Text über Bildbearbeitung gilt nicht nur speziell für WordPress-Webseiten, sondern grundsätzlich für alle Internetseiten. Egal ob sie mit irgendeinem Content Management System, einem Homepagebaukasten oder gar manuell per HTML- und CSS-Code ins Netz der Netze gebracht werden.
Fußnote:
¹ — Welches Bildformat soll ich auf meinen Webseiten verwenden?
Die meisten digitalen Fotokameras liefern standardmäßig Bilder im JPG-Format, das erstmals im Jahr 1992 vorgestellt wurde und das noch immer das mit Abstand häufigste Bildformat im Internet ist. Für Fotografien ist JPG noch immer das Bildformat der Wahl. Doch je stärker JPGs komprimiert werden, desto mehr Bildartefakte entstehen. Dabei handelt es sich um Bildfehler, die Du Dir eindrucksvoll auf einem Beispielbild bei der Kultubanause ansehen kannst. Dateinamen von Bildern in diesem Format enden auf .jpg oder .jpeg.
Das PNG-Format wurde 1995 eingeführt und hat gegenüber JPG den Vorteil, dass bei Komprimierung keine Bildfehler entstehen. Dafür sind PNG-Dateien bei gleichen Inhalten größer als JPGs. Ein wichtiger Vorteil der PNGs besteht in der Möglichkeit, Bildbereiche transparent zu machen. Die Transparenz bewirkt, dass an solchen Bildstellen der Hintergrund der Webseite angezeigt wird (siehe Abbildung). Damit lassen sich zum Beispiel Logos nahtlos vor verschiedenen Hintergründen platzieren. Dateinamen von Bildern in diesem Format enden auf .png.
Das älteste digitale Bildformat überhaupt ist das GIF-Format. Es wurde bereits 1987 spezifiziert. Auch bei diesem Format ist Bildtransparenz möglich. Der auffälligste Vorteil von GIFs ist die Möglichkeit, mehrere Standbilder hintereinanderzusetzen und so bewegte Bildchen (Animationen) herzustellen. Doch je länger solche Minifilmchen werden, desto größer wird die Bilddatei. Wegen ihrer starken Begrenzung der Farbpalette spielen GIFs heute kaum mehr eine Rolle auf seriösen Internetseiten. Dateinamen von Bildern in diesem Format enden auf .gif. (Öffnen und Bearbeitung von GIF-Dateien ist mit Paint.NET zwar möglich, allerdings ohne Animation. Wer animierte GIFs bearbeiten oder herstellen möchte, kann dazu einen Onlinedienst einsetzen, beispielsweise den lettischen Anbieter Ezgif aus Riga.)
Im Jahr 2010 nahm Google einen Anlauf, die Vorteile der verschiedenen Bildformat in einem neuen Format zu vereinen und dabei die Nachteile zu vermeiden. Bilder im WEBP-Format sind bei gleicher Qualität sogar noch kleiner als JPG- und erst recht als PNG-Dateien. Transparenz ist in WEBP-Bilder ebenso möglich wie Animation. Seit Ende der Zehnerjahre beherrschen so gut wie alle Internetbrowser die Darstellung von WEBP-Grafiken. WEBP könnte also künftig tatsächlich zu einem neuen offenen Standard werden, so wie Google dies im Sinne hatte. Dateinamen von Bildern in diesem Format enden auf .webp.
Derzeit verwende ich noch immer das JPG-Format für Fotografien und das PNG-Format für Logos und Abbildungen mit großen gleichfarbigen Flächen oder Transparenz. (Allerdings liebäugle ich immer mehr mit dem WEBP-Format und werde beim nächsten nicht-kommerziellen Website-Projekt, bei dem viel Bildmaterial zum Einsatz kommt, einen Versuch wagen.)
