Oops, leider verwenden Sie einen wirklich alten Browser! Für uns ist das in Ordnung, aber als zukunftsorientierte Agentur setzen wir Technologien ein, die Ihr Browser nicht unterstützt. Diese Website wird also nicht dargestellt, wie sie aussehen sollte. Bitte tun Sie sich und dem Internet einen Gefallen und laden Sie eine aktuelle Version von Chrome, Firefox oder Safari herunter. Sie werden das Web mit ganz anderen Augen sehen und viel sicherer surfen.

Bilder für die Website optimieren – mit Affinity Photo

Bilder für die Website optimieren mit Affinity Photo (Mann mit weißem Hemd hält sitzend eine Spiegelreflexkamera in den Händen)

Bevor Bilder auf der eigenen Website verwendet werden, sollte man diese unbedingt optimieren. Denn nicht nur für die Ladezeit der Website und die Suchmaschinenoptimierung ist das wichtig, sondern auch die Qualität der Bilder kann davon profitieren. Eine grundlegende Bildbearbeitung ist dabei nicht einmal schwierig und auch Photoshop benötigen Sie nicht. Erfahren Sie, wie Sie mit Affinity Photo in wenigen Minuten und mit nur ein paar Handgriffen mehr aus Ihren Bildern herausholen.

Ist es wirklich notwendig, Bilder zu optimieren?

Ob man eigene Bilder verwendet oder auf Stockarchive zurückgreift, nur sehr selten sind sie bereits in einem Zustand, den man guten Gewissens online verwenden kann. Vor allem zwei Probleme tun sich regelmäßig auf:

  1. Bildmaße: Die meisten Bildern haben viel zu große Dimensionen, um online verwendet zu werden. Ob direkt von der Kamera oder von iStockPhoto, Bilder haben heute Maße von mehreren tausend Pixeln. Viel zu viel für die eigene Website.
  2. Dateigröße: Nicht nur die überdimensionierten Bildmaße, sondern auch eine mangelnde Komprimierung sorgen für eine viel zu große Dateigröße, die die Ladezeit der Website förmlich in die Knie zwingen kann.

Aus diesen beiden Gründen müssen Bilder zwingend optimiert werden. Aber das Optimieren hat noch weitere Vorteile, wie Sie gleich sehen werden.

Die richtige Software zum Optimieren

Spätestens seitdem Adobe das hauseigene Photoshop einer Abonnementpflicht unterworfen hat, lohnt sich die Anschaffung längst nicht mehr für jeden Betreiber einer Website. Zumal es günstigere Alternativen gibt, die ohne Abonnementgebühren daherkommen. Im Folgenden zeige ich Ihnen anhand von Affinity Photo (erhältlich für Mac & Windows), wie Sie Ihre Bilder technisch und optisch in wenigen Schritten optimieren.

Diese Schritte lassen sich aber auch mit jedem anderen Bildbearbeitungsprogramm nachvollziehen. Mögliche Alternativen sind beispielsweise Canva, Stencil, PicMonkey oder Fotor.

Tipp: Wenn Sie die folgende Anleitung optimal nachvollziehen möchten, laden Sie sich am besten gleich das verwendete Originalbild herunter und üben Sie direkt am Beispiel.

Die Bildmaße anpassen

Selbst wenn Sie keinen der anderen Tipps befolgen, sollte jedes Bild unbedingt in seinen Maßen beschnitten werden, bevor Sie es online verwenden. Das zu unterlassen ist kein Kavaliersdelikt, sondern grob fahrlässig.

Welches Bildmaß benötige ich?

Wenn Ihnen Ihre Agentur keine Bildmaße mitgeteilt hat, die Sie bei der Pflege Ihrer Website beachten müssen, dann können Sie sich nur an Pauschalgrößen ausrichten. Hier finden Sie ein paar typische Größen (Breite x Höhe in Pixeln) und ihre Anwendungszwecke.

  • 1200 x 800: Diese Größe genügt in den meisten Fällen für Blogartikel – sowohl für das Beitragsbild als auch für die innerhalb des Beitrags verwendeten Bilder.
  • 1600 x 1050: Viele WordPress Themes (vor allem von StudioPress) verwenden diese Größe für Hintergrundbilder auf der Startseite. Die sind zwar nicht groß genug für die Vollbildanzeige auf einem 27-Zoll-Monitor, aber da es sich nur um Hintergrundbilder handelt, können diese recht gefahrlos die übrigen Zentimeter gestreckt werden. Hier sollte die Verbesserung der Geschwindigkeit Vorrang haben vor hochauflösenden Bildern.

So schneiden Sie Bilder in Affinity Photo zu

Öffnen Sie das Bild, das Sie beschneiden möchten, zunächst in Affinity Photo. Drücken Sie anschließend die Taste [C] oder wählen Sie das Tool Zuschneiden aus der Werkzeugleiste aus. Wählen Sie den Modus Selbst definiertes Verhältnis und tragen Sie anschließend in die Felder rechts daneben die gewünschten Bildmaße ein, z.B. 1200 x 800.

Bilder zuschneiden in Affinity Photo

Das Auswahlgitter auf Ihrem Bild wird nun möglicherweise die Größe verändert haben. Ziehen Sie es auf die gewünschte Größe und platzieren Sie es so, dass es den optimalen Ausschnitt zeigt. Das Auswahlgitter wird immer das festgelegte Verhältnis (hier: 1200 zu 800 bzw. 3:2) beibehalten.

Tipp: Platzieren Sie das Gitter wenn möglich so, dass wichtige Bildelemente auf oder nahe der Punkte sind, an denen sich die Gitterstreben kreuzen. So befinden sie sich sowohl vertikal als auch horizontal auf einem Drittel des Bildes, was üblicherweise als besonders harmonisch wahrgenommen wird. Es ist nicht nötig, sich sklavisch daran zu halten, denn diese Technik muss auch mit der Frage abgewogen werden, welche anderen Bildinformationen noch Platz finden müssen.

Klicken Sie auf den Button Anwenden, sobald Sie den richtigen Ausschnitt gewählt haben.

Bildmaße anpassen in Affinity Photo

Und nun wird meist ein Fehler begangen: Nach dem Zuschneiden ist das Bild in Wahrheit noch gar nicht zugeschnitten. Denn die Funktion Zuschneiden bringt das Bild nur in das richtige Seitenverhältnis, aber ändert nicht unbedingt etwas an der Größe in Pixeln. Theoretisch könnten Sie anstatt der 1200 x 800 auch 3 x 2 eintragen, das wäre dasselbe Verhältnis und das Bild wäre danach auch nicht nur 3 x 2 Pixel breit.

Daher ist es wichtig, die Bildmaße selbst anschließend noch anzupassen. Es ist jedoch notwendig, vorher das Bild zuzuschneiden, weil es zunächst das richtige Seitenverhältnis haben muss. Drücken Sie nun auf Dokument > Dokumentgröße ändern… und tragen Sie bei Größe das entsprechende Format ein, z.B. 1200 x 800 Pixel.

Hinweis: Ja, Sie könnten diesen letzten Schritt theoretisch bis zum Ende überspringen und erst beim Exportieren die gewünschte Größe angeben. Das hätte sogar den Vorteil, dass das Bild später beim Speichern im Rohformat die Originalgröße behalten würde. Möchten Sie aber weitere Elemente auf dem Bild anbringen, wie z.B. Text oder Logos und Symbole, ist es besser, das Bild gleich korrekt zuzuschneiden, um später böse Überraschungen zu vermeiden.

Bilder schöner machen

Schön ist relativ. Und nicht jeder Bildstil passt zur eigenen Website. Bilder, die direkt von der Kamera kommen, benötigen in der Regel am meisten vom sogenannten Post-Processing. Doch selbst Bildmaterial von professionellen Stockarchiven kann und sollte ein wenig nachbearbeitet werden, um den Bildern den letzten Schliff zu verleihen.

Lichtstimmung mit der Tonwertkorrektur

Ob Bilder nun zu dunkel, zu hell oder zu kontrastarm sind. Ein ganz wesentliches Merkmal interessanter Bild sind die Lichtverhältnisse. Man muss kein professioneller Fotograf sein, um diese nachträglich zumindest ein wenig zu verbessern. Mit der Tonwertkorrektur gelingt das mit wenigen Handgriffen.

Tonwertkorrektur in Affinity Photo

Die Tonwertkorrektur ist bei Affinity Photo ein wenig versteckt. Sie befindet sich auf der rechten Seite, dort wo auch die Ebenen sind, in einem eigenen Tab namens Anpassung. Falls Sie es nicht finden können, ist es möglicherweise deaktiviert. Schalten Sie das Tab einfach über Ansicht > Studio > Anpassung hinzu. Nun sollten Sie eine Liste von diversen Bildbearbeitungstools sehen, von Tonwertkorrektur über Gradationskurven bis OCIO.

Ein Klick auf Tonwertkorrektur schaltet die weiteren Optionen frei. Entscheiden Sie sich am besten nie für eine der Voreinstellungen, sondern vertrauen Sie Ihrem eigenen Gefühl. Dunkeln Sie Bildteile etwas ab, indem Sie die Schwarzstufe erhöhen und reduzieren Sie die Weißstufe, wenn Sie Bildbereiche heller und strahlender gestalten wollen. In der Regel hilft eine Kombination aus beidem schon sehr viel weiter – achten Sie nur darauf, dass bei zu viel Helligkeit nicht plötzlich die Bilddetails verloren gehen. Gamma lassen Sie in den meisten Fällen am besten dort, wo es ist.

Dramatik durch mehr Kontrast

Auch wenn Sie mit der Tonwertkorrektur schon automatisch etwas mehr Kontrast erzeugen, kann der Kontrastregler in Affinity Photo meist noch etwas mehr herausholen – und das vor allem gleichmäßiger. Vereinfacht gesagt, werden durch einen höheren Kontrast die dunklen Stellen etwas dunkler und die hellen etwas heller gemacht.

Kontrast in Affinity Photo

Den Kontrast können Sie bearbeiten, indem Sie ebenfalls im Abschnitt Anpassung auf die Option Helligkeit / Kontrast klicken.

Seien Sie allerdings vorsichtig: Zu viel Kontrast kann das Bild sehr künstlich wirken lassen. Je farbstärker Bilder ohnehin schon sind, desto schneller geraten sie durch mehr Kontrast in den Kitschbereich. Bei diesem Beispielbild habe ich den Kontrast bewusst etwas stärker gewählt, sodass ich Ihnen im nächsten Abschnitt einen Effekt besser demonstrieren kann.

Professionelle Farben dank Leuchtkraft und Sättigung

Gerade in einem professionellen, beruflichen Kontext können zu starke Farben oft fehl am Platze sein. Während sie bei einem Bekleidungshersteller notwendig sein können, mag eine renommierte Anwaltskanzlei eher gedecktere Farben bevorzugen. Um das zu erreichen, lässt sich die Leuchtkraft beziehungsweise Sättigung in Affinity Photo verringern.

Leuchtkraft und Sättigung in Affinity Photo

Ob Sie die Sättigung verringern (im Abschnitt Anpassung unter HSL-Anpassung) oder die Leuchtkraft minimieren (im Abschnitt Anpassung unter Leuchtkraft), spielt keine große Rolle. Beide Funktionen machen im Prinzip etwas Ähnliches, nur dass die Sättigung einen weiter reichenden Radius hat. Dieser ist aber oft eher kontraproduktiv.

Je mehr Sie die Sättigung verringern, desto grauer wird das Bild. Die meisten Bilder profitieren von einer Verringerung der Leuchtkraft bzw. Sättigung, weil sie dadurch professioneller wirken. Aber bei manchem Rohmaterial kann es auch sein, dass das Bild gewinnt, wenn die Sättigung zunimmt. Orientieren Sie sich am besten an dem Bildmaterial, das bereits auf Ihrer Website verwendet wird und experimentieren Sie mit verschiedenen Werten.

Im Beispiel habe ich die Leuchtkraft deutlich reduziert. In Verbindung mit dem erhöhten Kontrast aus dem vorigen Schritt ergibt sich ein leicht metallener Effekt, der das eigentlich quietschbunte Bild deutlich gemäßigter und etwas professioneller erscheinen lässt. Trotzdem hat es durch die Tonwertkorrektur am Anfang an Helligkeit, Dramatik und Aussagekraft gewonnen.

Schwarz-Weiß macht vieles einfacher

Ich bin ein großer Advokat von Schwarz-Weiß, denn viele glauben gar nicht, wie sehr es die tägliche Arbeit erleichtert. Zunächst einmal sind Schwarz-Weiß-Fotos ganz häufig ihren farbigen Vertretern in punkto Stil und Klasse überlegen. Man denkt beim Betrachten doch immer noch an die altfranzösische Schwarz-Weiß-Fotografie, die bis heute so viel Eleganz ausstrahlt.

Aber es gibt noch einen weiteren Vorteil: Schwarz-weiße Bilder passen viel einfacher zueinander. Während Sie bei farbigen Bildern oftmals viel Zeit investieren müssen, damit sie alle einer gewissen Farbstimmung folgen (ein typischer Schritt im sogenannten Color Grading), ist diese Anpassung bei Schwarz-Weiß-Fotos entweder gar nicht oder zumindest nur geringfügig nötig.

Schwarz-Weiß-Fotos in Affinity Photo

Auch diese Einstellungen können Sie im Tab Anpassung vornehmen, und zwar unter dem Punkt Schwarz-Weiß. Lassen Sie sich nicht beunruhigen, dass Sie hier mit zahlreichen Reglern konfrontiert werden. Sie stehen bloß für die einzelnen Farbkanäle. So haben Sie maximale Kontrolle über das Ergebnis – denn Schwarz-Weiß ist längst nicht Schwarz-Weiß. Sorgen Sie durch die Regler für einen hohen Kontrast, für ein kräftiges Schwarz und ein leuchtendes Weiß. Plötzlich hat jedes Foto Stil und Klasse.

Das Bild im richtigen Format speichern

Bei Bildbearbeitungssoftware führt selbst das Speichern von Dateien oft zu Missverständnissen, mit denen ich an dieser Stelle gerne aufräumen möchte. Denn es gibt in der Regel mindestens zwei verschiedene Wege, Bilder zu speichern.

1. Das Rohmaterial für später speichern

Der eine ist Datei > Speichern unter… – diese Funktion speichert die Affinity-Photo-Datei mitsamt aller Änderungen und Ebenen, die Sie angelegt haben. Diese Speicherung sollten Sie auf jeden Fall vornehmen, falls Sie später noch etwas am Rohmaterial verändern müssen. Diese Datei ist jedoch nur für Ihr persönliches Archiv gedacht und sollte niemals hochgeladen werden. Sie erkennen diese Dateien an der Endung .afphoto.

2. Das Bild für das Web speichern

Um das Bild jedoch so zu speichern, dass Sie es auf Ihrer Website verwenden oder an Kollegen senden können, ist ein anderes Bildformat nötig. Online wählt man in der Regel zwischen den folgenden zwei Formaten (der Einfachheit halber lasse ich .gif und .svg an dieser Stelle weg):

  • JPG/JPEG: Dieses Format eignet sich vor allem für Fotografien.
  • PNG: Dieses Format eignet sich für Grafiken (insbesondere Formen und Schrift) sowie für alle Bilder, die Transparenzen haben. Das meint nicht, dass auf dem Bild eine transparente Vase zu sehen ist, sondern dass später bei der Nachbearbeitung absichtlich Ebenentransparenzen hinzugefügt wurden, die erhalten bleiben sollen.

Um das Bild in einem solchen Format abzuspeichern, wählen Sie allerdings Datei > Exportieren. Wählen Sie dort die Vorgabe JPEG (Höchste Qualität) bzw. PNG-24 aus. Das erzeugt eine verhältnismäßig große Datei, die verringern wir aber erst in einem der nächsten Schritte. Das Ausgangsmaterial sollte dafür so hochwertig wie möglich sein.

Den richtigen Dateinamen wählen

Wenn Sie Potenzial bei der Suchmaschinenoptimierung verschenken möchten, dann wählen Sie einen Dateinamen wie DSC_4938.jpg oder stock_f398f3f83b.png. Google ist in der Lage, den Dateinamen zu lesen und das kann Ihnen bei der SEO helfen. Hierfür ist es aber erforderlich, dass sämtliche Begriffe mit einem Bindestrich (nicht einem Unterstrich!) voneinander getrennt sind. Kleinschreibung und die Vermeidung von Sonderzeichen ist empfehlenswert, um später technische Probleme zu vermeiden.

Bilder exportieren in Affinity Photo

Aber welche Begriffe sollte man verwenden? Am besten solche, auf die auch Ihr Beitrag optimiert werden soll. Wählen Sie allerdings nicht, was auf dem Bild nicht zu sehen ist. Manchmal muss man etwas kreativ werden, um Keywords zu verwenden, die nicht nur den Artikelinhalt, sondern auch den Inhalt des Bildes widerspiegeln.

Wenn Sie einen Beitrag über Bußgelder im Straßenverkehr schreiben und diesen auf diese Keywords hin optimieren möchten, dann nennen Sie das Bild bussgelder-strassenverkehr.jpg (beachten Sie, dass keine Sonderzeichen wie "ß" verwendet und Füllwörter wie "im" weggelassen wurden). Sofern wenigstens Straßenverkehr oder ein Auto auf dem Bild zu sehen ist, geht die Beschreibung in jeder Hinsicht in Ordnung.

Wenn Sie mehrere Bilder in dem Beitrag verwenden, dann nennen Sie nicht alle gleich oder zu ähnlich. Wie bei der Keyword-Optimierung von Texten gilt es, neben Synonymen auch verwandte Begriffe zu verwenden, die häufig in ähnlichen Kontexten auftauchen.

Die Dateigröße reduzieren und Ladezeit sparen

Weiter oben schrieb ich, dass Sie bitte wenigstens die Bildmaße anpassen, wenn Sie schon nur eine Sache an Ihrem Bild optimieren möchten. Ich rate Ihnen aber dringend, noch wenigstens eine weitere Optimierung vorzunehmen, nämlich die Reduzierung der Dateigröße. Auch wenn verringerte Bildmaße sich bereits erheblich darauf auswirken, eine vernünftige Komprimierung kann dieser Schritt allein nicht ersetzen.

JPEGmini für Mac

Um JPG/JPEG-Bilder zu komprimieren, eignet sich die Software JPEGmini hervorragend. Ziehen Sie das Bild einfach in das Fenster hinein und JPEGmini komprimiert es automatisch. Sodass der Betrachter in der Regel kaum einen Unterschied erkennen kann.

TinyPNG

Für PNG-Bilder hingegen verwenden Sie die Website TinyPNG. Diese kann auch mit etwaigen Transparenzen umgehen.

Generell gilt: Wenn Sie das richtige Dateiformat für Ihr Bild gewählt haben, lässt sich auch bei der Komprimierung am meisten herausholen.

Fazit

Die oben genannten Tipps sind für die professionelle Bildbearbeitung nicht ausreichend, hier ist andere Software und ein sehr viel umfassenderer Workflow nötig. Für die Bilder eines Blogbeitrags oder einer Unterseite wäre das in den meisten Fällen jedoch übertrieben.

Hier genügt es vollkommen, so wesentliche Schritte wie die Reduzierung der Bildmaße auf das Nötigste sowie die Komprimierung der Dateigröße vorzunehmen. Wer dann wenigstens noch ein paar Minuten aufwendet, um das Bild optisch ein wenig aufzupolieren, tut seiner Website und damit seinen Besuchern etwas Gutes. Und vor allem sich selbst, denn nichts wirkt unprofessioneller als lieblos zusammengewürfelte Bilder. Fehlende Ästhetik kann Ihr Unternehmen stärker beeinflussen, als Sie glauben.

Hier sehen Sie übrigens den Unterschied in der Vorher-Nachher-Betrachtung:

Vor der Bildbearbeitung in Affinity Photo Nach der Bildbearbeitung in Affinity Photo Nach der Bildbearbeitung in Affinity Photo (schwarz-weiß)

Fotos: Unsplash.com / João Silas & Clem Onojeghuo

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.