Bilder kleiner machen: 3 Wege für die JPG Web Optimierung

Am in veröffentlicht. Aktualisiert am 11.01.2022

Du beherrschst die Grundlagen der Fotografie, aber wirklich sehenswerte Porträts kommen am Ende nicht heraus? Im kostenlosen 7 Tage E-mail-Kurs prägen wir deinen fotografischen Blick für stimmige Porträts aus. Du erhältst täglich 2-3 Kniffe durch einfache Vorher-Nachher Fotos. Trage dich jetzt in den Newsletter ein und du erhältst den Kurs zusammen mit weiteren nützlichen Tricks und Angeboten zur Portraitfotografie. Du kannst dich jederzeit wieder abmelden.

Invalid email address

Deine Fotos erscheinen nach dem Web-Upload unscharf? Oder weisen eine lange Ladezeit auf? Dann hast du entweder versehentlich das Foto in voller Auflösung hochgeladen oder das Bild vorher nicht ordentlich komprimiert. In diesem Beitrag entdeckst du vier Wege, wie du mit Lightroom, Photoshop oder JPEGmini die Bilder richtig für den Upload ins Internet komprimierst.

Zuerst ein paar Gedanken, die du dir in Punkto Dateigrößen und Auflösung immer überlegen solltest: Wo will ich meine Bilder zeigen und welche Qualität / Auflösung benötige ich dafür?

Hier gibt es folgende zwei Szenarien:

  • Für einen hochqualitativen Ausdruck mit 300ppi wird meistens die maximale Bildqualität / Auflösung benötigt
  • Für Bildschirme (also das Internet) reichen meistens schon 76ppi – also eine deutlich geringere Auflösung

Mittlerweile gibt es allerdings auch das “Problem”, dass selbst Bildschirme immer hochauflösender werden. Daher stimmt die 76ppi Regel meist für 4K Laptop Bildschirme oder Retina Displays oft nicht mehr. Hier gilt es dann immer abzuwägen.

In diesem Beitrag zeige ich dir, wie du die Bildgröße beschränken kannst und die üblichen Probleme im Web vermeidest: Der Upload Dialog lädt ewig, das Bild sieht nachher einfach nicht mehr scharf aus oder die eigene Website lädt einfach nicht mehr so schnell. Wie kann man die Bilder nun als qualitativ hochwertig, aber mit geringer Dateigröße speichern ?

In den meisten Programmen kannst du die Kantenlänge der langen Kante in Pixeln und die Bildqualität in Prozent einstellen. Hierfür solltest du je nach Endmedium / Plattform entscheiden:

Website Full ScreenWebsite ContentSocial MediaFotocommunityEmpf. Dateigröße
2400px, mind. 80%max. 1200kb
1920px, 70-80%max. 900kb
1440px, 70%max. 500kb
960px, 70%max. 350kb

Und so funktioniert das im Detail in Photoshop, Lightroom und JPEGmini.

1. Bilder kleiner machen mit Photoshop

In Photoshop wählen wir, nachdem wir das Bild fertig bearbeitet haben Datei > Exportieren > Für Web speichern… aus. Am besten prägt man sich die Tastenkombination zum Aufrufen des Dialogs ein.

WINMAC
Für web exportierenStrg + Shift + Alt + SCMD+ Shift + Alt + S
Bilder kleiner machen

Anschließend können wir unsere gewünschte Kantenlänge festlegen. Schreib den gewünschten Wert (siehe Tabelle oben) bei der langen Kante rein – also bei Querformat die Breite, bei Hochformat die Höhe. Achte darauf, dass das Kettensymbol rechts daneben aktiv ist, wodurch das Seitenverhältnis beibehalten wird.

Verlässt man nun das Feld, sieht man bereits, dass die neue Dateigröße errechnet wird. Die Dateigröße wird immer unten links unter dem Bild angezeigt. Diese solltet ihr immer im Auge behalten. Durch den Qualitätsregler oben rechts kann man die Qualität dann noch anpassen, dass man im gewünschten Bereich der Dateigröße bleibt. Orientiere dich dabei an meinen empfohlenen Dateigrößen aus der Tabelle oben.

Die Option Bikubisch schärfer sollte auch unten rechts bei Qualität ausgewählt sein, um eine etwas knackigere Wiedergabe im Web zu erhalten.

Bilder für Web optimieren

2. Lightroom Bildgrösse ändern, Dateigrösse beschränken und für Web exportieren

Für den Export von mehreren Bildern hintereinander ist es oft mühseelig, in Photoshop jedes mal den Vorgang auszuführen. Abhilfe kann Lightroom schaffen. Hier kann per Stapelverarbeitung in einem Zug viele Bilder kleiner machen, egal ob es sich um ein, zehn oder hundertfünfzig Fotos handelt.

In Lightroom klicken wir mit der rechten Maustaste auf das Bild (oder die ausgewählten Bilder), das wir exportieren wollen und gehen auf Exportieren > Exportieren… .

Lightroom für Web exportieren
Export Dialog in Lightroom

In diesem Dialog kann man nun zunächst unter “Speicherort für Export” auswählen, wohin man die ausgewählten Bilder speichern will. Im Bereich “Bildgröße” lässt sich nach Anklicken des Hakens auswählen, dass die lange Kante z.B. 1920px Betragen soll. 

Unter “Dateieinstellungen” lässt sich nun die Qualität in Prozent festlegen. Orientiere dich auch hier wieder an den Einstellungen aus meiner Tabelle – meistens liegt man bei 70-80% richtig.

Achtung: Du kannst hier statt dem prozentualen Wert auch einstellen, dass die Bilder eine gewisse Dateigröße nicht überschreiten sollen. Dafür genügt es, das Häkchen bei “Dateigröße beschränken auf:” zu setzen. Allerdings empfehle ich diesen Vorgang generell nicht. Bleib lieber bei der prozentualen Angabe, da einfach jedes Bild unterschiedlich ist. Eine generelle Begrenzung nimmt dem Bild oft die “Entfaltungsmöglichkeit” und es ist völlig normal, dass Bilder völlig unterschiedliche Dateigrößen haben.

Weiter unten im Dialogfeld kann man das Bild schließlich auch noch für die Wiedergabe auf dem Bildschirm schärfen. Die sollte man jedoch von Fall zu Fall testen, ob einem das Ergebnis zusagt. Für’s Bilder kleiner machen fehlt nun nur noch ein Klick auf exportieren und man findet das Foto komprimiert im entsprechend ausgewählten Ordner.

Bilder für Web optimieren

Tipp: Export-Vorgaben erstellen

Links im Bedienfeld kannst du die aktuellen Einstellungen auch als Export-Vorgabe “Hinzufügen”. Am Beispiel eines 1920px Exports sollten folgende Einstellungen enthalten sein:

  • Exportieren in: Ordner später wählen
  • Bildformat: JPEG
  • Qualität: 70%
  • Farbraum: sRGB
  • In Bildschirm einpassen: Lange Kante, 1920px
  • Schärfen für: Bildschirm, Stärke: Niedrig

Anschließend musst du nie wieder in dieses Export-Menü. Stattdessen reicht ab jetzt ein einfacher Rechtsklick auf das zu exportierende Bild. Im “Exportieren” Kontextmenü findest du nun direkt dein Preset.

3. Schnelle Komprimierung mit dem Hilfsprogramm JPEGmini

Wenn du regelmäßig Massen an Bildern ins Internet hochladen möchtest, wirst du vielleicht schon einmal von JPEGmini gehört haben. Dieses Tool ist vor allem empfehlenswert, wenn man im Nachhinein bereits exportierte Fotos noch für den Web-Upload verkleinern möchte. So vermeidest du, dass du jedes Bild noch einmal in Photoshop oder Lightroom öffnen musst.

Stattdessen ist JPEGmini einfach nur ein Fenster, in das man Bilder ziehen kann. Anschließend werden die reingezogenen Bilder mit den gewünschten Maßen neu abgespeichert:

Ziehe die zu komprimierenden Fotos einfach aus dem Datei-Explorer per Drag’n’Drop in das Fenster – fertig.
Vorher legst du in den Einstellungen fest, in welchen Ordner und welcher Kantenlänge die komprimierten Bilder gelegt werden sollen.

Neben einer Webkomprimierung kann das Programm auch einfach das Originalbild in derselben Auflösung, nur verlustfrei komprimiert neu abspeichern (Optimize Originals). Das ist nützlich, um z.B. tausende Fotos auf einen kleinen USB-Stick speichern zu können. Ein Unterschied ist in der Qualität nicht sichtbar, an der Dateigröße allerdings schon.

Fazit – Bilder für Web exportieren und verkleinern

Mit diesen drei professionellen Möglichkeiten bist du nun gewappnet, deine Bilder gut und mit geringer Ladezeit im Internet zu präsentieren. Durch die kontrollierte Komprimierung nimmst du auch den Social Media Plattformen diese Aufgabe weitestgehend ab, wodurch das Bild nach dem Upload noch beinahe so aussehen wird wie vorher.

Nichtsdestotrotz möchte ich anmerken, dass du auf kurz oder lang deine eigene Kombination zwischen Auflösung und Bildqualität finden musst. Das kommt sowohl auf dein eigenes Empfinden von Bildqualität an, aber auch auf deine Website.

Wenn deine Website z.B. Bilder im Content-Bereich nur sehr klein zeigt, reicht z.B. 960px aus. Werden Bilder groß gezeigt oder z.B. auch Fullscreeen, dann muss entsprechend größer exportiert werden – was natürlich zu Ungunsten der Ladezeit geht. Für eine etwas brillantere Darstellung zeige ich (vor allem eben auf meinem Fotoblog) die Bilder lieber sogar etwas größer, als zu klein. So werden pixelige Darstellungen vermieden.

Lerne welche Lightroom Regler du wirklich brauchst und bearbeite stimmungsvolle Farblooks

Selbst nach Stunden in Lightroom sehen die Farben immer noch unstimmig aus? All die Lightroom Regler sind ein großes Rätsel? Wie wäre es, wenn du in einfachen Lektionen die wichtigsten Basics kennen lernst und genau weißt, was du für gelungene Farblooks einstellen musst. Im kostenlosen "Lightroom Farblooks Verstehen"-Kurs zeige ich dir alles, was du für stimmungsvolle Farben brauchst. Dazu gehört im Kurs ein gratis Preset, Checkliste und weitere nützliche Angebote zu Lightroom und der Fotografie.

Du kannst dich jederzeit wieder abmelden.

Invalid email address

Markus Thoma

Ich bin Markus und schreibe aus meiner Erfahrung als Berufsfotograf über die kreative Art der Fotografie. Am liebsten fotografiere ich draußen Porträts - bei natürlichem Licht. Denn weniger ist meistens mehr. Hin und wieder bin ich auch gerne mal auf Reisen. Wenn ich gerade nicht fotografiere, findet ihr mich auf Metalcore Konzerten, in der Natur oder am Buffet. Schau doch auch mal auf meinen Social Media Kanälen vorbei:

6 Gedanken zu „Bilder kleiner machen: 3 Wege für die JPG Web Optimierung“

  1. Für die Vorbereitung für’s Web liebe ich ja das Tool http://www.jpegmini.com/

    Aus PS/LR mit 100% Qualität exportieren und dann da rein schmeißen. Kommt ein verdammt gutes Qualitäts/Dateigrößenverhältnis bei raus, das man nicht mit PS/LR durch Schieben des Reglers erreichen kann. Kling wie Werbung, is aber so. :)

    Antworten
    • Das Tool kannte ich noch nicht. Hab mir gerade mal die Website angeschaut. Wollte jetzt eigentlich schreiben dass ich nicht extra immer alles exportieren will um es dann nochmal da durchjagen zu müssen. Aber gibt ja auch eine Plugin Lösung scheinbar. Sieht insgesamt eigentlich schon vielversprechend aus, ja! Aber ob es sich für den Preis lohnt weiß ich noch nicht. Hast du die Pro Version? Oder wie lange läuft die Trial?

      Antworten
      • Die Trial ist zeitlich unbefristet und auf 20 Bilder am Tag begrenzt, da bin ich auch ne ganze Weile mit ausgekommen.

        Ich hab nur die Standalone-Version für $20 und glaube nicht, dass ich auf absehbare Zeit auf die Pro Version als Plug-In umsteigen werde. Die Vorteile sind mir zu gering, es funktioniert schon so gut genug und das Ergebnis überzeugt einfach.

        Antworten
  2. ich mache es bisher immer in PS, habe mich aber schon ewig gefragt, wo das wohl in LR geht. danke für den hilfreichen tipp, das werde ich demnächst probieren und sollte mir doch etwas arbeit ersparen :)

    Antworten

Schreibe einen Kommentar