Bilder fürs Web skalieren und zuschneiden

Skalieren und Zuschneiden klingen nach demselben, lösen aber verschiedene Probleme — und sie gut einzusetzen ist oft ein größerer Geschwindigkeitsgewinn als Kompression allein. Dieser Ratgeber erklärt den Unterschied, warum übergroße Bilder schaden und wie man Bilder fürs Web korrekt dimensioniert.

Skalieren vs. Zuschneiden

• Skalieren (Resizing) ändert die Abmessungen des ganzen Bildes und behält alles davon — du vergrößerst oder verkleinerst es.
• Zuschneiden (Cropping) schneidet einen Teil des Bildes weg, um nur einen Bereich zu behalten — du änderst, was im Bild ist, nicht nur seine Größe.

Ein Profilbild ist ein gutes Beispiel: Du schneidest auf ein Quadrat um das Gesicht zu und skalierst dieses Quadrat dann auf die Anzeigegröße herunter.

Warum übergroße Bilder Seiten verlangsamen

Ein Foto direkt vom Handy kann 4.000 Pixel breit sein. Wird es in einer 800 Pixel breiten Spalte angezeigt, lädt der Browser fünfmal mehr Pixel herunter, als er je zeigen kann, und verkleinert sie dann im Flug. Das ist verschwendete Bandbreite und eine langsamere Seite für null visuellen Nutzen. Das Bild ungefähr auf die Größe zu skalieren, in der es angezeigt wird, ist häufig die einzelne größte verfügbare Dateigrößen-Einsparung — oft mehr als Kompression.

Das Seitenverhältnis beibehalten

Das Seitenverhältnis (aspect ratio) ist das Verhältnis von Breite zu Höhe. Skaliere beide Maße um denselben Faktor, und das Bild bleibt unverzerrt; ändere nur eines, und es wird gestreckt oder gestaucht. Die meisten Tools „sperren“ das Verhältnis standardmäßig — lass es gesperrt, außer du willst gezielt verzerren. Brauchst du eine andere Form (etwa ein breites Banner aus einem hohen Foto), schneide auf das neue Verhältnis zu, statt zu strecken.

Wie groß sollten Bilder sein?

• Passe die Bildbreite an den Platz an, den es füllt — miss den Container.
• Für scharfe Darstellung auf hochauflösenden (Retina-)Bildschirmen exportiere in etwa 2× der Anzeigegröße und komprimiere dann.
• Nicht hochskalieren — ein kleines Bild zu vergrößern fügt nur Unschärfe hinzu; es kann keine Details erfinden.

Alles zusammenführen

Eine gute Reihenfolge ist zuschneiden → skalieren → komprimieren. Der Bild-Resizer erledigt Zuschneiden und Skalieren in einem Durchgang mit gesperrtem Seitenverhältnis, danach übergibst du an den Bildkompressor, um die Dateigröße zu senken. Lies den Kompressions-Ratgeber, wie weit du die Qualität treiben kannst, und Bildformate erklärt, um zuerst das richtige Format zu wählen.