Fotos sind wichtig! Sie werten Ihre Website auf, ziehen die Blicke auf sich und können bereits eine Botschaft übermitteln, bevor sich die Besuchenden Ihrer Website vertieft mit Ihren Inhalten auseinandersetzen. Doch als ob die Auswahl eines geeigneten Sujets für Ihre Startseite oder Ihren Beitrag im Firmenblog nicht bereits anspruchsvoll genug wäre, ist es auch von entscheidender Bedeutung, das Foto pixelgenau für ihre Website zu optimieren. Ein Foto in einem falschen Format passt womöglich nicht mehr ins Design Ihrer Website und wird im schlimmsten Fall von Google mit einer schlechteren Bewertung bestraft, weil die Datei zu gross ist.

In diesem Beitrag zeigen wir ihnen:

  1. Wie Sie die Grösse eines Fotos auf Ihrer Website herausfinden.
  2. Wie Sie ein Foto bearbeiten und zuschneiden.
  3. Wie Sie ein Foto auf die richtige Grösse trimmen.
  4. Wie Sie die Dateigrösse optimieren.

Dazu brauchen Sie einzig und allein Ihren Webbrowser, sämtliche Tools stehen kostenlos zur Verfügung.

Schritt 1: Die Grösse eines Fotos auf Ihrer Website herausfinden

In unserem Beispiel möchten wir ein Headerfoto ersetzen. Dafür müssen wir als erstes herausfinden, in welcher Grösse das Foto in die Website eingebaut wurde. Dazu gibt es zwei einfache Wege:

  1. Nach einem Rechtsklick auf das auszutauschende Foto wählen Sie im Kontextmenü «Bild in neuem Tab öffnen». In unserem Beispiel öffnet der Chrome-Browser das Foto in einem neuen Tab und im Reiter ist bereits ersichtlich, wie gross das Foto in Pixeln ist.
  2. Wiederum über das Kontextmenü laden Sie sich das Foto auf Ihren PC herunter. Mit der Datei können Sie nun via Rechtsklick -> «Eigenschaften» -> «Details» die Grösse herausfinden oder sich mit einem Rechtsklick im Ordner die Abmessungen anzeigen lassen.

Bildgrösse herausfinden

Nach einem Rechtsklick auf das auszutauschende Foto können Sie sich dieses in einem neuen Tab anzeigen lassen (in Google Chrome).

 

bildgroesse herausfinden

Im Tab wird der Dateiname und die Bildgrösse angezeigt.

 

bildgroesse herausfinden

Unter Eigenschaften -> Details werden Ihnen im heruntergeladenen Foto die Abmessungen angezeigt.

 

bildgroesse herausfinden

Die Abmessungen lassen sich auch in den Ansichtsoptionen einblenden. Nach einem Rechtsklick auf die Menüleiste aktivieren Sie dort die Abmessungen. Sollten die Abmessungen nicht sichtbar sein, können sie unter «Weitere…» aktiviert werden.

 

So weit, so einfach. Nun geht es darum, Ihr neues Foto zu bearbeiten, auf die gewünschte Grösse zu verkleinern und für die Verwendung auf Ihrer Website die Dateigrösse zu optimieren.

Schritt 2: Das Foto bearbeiten mit der Online-Version von Photoshop Express

Im Profibereich ist Adobe mit Photoshop und Lightroom das Mass aller Dinge. Der Riese bietet unter https://photoshop.adobe.com/ aber auch ein Online-Bildbearbeitungstool an, das einige praktische Funktionen bietet und – Adobe-untypisch – auch kostenlos nutzbar ist. Sie benötigen einzig einen kostenlosen Adobe-Account, um unbegrenzt ihre bearbeiteten Fotos herunterladen zu können.

Die Benutzung ist denkbar einfach. Via Drag & Drop ziehen Sie von ihrem PC das Foto auf die Oberfläche und können es dann sogleich bearbeiten. Links in der Menüleiste stehen verschiedene Funktionen zur Verfügung. Wir beschränken uns in unserem Beispiel darauf, das Bild etwas aufzuhellen, einen leicht wärmeren Farbton zu geben und die Sättigung etwas zu reduzieren. Dazu wählen wir «Bild anpassen» und wechseln dann rechts oben von «Vorgaben» zu «Details».

Mit den sechs Reglern unter «Licht» lassen sich Helligkeit und Kontrast des gesamten Fotos oder von einzelnen Tonwerten anpassen. Bei «Farbe» können Sie die Farbtemperatur, sowie die Dynamik und Sättigung des Fotos einstellen und unter «Effekte» die Klarheit anpassen (auch bekannt als «Drama-Slider», also nicht übertreiben) und dem Foto eine Vignette geben.

photoshop fotos bearbeiten

Mit der Online-Version von Photoshop Express lassen sich per Schieberegler Bildanpassungen vornehmen.

 

Testen Sie verschiedene Einstellungen, bis das Foto Ihren Vorstellungen entspricht. Besonders smart gelöst: Wenn Sie mit gedrückter Maustaste auf das Foto klicken, wird Ihnen als Vergleich die unbearbeitete Version des Fotos angezeigt.

Klicken Sie auf «Bild anpassen» um die Bearbeitungen zu übernehmen.

Als nächstes möchten wir das Bild zuschneiden und wählen dafür «Zuschneiden und Ausrichten». Hier zeigt sich leider eine Schwäche des Online-Tools. Zwar kann das Foto gedreht, gespiegelt, zugeschnitten und auf ein vorgegebenes Seitenverhältnis angepasst werden – es fehlt aber die Möglichkeit, das Foto auf ein selbst eingestelltes Seitenverhältnis anzupassen. Wie in unserem Beispiel ein Headerfoto im Format 2:1 zuzuschneiden, ist mit diesem Tool leider nicht möglich, dazu benötigen wir in Schritt 3 ein weiteres Tool.

Benötigen Sie das Foto in einem der vorgegebenen, klassischen Seitenverhältnis wie etwa 1:1; 3:2 oder 4:3 oder für Social Media, ist dieses Tool aber perfekt und Sie können Schritt 3 überspringen.

Wir begnügen uns vorerst damit, das Foto leicht zu drehen und im ursprünglichen Seitenverhältnis den Ausschnitt etwas zu verkleinern. Mit «Bild zuschneiden» bestätigen wir die Anpassungen.

photoshop bild zuschneiden

Wir drehen das Foto um ein halbes Grad und passen den Ausschnitt leicht an.

 

Für den letzten Schritt wechseln wir in der Menüleiste links auf «Grösse ändern» und geben nun in den Eingabefeldern oben rechts die gewünschte Breite in Pixeln ein. In unserem Beispiel verkleinern wir das Foto auf eine Breite von 1600 Pixel – diese Breite soll später auch unser Headerfoto haben – und bestätigen mit einem Klick auf «Grösse ändern».

photoshop bildgroesse

Unter «Grösse ändern» verkleinern wir das Foto auf eine Breite von 1600 Pixel. Die Höhe ergibt sich automatisch.

 

Benötigen Sie das bearbeitete Foto in der Originalauflösung auch für andere Anwendungen, etwa in einer Powerpoint-Präsentation, können Sie diesen Schritt auch überspringen und das Foto erst in Schritt 3 auf die richtige Pixelgrösse verkleinern.

Damit sind wir mit den Bearbeitungen in Photoshop bereits fertig und laden das Foto wieder herunter. Dazu klicken wir in der Menüleiste auf «Herunterladen» und geben dem Foto im aufpoppenden Menü einen neuen Namen. Hier kommt ein für Google und ihre Website entscheidender Faktor zum ersten Mal ins Spiel: die Dateigrösse.

Wählen Sie auf jeden Fall JPG als ihr Dateiformat, es ist grundsätzlich kleiner als ein PNG und die Dateigrösse lässt sich weiter reduzieren, indem die Qualität heruntergeschraubt wird. Bei einer Qualität von 100% ist unser Beispielfoto 2,2 MB gross, was für den Einbau in eine Website deutlich zu viel ist. Sowohl die Ladezeit der Seite steigt und – noch schlimmer – Google bestraft grosse Datenmengen. Ihre Website wird also schlechter bewertet. Wir empfehlen eine Qualität von 70 bis 80%, was die Dateigrösse bereits deutlich reduziert.

Natürlich geht das Verkleinern der Dateigrösse nicht ohne Qualitätsverlust. Je nach Sujet oder Qualität entstehen JPG-Fragmente, die an Kanten oder Flächen im Bild sichtbar werden. Im Zweifelsfall laden Sie das Foto in unterschiedlichen Qualitätsstufen herunter und vergleichen die Ergebnisse in einem Browserfenster. Wählen Sie das für Sie passende Foto (im Zweifelsfall das stärker komprimierte) für die weitere Bearbeitung aus.

qualitaet jpg

Der Vergleich der JPG-Qualität von 100%, 80%, 60% und 40% (von links nach rechts). In der Bergspitze und im Himmel macht sich die Komprimierung bemerkbar.

 

Auch hier gilt: Benötigen Sie das Foto in maximaler Qualität für andere Anwendungen, können Sie dessen Qualität für die Website auch erst im nächsten Schritt verringern und es stattdessen in bestmöglicher Qualität aus dem Online-Photoshop herunterladen.

Schritt 3: Das Foto auf das richtige Format zuschneiden

Das Foto ist bearbeitet, bereits auf die korrekte Breite in Pixel verkleinert und die Dateigrösse optimiert. Als nächsten Schritt müssen Sie das Foto auf eine Höhe von 800 Pixel zuschneiden, womit es perfekt in unseren Header passt.

Dazu gibt es verschiedene Tools. Wir verwenden iLoveIMG (https://www.iloveimg.com/de), das sehr einfach zu bedienen ist. Auf dem Startbildschirm wählen Sie «Bild zuschneiden» und laden das bearbeitete Foto hoch. Oben rechts geben Sie in den Eingabefeldern die gewünschte Grösse in Pixel ein und bestimmen den Bildausschnitt durch Ziehen des Rahmens auf dem Foto. Sind Sie zufrieden, klicken Sie auf «Bild zuschneiden» und nach einer kurzen Werbepause wird das Foto bereits wieder heruntergeladen.

iloveimg startseite

Wählen Sie auf der Startseite von IloveIMG «Bild zuschneiden».

 

iloveimg zuschneiden

Nachdem wir in Photoshop bereits die Bildbreite in Pixel bestimmt haben, definieren wir hier die richtige Höhe des Fotos. Der Ausschnitt lässt sich durch das Verschieben des Rahmens auf dem Foto bestimmen.

 

Nachdem Sie das Foto bearbeitet, optimiert und auf die richtige Grösse zugeschnitten haben, ist es nur noch 170 KB gross, was für ein Headerfoto in dieser Grösse absolut passabel ist. Die Grösse eines JPGs ist immer auch abhängig vom Bildsujet. Fotos mit sehr vielen Strukturen (wie etwa ein bunter Herbstwald) sind immer schwerer als Fotos mit vielen ruhigen Bildstellen (z.B. ein Foto mit viel blauem Himmel). Perfektionisten möchten die Grösse vielleicht weiter verringern. Auch dazu gibt es Online-Tools.

Anmerkung: Haben Sie das Foto aus dem Online-Photoshop in Originalgrösse und maximaler Qualität heruntergeladen, können Sie es in iLoveIMG auf die korrekte Grösse für Ihre Website verkleinern und auch die Qualität des JPGs webgerecht reduzieren.

Schritt 4: Die Dateimenge weiter verkleinern

Um die Dateigrösse noch weiter zu verkleinern, verwenden wir Tinypng (https://tinypng.com/) – aber natürlich gibt es auch andere Tools, die teilweise noch detailliertere Optimierungen erlauben (z.B. https://squoosh.app/). Für unser Vorhaben ist dieses einfache Tool aber perfekt.

Nach dem Ziehen des Fotos auf das Browserfenster startet automatisch die Optimierung. Nach wenigen Sekunden sehen Sie, wieviel Kilobyte Sie dank der Optimierung sparen und können das Foto wieder herunterladen. Besonders praktisch: Sie können auch mehrere Fotos auf einmal in das Browserfenster ziehen und alle zusammen wieder herunterladen. Um wieviel Prozent oder Kilobyte das Foto optimiert werden kann, ist abhängig vom Sujet und wie stark das Foto bereits optimiert wurde. Da wir beim Herunterladen aus dem Online-Photoshop die Qualität bereits auf 70% reduziert haben, ist unsere Einsparung nicht mehr so gross. Natürlich geht das Verkleinern der Dateimenge auch hier nicht ohne einen gewissen Qualitätsverlust. Tinypng bietet aber eine sehr foto-freundliche Optimierung, einzig bei Fotos mit Text auf einem einfarbigen Hintergrund ist Vorsicht geboten (z.B. bei Screenshots).

tinypng bilder optimieren

Mit Tinypng holen wir die letzten Kilobytes aus dem Foto heraus.

 

Gratulation, Sie haben es geschafft! Sie haben ihr Foto bearbeitet, zugeschnitten und für Ihre Website optimiert. Daran hat Google Freude und natürlich auch die Besucherinnen und Besucher Ihrer Website.

Weitere Tools zur Bildbearbeitung

Der hier vorgestellte Workflow ist nur eine Möglichkeit, um Ihre Fotos zu bearbeiten und auf die richtige Grösse zuzuschneiden. Andere Anwendungen bieten mindestens einen ähnlichen Umfang und stehen ebenfalls kostenlos in Ihrem Webbrowser zur Verfügung.

Photopea (https://www.photopea.com/)

Wären da bloss nicht diese farbigen, oft auch blinkenden Werbeeinblendungen… Photopea erinnert mit der Werkzeugleiste und den Paletten an Photoshop und bietet einen riesigen Funktionsumfang, der weit über die Möglichkeiten der Online-Version von Adobe hinausgeht. Für unser Vorhaben einer einfach Bildbearbeitung bietet die Webanwendung eher etwas zu viele Möglichkeiten und es bedarf einer gewissen Einarbeitungszeit, falls Sie die Oberfläche und Werkzeuge nicht bereits von einer Adobe-Anwendung her kennen. Sollten Sie auf der Suche nach einer kostenlosen Webanwendung sein, die auch anspruchsvolle Bildbearbeitungen und Bildmanipulationen ermöglicht, ist Photopea auf jeden Fall einen Blick wert.

photopea bildbearbeitung

In Photopea sind auch anspruchsvolle Bildbearbeitungen möglich.

 

Pixlr (https://pixlr.com/de/e/)

Pixlr erinnert mit der Werkzeugleiste am linken Rand ebenfalls an Photoshop und bietet einen ähnlich grossen Funktionsumfang wie Photopea. Sie können ihr Foto bearbeiten, zuschneiden, als optimiertes JPG wieder herunterladen und vieles mehr. Auch hier lassen sich die Anbieter das Tool mit Werbeeinblendungen am unteren Browserrand bezahlen – durchaus verständlich… aber bunt, animiert und mit der Zeit nervig. Falls Sie auf der Suche nach einem umfangreichen Tool sind und die diversen Möglichkeiten auch ausreizen, sollte Sie aber auf jeden Fall auch bei Pixlr vorbeischauen – im Gegensatz zu Photopea kann die Oberfläche auf Deutsch umgestellt werden.

pixlr bildbearbeitung

Die Oberfläche von Pixlr erinnert an Photoshop.

 

iLoveIMG (https://www.iloveimg.com/de)

Das Tool eignet sich nicht nur wie in Schritt 3 demonstriert zum Zuschneiden der Fotos, es bietet auch weitere Möglichkeiten. So können Sie Fotos unter anderem optimieren, umwandeln (z.B. von PNG in JPG), drehen und mit Text oder einem Sticker aufpeppen.

iloveimg sticker

Mit iLoveIMG sind auch Spielereien möglich.

 

Fazit

Bereits mit kostenlosen Tools in Ihrem Webbrowser lassen sich Fotos bearbeiten und webgerecht aufbereiten. Für den Einbau in Ihre Website ist das ein wichtiger Faktor, da zu grosse Fotos einerseits von Google mit einer schlechteren Bewertung bestraft und womöglich Besuchende wegen der längeren Ladezeit vertrieben werden.

Haben Sie noch Fragen oder benötigen Sie Unterstützung? Dann stehen Ihnen die Bildprofis Daniel Brühlmann und Tom Hübscher von tnt-graphics gerne zur Verfügung.