Vom Layout zur Exportgrösse
Beginne mit der maximalen Breite, in der das Bild tatsächlich angezeigt wird. Ein Content-Bild in einer 720 Pixel breiten Textspalte benötigt keine 3000 Pixel breite Datei. Für hochauflösende Displays kann eine Variante mit ungefähr doppelter Pixelbreite sinnvoll sein – aber nur, wenn die Bildqualität davon sichtbar profitiert.
| Einsatz | Praktischer Bereich | Hinweis |
|---|---|---|
| Fullscreen/Hero | 1920–2560 px Breite | Motiv und grösste Zielanzeige beachten |
| Halbe Sektion | 1200–1440 px | Für Retina etwas Reserve einplanen |
| Content-Bild | 800–1200 px | An echte Spaltenbreite anpassen |
| Card/Thumbnail | 400–800 px | Mehrere responsive Varianten lohnen sich |
| Raster-Icon | 64–256 px | SVG bevorzugen, wenn möglich |
Hero-Bilder brauchen besondere Aufmerksamkeit
Ein Hero ist oft das grösste sichtbare Element beim Seitenstart und kann zum Largest Contentful Paint werden. Wähle einen passenden Bildausschnitt, vermeide extreme Originalabmessungen und lade das Hero nicht unnötig verzögert. Bei einem bildschirmfüllenden Motiv ist etwas mehr Dateigrösse vertretbar als bei einem Thumbnail – aber nicht unbegrenzt.
Responsive Varianten statt Einheitsdatei
Mit srcset kann der Browser je nach Bildschirmbreite eine passende Datei auswählen. Sinnvolle Stufen sind beispielsweise 640, 960, 1440 und 1920 Pixel. Das reduziert mobile Downloads, ohne Desktop-Qualität zu opfern. Das HTML-Attribut sizes beschreibt, wie breit das Bild im Layout voraussichtlich erscheint.
Keine fixe Zielgrösse: „Jedes Bild unter 100 KB“ klingt gut, führt bei grossen Fotos aber oft zu sichtbaren Schäden. Priorisiere die Dateigrösse im Kontext ihrer Darstellung.
Abmessungen im HTML reservieren
Setze width und height oder ein festes Seitenverhältnis. Dadurch kennt der Browser den benötigten Platz, bevor die Datei geladen ist. Inhalte springen weniger und der Cumulative Layout Shift bleibt niedrig. Für Bilder unterhalb des sichtbaren Bereichs eignet sich loading="lazy"; das wichtigste Hero-Bild sollte dagegen normal beziehungsweise priorisiert laden.
Die compress.-Presets
Die Presets Hero, kleines Bild, mittleres Bild, halbe Sektion und Fullscreen bilden typische Layoutbereiche ab. Sie reduzieren übergrosse Quelldateien automatisch, skalieren kleine Originale jedoch nicht künstlich hoch. So bleibt die Datei technisch sinnvoll.