Website-Bilder

Bildgröße ändern, ohne das Bild zu verzerren

Ändere die Bildgröße ohne Verzerrung: Seitenverhältnis sperren, ein Maß ändern und bei einer anderen Form zuschneiden oder Ränder ergänzen.

Von Pixilo · Aktualisiert am

Verkleinern, zuschneiden oder Ränder ergänzen?

Breitere Gesichter entstehen meist durch ein falsches Seitenverhältnis. Höhere Exportqualität behebt das nicht.

Skalieren ändert die Pixelzahl und erhält bei proportionalen Maßen Inhalt und Form. Zuschneiden entfernt Inhalt und ändert Ausschnitt oder Seitenverhältnis. Ränder betten das ganze Bild in eine größere Fläche mit Farbe oder Transparenz ein.

Entscheide nach dem Inhalt: Etwas Himmel lässt sich vielleicht entfernen, ein Produkt sollte vollständig sichtbar bleiben. Schneide keine wichtige Anweisung ab, nur um ein Quadrat zu erhalten.

Dieselbe Blumenvase in zwei Größen mit verknüpften Proportionen.

Proportional mit Pixilo skalieren

  1. Originalmaße prüfen. Nutze Dateieigenschaften oder Bildeditor und eine Quelle in voller Auflösung.
  2. Zielgröße bestimmen. Beachte Vorgaben und Anzeigefläche. Vergrößere keine kleine Quelle nur für eine beliebige Zahl.
  3. Bildgröße ändern. Lass die Sperre für das Seitenverhältnis eingeschaltet und gib die gewünschte Breite oder Höhe ein. Das Werkzeug berechnet die andere Abmessung automatisch.
  4. Kopie bearbeiten und herunterladen. Prüfe Maße und Darstellung in der tatsächlichen Anzeigegröße.

Die Sperre ist standardmäßig aktiv. Bei 2400 × 1600 Pixeln berechnet eine Breite von 1200 die Höhe 800. Ohne Sperre sind die Werte unabhängig; ein leeres Feld behält sein Originalmaß und kann das Bild verzerren. Prüfe beide Werte vor der Verarbeitung.

Unterstützte JPG-, PNG- und WebP-Bilder werden neu gezeichnet und im Eingabeformat exportiert. JPEG und WebP können dabei Details verlieren. Bewahre das Original für spätere Versionen auf.

Beispiel: Eine Breite von 480 statt 960 Pixeln setzt die Höhe automatisch auf 320. Die Sperre für das Seitenverhältnis bleibt aktiv.
Beispiel: Eine Breite von 480 statt 960 Pixeln setzt die Höhe automatisch auf 320. Die Sperre für das Seitenverhältnis bleibt aktiv. Original-PNG.

Passende Maße berechnen

2400 × 1600 entspricht 3:2. Bei 1200 Pixeln Breite beträgt die passende Höhe 800.

Neue Höhe = ursprüngliche Höhe × neue Breite ÷ ursprüngliche Breite. Umgekehrt gilt neue Breite = ursprüngliche Breite × neue Höhe ÷ ursprüngliche Höhe. Runde auf ganze Pixel.

Beispiele mit gleichem Seitenverhältnis
OriginalNeue BreitePassende Höhe
2400 × 16001200800
1600 × 900800450
1200 × 1800600900
2000 × 200010001000

Halbierte Maße ergeben ein Viertel der Pixel. Die Dateigröße hängt zusätzlich von Format, Inhalt und Kompression ab.

Aus einem Querformat ein Quadrat machen

1600 × 900 wird proportional zu 800 × 450. Für 800 × 800 fehlen 350 Pixel Höhe.

Das Quadrat durch Zuschnitt füllen

Wähle im Zuschnittwerkzeug einen quadratischen Ausschnitt mit dem wichtigen Motiv. Ein Ausschnitt von 900 × 900 lässt sich auf 800 × 800 skalieren. Seitliche Inhalte entfallen; Verzerrung entsteht nicht. Die Bildmitte ist nicht immer der beste Ausschnitt.

Das ganze Foto mit Rändern behalten

Platziere 800 × 450 auf einer Fläche von 800 × 800 in einem geeigneten Editor. Zentriert bleiben oben und unten je 175 Pixel. Verwende passende Farbe oder Transparenz. Pixilos Größenwerkzeug fügt keine Ränder automatisch hinzu.

Auf Websites schneidet object-fit: cover zur Flächenfüllung zu, während object-fit: contain das ganze Bild zeigt. Die MDN-Referenz zu object-fit erklärt den Unterschied. CSS ändert die Darstellung, nicht die Dateigröße.

Warum wirkt ein korrekt skaliertes Bild unscharf?

Richtige Proportionen garantieren keine Schärfe. Vergrößerung schätzt zusätzliche Pixel, stellt fehlende Details aber nicht zuverlässig wieder her.

Verkleinerung kann kleine Schrift und dünne Linien unleserlich machen. Prüfe die tatsächliche Anzeigegröße und versuche mehr Pixel, einen engeren Ausschnitt oder weniger Kompression.

Hochauflösende Displays können mehr Bildpixel als CSS-Pixel benötigen. Vergrößere dennoch keine schwache Quelle nur für „2ד. Der Leitfaden zu Website-Bildgrößen hilft bei der Auswahl.

Innerhalb von Höchstmaßen bleiben

Für maximal 1200 × 800 berechnest du den kleineren Wert aus maximale Breite ÷ ursprüngliche Breite und maximale Höhe ÷ ursprüngliche Höhe. Multipliziere beide Maße mit diesem Faktor.

3000 × 2000 passt als 1200 × 800. Ein Hochformat mit 2000 × 3000 braucht etwa 533 × 800, denn 800 ÷ 3000 begrenzt den Faktor. 1200 × 800 würde es verzerren. Ein bereits passendes Bild muss nicht vergrößert werden.

Runde auf ganze Pixel und prüfe beide Grenzen. Ein Pixel Abweichung ist oft Rundung; 3:2 zu 3:4 ist eine Formänderung und braucht Zuschnitt oder Ränder.

„Maximal 1200 × 800“ erlaubt ein schmaleres Hochformat. „Genau 1200 × 800“ kann Zuschnitt oder Ränder verlangen. Prüfe auch Mindestmaße: Eine kleine Quelle erreicht sie möglicherweise nur mit schlechterer Schärfe.

Motiv und Bildränder kontrollieren

Vergleiche Original und Kopie unter gleichen Bedingungen. Kreise bleiben rund, Gesichter natürlich und Linien unverzerrt. Prüfe beim Zuschnitt jede Kante auf abgeschnittene Hände, Produkte, Beschriftungen oder Logos.

Kontrolliere den tatsächlichen Zielort: Website oder Profilansicht können erneut zuschneiden. Nutze Positionseinstellungen und halte Wichtiges von den Rändern fern.

Große transparente Ränder können Logos unerwartet klein wirken lassen. Entferne sie bei Bedarf, aber beachte den vorgeschriebenen Schutzraum. Teste kleine Screenshot-Beschriftungen in der Endgröße.

Häufige Fragen

Kann ich das Seitenverhältnis ohne Zuschnitt ändern?

Mit Rändern bleibt alles erhalten. Ohne Ränder erfordert eine andere Form Zuschnitt, Verzerrung oder neue Inhalte.

Warum ist das Bild nur auf der Website verzerrt?

Die Seite kann unpassende Maße vorgeben. Prüfe die Darstellung, bevor du das Original änderst. Eine proportionale Höhe ist meist besser.

Ist Skalieren dasselbe wie Komprimieren?

Nein. Skalieren ändert Pixelmaße, Kompression die Speicherung. Beides kann Dateien verkleinern.

Erst zuschneiden oder erst verkleinern?

Meist zuerst das Original zuschneiden und den gewählten Ausschnitt einmal verkleinern. So bleiben mehr Details verfügbar.

Wähle die Form vor dem Export

Behalte die Proportionen für das vollständige Bild bei. Schneide zuerst zu, wenn eine andere Form nötig ist.

Bildgröße ändernBild zuschneiden →