Zum Hauptinhalt springen

← Zurück zum Blog

Ein Bild ohne Qualitätsverlust skalieren — so geht's

„Ohne Qualitätsverlust skalieren” ist ein häufiger Wunsch — und die ehrliche Antwort hängt von der Richtung ab. Verkleinern ist nahezu verlustfrei; Vergrößern kämpft gegen die Physik. So holst du in beiden Fällen das Beste heraus.

Wir haben das selbst gemessen. Das ist der Teil, der überrascht. Von 1200 px auf 800 px Breite verschwinden 56% der Pixel, unsere Dateien schrumpften aber nur um 15% bis 50%. Das Foto halbierte sich etwa (1,88 MB auf 967,2 KB), der Screenshot gab lediglich 15% ab — seine Kosten stecken in den scharfen Kanten, und die bleiben beim Verkleinern alle erhalten. alle Messwerte ansehen

Verkleinern (Downscaling): praktisch gratis

Ein Bild in Pixeln kleiner zu machen ist sauber. Die Software mittelt benachbarte Pixel, sodass das Ergebnis scharf bleibt — der sichere Alltagsfall. Ein 4000-Pixel-Handyfoto auf die 1200 Pixel skaliert, die deine Seite tatsächlich zeigt, sieht toll aus und lädt schneller.

Qualitativ praktisch kostenlos, in Bytes aber nicht proportional — und der Abstand ist groß. Von 1200 px auf 800 px Breite verschwinden 56% der Pixel, unsere vier Testbilder fielen jedoch völlig unterschiedlich: das Foto 1.88 MB → 967.2 KB (-50%), die flache Illustration 34.7 KB → 28.8 KB (-17%), das transparente Logo 28.8 KB → 17.2 KB (-40%) und der UI-Screenshot nur 18.0 KB → 15.3 KB (-15%). Ein Screenshot gibt seine Bytes für scharfe Kanten aus, und die bleiben beim Verkleinern erhalten.

Herunterskalieren ist in Bytes wie in Qualität fast kostenlos, und beides wird leicht verwechselt. Unser Testfoto durch den Bild-Resizer ging von 1.88 MB auf 967.2 KB (-50%):

TestbildEingabeAusgabeÄnderung
Foto1.88 MB967.2 KB-50%
Screenshot18.0 KB15.3 KB-15%
Illustration34.7 KB28.8 KB-17%
Logo mit Alpha28.8 KB17.2 KB-40%

Diese Zahlen sind verworfene Pixel, nicht getauschte Qualität — jedes Ausgabepixel ist weiterhin ein Mittel echter Eingabepixel. Vergleiche das mit dem Kompressor am selben Foto: Er behielt jedes Pixel und erreichte 178.7 KB (-46%), indem er Detail innerhalb der Pixel wegwarf. Gleiche Richtung, völlig anderer Mechanismus — und nur eines davon lässt sich durch erneuten Export aus dem Original zurücknehmen.

Vergrößern (Upscaling): der schwierige Teil

Ein Bild größer als das Original zu machen, kann keine nie erfassten Details erfinden. Interpolation streckt vorhandene Pixel, Kanten werden weich oder klotzig. Wege damit umzugehen:

  • Vergrößere möglichst nicht — beginne mit einem höher aufgelösten Original.
  • Logos und Icons? Nutze stattdessen einen Vektor — ein PNG in SVG nachzeichnen, das skaliert perfekt auf jede Größe.
  • Bei Fotos leistet ein spezieller KI-Upscaler mehr als einfaches Skalieren (ist aber schwerer).

So wird die Skalierung am schärfsten

  • Skaliere auf die exakten Abmessungen, die du anzeigst — nicht größer.
  • Sperre das Seitenverhältnis, damit das Bild nicht verzerrt wird.
  • Skaliere zuerst, dann komprimiere, falls du auch eine kleinere Datei brauchst.

Im Browser — nichts wird hochgeladen

Fazit: Verkleinern erhält die Qualität; Vergrößern kann sie nicht wiederherstellen. Beginne groß, verkleinere passend, und greife zum Vektor, wenn ein Logo wachsen soll.

Vektor vs. Raster: die eigentliche Trennlinie

Ob Skalieren schadet, hängt davon ab, welche Art Bild du hast.

  • Raster-Bilder (PNG, JPG, WebP) sind ein festes Pixelraster. Vergrößerst du sie, gibt es schlicht keine zusätzlichen Details zu zeigen, also werden sie unscharf.
  • Vektor-Bilder (SVG) sind als Mathematik gespeichert — Punkte, Linien und Kurven — und werden in jeder Größe perfekt neu gezeichnet. Logos, Icons und einfache Illustrationen gehören hierher; Fotos können keine Vektoren sein.

Muss ein Logo immer wieder wachsen, skaliere nicht länger das PNG, sondern zeichne es einmal als SVG nach.

Das ist auch der praktische Grund, vor dem Verkleinern zu prüfen, welche Art Bild du hast. Die Breite eines Fotos zu halbieren brachte -50%; dasselbe bei einem Screenshot -15%. Ist das Ziel eine kleinere Datei statt kleinerer Abmessungen, ist Komprimieren meist der bessere Hebel.

Warum Vergrößern unscharf wird: Resampling

Jede Skalierung resampelt das Pixelraster — sie berechnet jeden neuen Pixel per Interpolation aus den alten:

  • Nearest-Neighbor — am schnellsten, klotzig; nur für Pixel-Art.
  • Bilinear / bikubisch — weiche Übergänge; bikubisch ist der übliche Standard.
  • Lanczos — am schärfsten beim Verkleinern detailreicher Fotos.

Beim Verkleinern gibt es echte Pixel zum Mitteln, also bleibt es scharf. Beim Vergrößern müssen die Pixel dazwischen erfunden werden, und erfundene Details wirken immer weich. Genau deshalb funktioniert „Enhance” nur im Film.

Erst zuschneiden, dann skalieren

Brauchst du nur einen Teil des Bildes, schneide ihn zu, bevor du verkleinerst. Zuerst zuschneiden hält die maximale Zahl echter Pixel im wichtigen Bereich, statt Auflösung an Teile zu verschwenden, die du ohnehin verwirfst.

Exportformat und der Qualitätskompromiss

FormatAm besten fürHinweis
JPGFotosVerlustbehaftet; 80–85 % Qualität ist der Sweet Spot
PNGFlache Grafiken, TransparenzVerlustfrei, größere Dateien
WebPBeidesKleiner als JPG/PNG, breit unterstützt
AVIFBeidesAm kleinsten, neuere Unterstützung
SVGLogos, IconsVektor, beliebig skalierbar

Ein JPG immer wieder neu zu speichern häuft Kompressionsverluste an („Generationsverlust”). Einmal skalieren, dann einmal in Zielqualität exportieren. Unsicher, was passt? Siehe das beste Bildformat fürs Web.

Das beantwortet auch „womit soll ich exportieren”. Erst skalieren, dann komprimieren ist strikt besser als umgekehrt: Bei 967.2 KB hat der Resizer die Pixel schon entfernt, für die der Kompressor Bits ausgegeben hätte. Umgekehrt bezahlt man dafür, Detail zu kodieren, das die Skalierung anschließend wegmittelt.

FAQ

Reduziert Skalieren immer die Qualität?

Nein. Verkleinern erhält die Qualität — du verwirfst Pixel, die du nicht brauchtest. Vergrößern senkt sie, weil die zusätzlichen Pixel geraten sind.

Welches Format erhält die meiste Qualität?

Für Fotos ein hochwertiges WebP oder AVIF; für flache Grafiken oder Transparenz PNG; für alles, was skalieren muss, ein Vektor-SVG.