Fotos für ein Onlineportfolio exportieren

Ein Fotoportfolio muss zügig laden und zugleich die Qualität der Arbeit zeigen. Stoff, Laub, glatte Himmel und Hauttöne verdienen mehr Aufmerksamkeit als eine kleine Servicegrafik. Ein brauchbares Vorschaubild kann in der Großansicht schlecht aussehen.

Das Ziel sind Dateien mit den wichtigen Details in den tatsächlichen Ansichtsgrößen. Hier lernst du, Exporte auszuwählen und zu testen, auch wenn die Website sie erneut verarbeitet.

Plane für die Galerie, nicht nur das Vorschaubild

Erfasse Raster, Projektseite, Lightbox und breite Einstiegsbilder. Dasselbe Foto kann im Raster quadratisch zugeschnitten und geöffnet vollständig sichtbar sein. Eine reine Thumbnail-Datei liefert keine zusätzlichen Details für die Großansicht.

Lies die Uploadhinweise vor dem Anlegen von Vorgaben. Manche Plattformen erzeugen mehrere Größen, andere zeigen die hochgeladene Datei direkt. Adobe Portfolio speichert etwa die volle Auflösung und erzeugt kleinere Fassungen. Uploadquelle und gelieferte Besucherdatei sind getrennt zu prüfen.

Prüfe auch Downloads in Originalgröße. Lade keinen Druckmaster hoch, nur weil die Galerie normalerweise eine kleinere Fassung anzeigt. Veröffentliche nur Webexporte, die über die Website zugänglich sein dürfen.

Ermittle die tatsächlich geöffnete Ansichtsgröße

1. Beginne im Website-Baukasten. Prüfe Galeriehilfe, Uploadhinweise und Layouteinstellungen. Suche maximale Anzeigebreite oder -höhe. Das Uploadlimit ist eine andere Grenze.
2. Öffne eine veröffentlichte Testgalerie. Nutze das breiteste vorgesehene Fenster und öffne Fotos wie ein Besucher, auch in der Lightbox. Teste ein Hochformat, das durch die Fensterhöhe begrenzt werden kann.
3. Miss nur bei fehlenden Plattformangaben. Rechtsklick auf das angezeigte Bild und Untersuchen öffnet die Desktop-Entwicklerwerkzeuge. Elementmarkierung oder Layoutbereich zeigen CSS-Maße. Miss das Bild statt des Galerierahmens. Die Quelldatei in einem neuen Tab zeigt dagegen ihre eigenen Pixelmaße.

Bleibt die Anzeigegröße unklar, beginne mit der aktuellen Plattformempfehlung und teste die geöffnete Galerie vor einer Serienvorgabe. Eine begründete Ausgangsgröße ist hilfreicher als eine Schätzung nach Kameraauflösung.

Pixelmaße aus dem Layout ableiten

Beginne mit den größten Anzeigemaßen und entscheide dann über zusätzliche Pixel. Bei 1.200 CSS-Pixeln Breite kann eine 2.400-Pixel-Quelle 2× Details liefern, wenn die Website sie tatsächlich ausliefert. Das ist ein Planungsbeispiel, keine allgemeine Pflichtbreite.

6.000 × 4.000 proportional auf 2.400 Pixel Breite verkleinert ergibt 2.400 × 1.600. Bei 1.200 × 800 CSS-Pixeln stehen je Richtung zwei Bildpixel pro CSS-Pixel bereit. Ein Hochformat von 4.000 × 6.000 mit 2.400 Pixel langer Kante wird dagegen 1.600 × 2.400. Dieselbe Kantenregel erzeugt nicht dieselbe Breite.

Doppelte Breite und Höhe ergeben viermal so viele Pixel: 960.000 bei 1.200 × 800 und 3.840.000 bei 2.400 × 1.600. Die Dateigröße vervierfacht sich nicht zwingend, doch Übertragung und Dekodierung kosten mehr. Vergleiche kleinere und 2×-Fassung in der Galerie. Behalte Zusatzpixel nur bei erkennbarem Nutzen und liefere kleineren Ansichten kleinere Dateien.

Verkleinere vorhandene Webexporte im Größenwerkzeug mit gesperrtem Seitenverhältnis. Benötigt das Layout eine andere Komposition, schneide zuerst zu. Verzerrtes Strecken ersetzt keinen passenden Ausschnitt.

Kleine Displays sollten nicht für jedes Thumbnail die größte Datei laden. Baukästen können das übernehmen, eigene Websites brauchen gegebenenfalls responsives Bild-Markup. Unser Ratgeber zu responsiven Bildern erklärt Anzeigegröße und Quellenauswahl.

Bei normaler Bildschirmdarstellung sind Pixelmaße wichtiger als ein PPI-Wert. 2.400 Pixel Breite bleiben gleich, wenn nur die Auflösungsmetadaten geändert werden. Für Druckgrößen gilt ein anderer Zusammenhang; siehe DPI, PPI und Pixel.

Format und Farbverarbeitung bewusst wählen

Beginne mit einem unterstützten Format

JPG ist für normale Fotos praktisch. PNG eignet sich für Transparenz oder Grafik, ist für Fotos aber oft unnötig groß. WebP und AVIF kommen bei Plattformunterstützung oder eigener Bildauslieferung infrage. Die MDN-Formatreferenz beschreibt Eigenschaften und Unterstützung.

Konvertiere nicht die ganze Sammlung vor dem Test der Veröffentlichung. Eine Plattform kann das Format ablehnen oder neu kodieren. Vergleiche das ausgelieferte Galeriebild, nicht nur den Upload.

Nutze einen farbverwalteten Export

Für ein übliches Portfolio mit Standarddynamikumfang, SDR, ist sRGB ein praktischer Ausgangspunkt. Exportiere mit Farbmanagement und bette nach Möglichkeit das Profil ein. Die Farben nach sRGB zu konvertieren ist etwas anderes, als vorhandenen Farbwerten aus einem anderen Farbraum lediglich ein sRGB-Profil zuzuweisen. Adobes Farb-FAQ erläutert Lightrooms Farbverarbeitung.

Großer Farbumfang und HDR benötigen eine kompatible Export- und Veröffentlichungskette. Nutze sie mit passender Plattformunterstützung bewusst; die Bearbeitungsvorschau allein zeigt nicht das Besucherergebnis.

Vergleiche Export und Veröffentlichung am selben Gerät anhand vertrauter Farben wie Haut oder neutralen Flächen. Bildschirme können dennoch abweichen. Ändert sich das Bild dort unerwartet, prüfe Plattform und Profile vor einer neuen kreativen Bearbeitung. Unser Farbratgeber hilft dabei.

Komprimierung mit einer kleinen Bildauswahl testen

Ein Qualitätsprozentsatz wirkt nicht in jedem Exportprogramm gleich. Er steuert den jeweiligen Encoder und bezeichnet keinen Anteil der fotografischen Qualität.

Wähle Bilder, an denen unterschiedliche Fehler sichtbar werden. Ein gleichmäßiger Himmel macht störende Farbstufen sichtbar, Haare, Gras und Stoff zeigen den Verlust feiner Strukturen. Dunkle Bereiche können Blöcke oder verschmiertes Rauschen entwickeln. Architektur macht Schäden an feinen, kontrastreichen Kanten sichtbar. Nutze Motive, die deine tatsächliche Arbeit repräsentieren.

1. Verwende jeweils dieselbe bearbeitete Quelle. Halte Maße und Farbeinstellungen konstant, damit nur die Komprimierung variiert.
2. Erstelle zwei bis drei Qualitätsfassungen. Bei einer JPG-Skala von 0–100 können 75, 85 und 95 Testpunkte sein, keine allgemeine Empfehlung.
3. Prüfe das Bild in zwei Ansichten. Beurteile es zuerst in der Größe, in der Besucher es sehen. Untersuche anschließend bei 100 % beziehungsweise 1:1 feine Strukturen, Kompressionsblöcke und Halos. 100 % ist nicht dasselbe wie „ans Fenster anpassen“ und bedeutet nicht zwangsläufig eine Vergrößerung. Adobe beschreibt Lightrooms 1:1-Ansicht als Darstellung der tatsächlichen Bildpixel.
4. Vergleiche danach die Dateigrößen. Behalte die kleinere Fassung nur mit den wichtigen Details. Große Qualitätsverluste für minimale Einsparungen sind selten sinnvoll.
5. Veröffentliche einen Test. Prüfe nach der Plattformverarbeitung erneut Raster, geöffnete Bilder und Handyansicht, bevor du die Serie exportierst.

Es gibt kein allgemeingültiges Kilobyteziel für Portfoliofotos. Ein detailreiches Waldfoto kann bei denselben Abmessungen mehr Daten benötigen als eine schlichte Studioaufnahme. Wähle die kleinste Datei, die deiner Sichtprüfung standhält, und beurteile anschließend das Ladeverhalten der gesamten Seite.

Gemessenes Beispiel: ein Foto, drei JPG-Exporte

Wir testeten ein Alpen- und Mittelmeerfoto von NASA Earth Observatory. Bildnachweis: NASA/JSC, ISS Crew Earth Observations Facility, ISS073-E-3320. Die Quelle war bereits JPG. Einmalig verkleinerten wir sie auf 2.400 × 1.348 und speicherten eine PNG-Arbeitskopie als identische Pixelbasis. PNG stellt keine zuvor verlorenen Details wieder her.

Am 17. Oktober 2026 wandelten wir dieselbe PNG-Datei in Pixilos PNG-zu-JPG-Werkzeug mit 75, 85 und 95 in Microsoft Edge 155.0.4283.45 um. Die Maße blieben gleich. Die Werte beschreiben diesen Browserencoder, keine entsprechenden Lightroom-Werte oder garantierten Ergebnisse für andere Fotos.

Alle Detaildateien zeigen denselben Bereich von 240 × 160 Pixeln ohne zusätzliche Skalierung. Die Seite kann Vorschauen an den Bildschirm anpassen. Öffne vollständige Downloads bei 100 % für den Pixelvergleich. Niedrigere Werte sparen Byte, können aber feine Grate und Strukturen glätten. Qualität 95 benötigt fast doppelt so viel wie 85; ob der Unterschied in deiner Galerie zählt, entscheidet die Sichtprüfung.

Zum Wiederholen kannst du die PNG-Arbeitskopie herunterladen (6.464.084 Byte). Ein Luftbild bestimmt nicht den richtigen Wert für Porträts, Kunst oder alle Landschaften. Teste eigene repräsentative Aufnahmen.

Beispiel: eine Exportvorgabe in Lightroom Classic

Die größte unbeschnittene Ansicht sei 1.200 × 800 CSS-Pixel, das bearbeitete Original 6.000 × 4.000. Vergleiche 2.400 × 1.600 als JPG mit einer kleineren Fassung. Wähle das Foto und öffne File → Export. Adobes Exportdokumentation erklärt die Bereiche; Bezeichnungen variieren mit Sprache und Version.

• File Settings: wähle JPEG und sRGB für dieses SDR-Beispiel. Vergleiche Qualität innerhalb Lightrooms statt Browserwerte zu übernehmen.
• Image Sizing: aktiviere Resize to Fit und Width & Height. Gib für das Querformat einen Rahmen von 2.400 × 1.600 Pixeln vor. Das Bild passt proportional hinein; ein Hochformat wird nicht hineingezerrt. Lass Don't Enlarge für Vorgaben aktiv, die auch kleinere Quellen bearbeiten.
• Output Sharpening: vergleiche ohne Schärfung mit Sharpen For: Screen, Amount: Standard. Prüfe feine Kanten und Texturen in Endgröße. Bei Halos oder harten Rändern deaktiviere oder reduziere die Schärfung.
• Metadata: behalte nötige Beschreibungs- und Urheberrechtsfelder und prüfe die Entfernung von Standort- und Personendaten.
• Export Location: speichere in einem separaten Webexportordner mit eindeutigen Testnamen, damit die geprüfte Fassung hochgeladen wird.

Lade einen Kandidaten hoch und prüfe Großansicht und Handy. Speichere erst danach eine Vorgabe. Hochformate und Thumbnails benötigen eventuell andere Begrenzungen; bei Layoutänderungen neu prüfen.

Nutze Pixilo für sinnvolle zusätzliche Schritte

Kann dein Fotoeditor Maße, Format und Qualität in einem Export liefern, beginne dort. Pixilo hilft bei einer bereits gerenderten Datei, die kleinere Maße, einen neuen Ausschnitt oder Komprimierungsvergleiche braucht.

Der Bildkompressor erstellt leichtere Kopien, das Größenwerkzeug reduziert überschüssige Pixel. Es akzeptiert JPG, PNG und WebP bis 25 MB je Datei. Exportiere größere Quellen zuerst kleiner im Fotoeditor. RAW, Profilkonvertierung und Ausgabeschärfung gehören in einen dafür geeigneten Editor.

Vermeide wiederholte JPG-Exporte. Führe Änderungen möglichst vor einem Endexport aus und vergleiche immer dieselbe vorbereitete Quelle statt den vorherigen Download erneut zu komprimieren.

Prüfe Metadaten, Dateinamen und Wasserzeichen

Prüfe GPS und Personendaten unabhängig von Komprimierung; siehe Metadatenratgeber. Kontrolliere eine mit dem Wasserzeichenwerkzeug ergänzte Markierung in Raster und Großansicht. Sie soll die Arbeit nicht überlagern und verhindert kein Kopieren.

Finde die Ursache der Qualitätsänderung

1. Prüfe die bearbeitete Quelle. Fehlende Details lassen sich mit Webexporteinstellungen nicht nachbilden.
2. Prüfe die Exportdatei lokal. Bei Texturverlust oder Halos untersuche Maße, Komprimierung und Schärfung getrennt.
3. Prüfe die Galeriedatei. Ist der Export gut, die Seite aber schlecht, prüfe Bildversion, Zuschnitt und Anzeigegröße. Ein vergrößertes Thumbnail verlangt eine andere Lösung als Überkomprimierung.

Ändere immer nur eine Stufe. Auch viele gleichzeitig geladene große Dateien können bremsen. Teste einen frischen Seitenaufruf und das erste geöffnete Bild, nicht nur den Wechsel zwischen bereits geladenen Fotos.

Prüfe die veröffentlichte Galerie

• Vorschaubilder und Großansichten zeigen die beabsichtigte Komposition.
• Wichtige Texturen bleiben erhalten, ohne störende Artefakte in Himmel oder dunklen Bereichen.
• Die Großansicht ist kein hochskaliertes kleines Thumbnail.
• Export und Veröffentlichung zeigen auf demselben Gerät plausible Farben.
• Die mobile Seite lädt zügig, ohne für jedes Vorschaubild die größte Datei anzufordern.
• Öffentliche Dateien und Downloads enthalten nur beabsichtigte Versionen und Metadaten.

Häufige Fragen

Immer höchste JPG-Qualität verwenden?

Nein. Die Datei kann ohne sichtbaren Nutzen in Endgröße erheblich wachsen. Vergleiche anspruchsvolle Motive nach Aussehen und Größenersparnis.

Brauchen alle Fotos identische Maße?

Nicht unbedingt. Einheitliche Präsentation erfordert kein Verzerren auf dieselbe Form. Das Layout bestimmt, wo Zuschnitte gleich sein müssen und wo Originalproportionen bleiben.

Eignet sich ein Webexport auch für Drucklieferungen?

Nicht automatisch. Druck- und Kundendateien können andere Maße, Schärfung, Farben und Metadaten benötigen. Erstelle sie nach Lieferanforderungen aus dem Bearbeitungsoriginal.