Bildgröße ändern & zuschneiden

Digitale Bilder sind Raster aus Pixeln – ein 1920×1080-Bild hat über 2 Millionen einzelne Pixel. Die Skalierung ändert die Anzahl der Pixel in diesem Raster. Herunterskalieren (Verkleinern) erfordert das Zusammenführen mehrerer Pixel zu weniger, was als Dezimation oder Downsampling bezeichnet wird. Hochskalieren (Vergrößern) erfordert das Interpolieren neuer Pixel aus vorhandenen, was als Interpolation oder Upsampling bezeichnet wird. Die Qualität des Ergebnisses hängt stark vom verwendeten Resampling-Algorithmus ab.

Die Canvas API des Browsers verwendet das integrierte Bild-Resampling des Browsers, das typischerweise bilineare oder bikubische Interpolation ist. Bilineare Interpolation berechnet jedes neue Pixel als gewichteten Durchschnitt der nächsten 4 Originalpixel. Bikubische Interpolation verwendet eine 4×4-Nachbarschaft und erzeugt glattere Ergebnisse, besonders beim Hochskalieren. Die imageSmoothingQuality-Eigenschaft der Canvas kann auf 'low', 'medium' oder 'high' eingestellt werden. Unser Tool verwendet 'high' für maximale Qualität.

Beim Skalieren ist es wichtig, das Seitenverhältnis (das Verhältnis von Breite zu Höhe) beizubehalten, um Verzerrungen zu vermeiden. Wenn Sie die Breite ändern, ohne die Höhe proportional anzupassen, wird das Bild gestreckt oder gestaucht. Unser Tool sperrt standardmäßig das Seitenverhältnis. Wenn Sie eine Dimension ändern, wird die andere automatisch angepasst. Sie können die Sperre aufheben für nicht-proportionale Skalierung, aber das Ergebnis wird verzerrt aussehen.

Skalieren, Zuschneiden und Komprimieren sind drei verschiedene Operationen, die oft verwechselt werden. Skalieren ändert die Abmessungen (Anzahl der Pixel) eines Bildes. Zuschneiden entfernt Pixel von den Rändern, um sich auf einen bestimmten Bereich zu konzentrieren. Komprimieren wendet verlustbehaftete oder verlustfreie Komprimierungsalgorithmen an, um die Dateigröße zu reduzieren, ohne die Abmessungen zu ändern. Diese Operationen haben unterschiedliche Zwecke: Skalieren für Dimensionsanpassung, Zuschneiden für Komposition, Komprimieren für Dateigröße.

Für die Web-Optimierung benötigen Sie typischerweise alle drei: Zuschneiden auf das gewünschte Seitenverhältnis, Skalieren auf die Zielabmessungen (z. B. 1200×630 für Open Graph), und Komprimieren, um die Dateigröße zu reduzieren (Ziel: unter 200 KB für Hero-Bilder). Ein häufiger Fehler ist das Skalieren ohne Komprimierung. Ein 4000×3000-Bild, auf 800×600 skaliert aber als PNG gespeichert, kann immer noch mehrere Megabyte groß sein. Verwenden Sie für Web-Bilder immer Skalierung und Komprimierung zusammen (JPEG- oder WebP-Format).