Auflösung vs. Performance für Portfolio-Bilder

Allgemeine Leitfäden sprechen noch immer so, als wäre WebP exotisch. Bei Fotografien und detailreichen Bildern ist AVIF bei vergleichbarer visueller Qualität oft deutlich kleiner als WebP; WebP bleibt der breit unterstützte moderne Standard, wenn AVIF nicht verfügbar ist. JPEG ist für problematische Clients und Legacy-Randfälle gedacht, nicht für Ihr primäres öffentliches Grid.

Auf ArtInStack liefert Cloudflare Image Resizing `format=auto` aus, sodass der Edge aus einem Master AVIF oder WebP auswählt – statt aus einem Ordner manuell exportierter Codec-Varianten. Encoder verändern sich von Jahr zu Jahr; verstehen Sie Aussagen wie „30–50 % kleiner“ als Richtwert. Für ein Portfolio zählt die wahrgenommene Qualität innerhalb eines Byte-Budgets, das die Seite tragen kann.

Die Layout-Breite wird in CSS-Pixeln angegeben. Die wahrgenommene Schärfe auf dem Gerät entspricht eher CSS-Breite × devicePixelRatio. Beispiel: Eine Smartphone-Galeriespalte mit 375 CSS px und DPR 2 sollte für diesen Slot von einem Asset mit ungefähr 750 px an der langen Kante versorgt werden – nicht von Ihrem 2400-px-Master in jedem img-Tag.

Deshalb scheitert auch ein „Retina-Export“, der nur als eine riesige JPEG-Datei vorliegt, gleich doppelt: Er verschwendet Bandbreite für Thumbnails und wird dem Browser trotzdem nicht als responsives Set beschrieben. srcset / sizes (oder ein Plattform-Äquivalent) sorgt dafür, dass der richtige Kandidat ausgewählt wird.

Entwickler-Blogs nennen oft eine einzige Hero-Größe. Portfolios benötigen eine kleine Matrix. Nutzen Sie diese Werte als Planungsbereiche und lassen Sie ArtInStack anschließend Varianten erzeugen. Pflegen Sie nicht dauerhaft fünf Ordner von Hand.

Dichte Grids und Lightboxes haben unterschiedliche Kostenkurven. Eine einzige Einstellung wie „JPEG auf 80 % komprimieren“ kann nicht beide angemessen bedienen.

ArtInStack trennt diese Aufgaben bewusst: Portfolio-Grids bevorzugen ein generiertes Thumbnail (ein effizientes Bild pro Kachel), damit eine Seite mit 40 Bildern schlank und schnell bleibt. Öffnet ein Besucher ein Bild, greifen Lightbox und Fotodetailansicht über Cloudflare Image Resizing auf Ihren Master zu (moderne Formate über `format=auto`, mit responsiven Breitenkandidaten). Die Schärfe steht dort bereit, wo jemand tatsächlich genauer hinsieht.

ArtInStack extrahiert und speichert EXIF-Daten (einschließlich GPS, sofern vorhanden) für Medien- und Kartenfunktionen. Die öffentliche Anzeige von Standorten ist eine Veröffentlichungsrichtlinie (pro Portfolio ausblenden oder entfernen), kein Versprechen, dass jedes CDN-Derivat die Spur unbemerkt löscht.

Aufnahmeorte von Kunden in GPS-Tags bleiben auf öffentlichen Seiten ein Datenschutzrisiko. Legen Sie fest, was Besucher sehen sollen. Barrierefreiheit gehört in von Ihnen verfasste Alt-Texte, nicht in verbliebene Kamerametadaten. Urheberrecht ist nicht „das, was vom EXIF nach der Übertragung übrig blieb“. Verwenden Sie sichtbare Credits, bewusst gewählte Wasserzeichen und rechtliche Bedingungen.

Sie laden einen Master hoch, dem Sie vertrauen. ArtInStack bewahrt diesen Master auf, erzeugt ein leichtgewichtiges Thumbnail für die schnelle Grid-Ansicht und nutzt Cloudflare-Bildtransformationen vom Master, wenn ein Besucher die Arbeit öffnet. Hierarchie auf einer öffentlichen Seite: Grid-Kacheln → zuerst Thumbnail; Lightbox / Fotodetail → Cloudflare-Kandidaten vom Master. Sie bestimmen weiterhin Master-Qualität und Beschnitt. Drei Exportordner müssen Sie nicht von Hand pflegen.

Gut: leichtere öffentliche Assets aus einem Master ableiten, der weiterhin Ihnen gehört. Schlecht: Ein Host komprimiert Ihren Upload erneut zu einem einzigen weichen „Web-JPEG“, nennt das Optimierung und liefert trotzdem dieselbe Datei in jede Grid-Zelle. Das sind als Performance verkleidete Speichereinsparungen. Lesen Sie Der Mythos vom unbegrenzten Speicher.

Wie Cloudflare Image Resizing individuelle Transformationen abrechnet (und wie Grid-Thumbnails verhindern, dass das kostenlose Kontingent abrupt ausgeschöpft wird), erfahren Sie unter Cloudflare Images erklärt. Informationen zu Layout-Entscheidungen, die die Kachelgröße auf der Seite verändern, finden Sie unter Die Layout-Falle: Aspect Ratios und CSS-Grids. Für die mögliche Speichergröße einer Bibliothek verwenden Sie den Rechner für Cloud-Speicher und Kosten in der Fotografie.