Bilder skalieren

Welche Größe ist die richtige?

Miss, wie breit das Bild auf der Seite erscheint, und verdopple den Wert. Die Verdopplung ist für Bildschirme mit hoher Auflösung – dort werden zwei Gerätepunkte auf einen CSS-Pixel gelegt, und ein knapp bemessenes Bild wirkt unscharf.

Ein Foto mit 4000 Pixeln Breite, das auf der Seite 600 Pixel breit dargestellt wird, überträgt etwa das Vierzigfache der nötigen Daten. Das ist auf den meisten Websites der größte einzelne Posten – größer als jedes Skript, jedes Stylesheet und jede Schriftdatei zusammen.

Was hier passiert

Verzerrt wird nicht. Gibst du Breite und Höhe zugleich an und lässt den Haken beim Seitenverhältnis stehen, gelten beide Werte als Obergrenze – das Bild wird eingepasst und kann in einer Richtung kleiner ausfallen. Nur ohne Haken wird es auf genau die Maße gezogen.

Beim Wechsel zu JPEG kommt ein weißer Grund. JPEG kennt keine Transparenz; ohne diesen Schritt würden durchsichtige Bereiche schwarz. Wer Transparenz braucht, bleibt bei PNG oder WebP.

Größer machen geht auch – über den Prozentwert –, bringt aber keine Schärfe zurück. Was im Original nicht vorhanden ist, kann kein Skalieren erfinden.

Geht es dir vor allem um kleinere Dateien, ist der WebP-Umwandler der direktere Weg. Welche Bilder deine Seite zu groß ausliefert, zeigt der Seiten-Check.