Skip to content
user@convertitive:~$convertitive

Guide

Bilder ohne Qualitätsverlust skalieren

Verkleinern ist meist sicher. Vergrößern nicht. Alles andere ist die Wahl der Interpolation und des Formats.

By Published Updated

“Ohne Qualitätsverlust” ist asymmetrisch. Das Verkleinern – ein Bild kleiner machen – verliert per Definition Information (Sie haben weniger Pixel als die Quelle), aber der Verlust ist meist unsichtbar, wenn Sie einen guten Algorithmus verwenden. Das Vergrößern – es größer machen – erfindet Details, die nicht da waren, und das Ergebnis siehtimmer weicher aus als eine Quelle in nativer Auflösung. Dieser Ratgeber erklärt, welche Workflows die sichtbare Qualität erhalten und welche nicht.

Verkleinern: meist sicher

Wenn Ihre Quelle 3000×2000 Pixel hat und Sie 600×400 fürs Web brauchen, werfen Sie 96 % der Pixel weg. Solange der Verkleinerungsalgorithmus die verworfenen Pixel in die behaltenen mittelt (statt nur jedes N-te Pixel abzutasten), sieht das Ergebnis korrekt aus.

Moderne Browser, Photoshop und spezialisierte Tools verwenden standardmäßig bilineare oder bikubischeInterpolation. Für aggressive Verkleinerungen (> 4-fache Reduktion) verketten sie mehrere Durchgänge, um Aliasing zu vermeiden.

Wenn das Verkleinern schiefgeht: Nearest-Neighbour-Abtastung (die Pixel-Art erhält, aber Fotos ausgefranst erscheinen lässt) oder einstufiges Verkleinern bei extremen Verhältnissen (das Moiré-Muster verursacht). Fast kein Verbraucher-Tool verwendet Nearest-Neighbour standardmäßig; Sie müssten es ausdrücklich anfordern.

Vergrößern: verliert immer

Ein 100×100-Pixel-Bild hat 10.000 Informationsstücke. Es auf 400×400 zu vergrößern, erzeugt 160.000 Pixel – 150.000 davon hat der Algorithmus durch Interpolation zwischen Nachbarn erfunden. Das Ergebnis ist mathematisch eine Vermutung.

Drei Varianten des Vergrößerns:

  • Bilinear / bikubisch. Standard-Interpolation. Weiche, leicht unscharfe Ergebnisse. Der Standard, wenn Sie die <img>-Größe in CSS ändern.
  • Lanczos. Schärfer als bikubisch, erhält Kanten besser. Manche Tools verwenden es standardmäßig für 2-fach-Vergrößerungen.
  • KI-Upscaling.Topaz Gigapixel, Adobes Super Resolution, ESRGAN-basierte Tools. Trainiert an Millionen hochauflösender Beispiele; halluzinieren plausible Details. Die Ergebnisse sehen besser aus als Interpolation, sind aber nicht tatsächlich genau – die “Details” sind erfunden.

Praktische Regel: ein finales Asset nie vergrößern. Finden Sie eine höher aufgelöste Quelle. Wenn die Quelle wirklich nicht existiert (ein altes Foto, ein winziges Logo), ist KI-Upscaling die beste der schlechten Optionen.

Das Format beeinflusst die sichtbare Qualität

Selbst bei perfektem Skalieren bestimmt das Format, in dem Sie speichern, was übrig bleibt. Siehe unseren PNG-vs.-JPG-vs.-WebP-Ratgeber für die vollständige Aufschlüsselung; die Kurzfassung:

  • PNG — verlustfrei. Skalieren und dann als PNG speichern erhält das skalierte Bild exakt. Für Logos, Illustrationen, Screenshots mit scharfem Text.
  • JPEG @ 90 % — bei Fotos in typischen Anzeigegrößen visuell nicht von PNG unterscheidbar. Qualitätseinbußen liegen nicht am Skalieren, sondern an der JPEG-Kodierung.
  • WebP @ 80 % — bei gleichwertiger Qualität 25–35 % kleiner als JPEG. Der Web-Standard für Fotos seit 2020.
  • GIF — auf 256 Farben begrenzt; skalierte GIFs von Fotos sehen posterisiert aus. Stattdessen in PNG oder WebP umwandeln.

Der Workflow zum Schutz des Originals

Sobald Sie skalieren und speichern, können Sie die ursprünglichen Details nicht wiederherstellen. Also:

  1. Das Original archivieren. PNG oder RAW in Originalauflösung. Verschlagworten/ablegen, damit das zukünftige Ich es wiederfindet.
  2. Ableitungen erzeugen. Web-Größen aus dem Original, nicht aus einer zuvor skalierten Kopie. Jede Runde aus Skalieren und Speichern häuft Kompressionsartefakte an; frisch vom Original zu starten vermeidet das.
  3. Erzeugen Sie die Größen, die Sie tatsächlich brauchen. Üblich: @1× für klassische Bildschirme, @2× für Retina, @3× für High-End-Telefone. Über <img srcset> oder <picture> ausliefern.
  4. Bearbeiten Sie ein JPEG nicht erneut. Jedes Speichern verliert weitere Information. Wenn Sie nachträglich farbkorrigieren müssen, tun Sie es am Original und exportieren neu.

Browserseitiges vs. desktopseitiges Skalieren

Moderne Browser skalieren hochwertig in Canvas2D – was unser Bild-Skalierungs-Tool verwendet. Die Ergebnisse sind für die meisten Fälle visuell identisch zu Photoshops bilinear/bikubisch. Für aggressive Verkleinerungen (> 8-fache Reduktion) hat Photoshops “Bildgröße” mit Bikubisch schärfer noch einen leichten Vorsprung beim Erhalt feiner Details.

Für Stapelverarbeitung oder ungewöhnliche Interpolationsbedürfnisse geben Desktop-Tools (ImageMagick, GraphicsMagick, oxipng) feinere Kontrolle als Browser-Tools. Die meisten Workflows brauchen diese Kontrolle nicht; der Browser reicht.

Häufige Fehler

  • In CSS statt im Code skalieren. Ein 4000×3000-Bild, das mit width=400 in CSS ausgeliefert wird, ist über die Leitung immer noch 4000×3000 Bytes. Der Browser kann skalieren, aber das Netz hat bereits bezahlt. Skalieren Sie beim Export, nicht bei der Anzeige.
  • Retina vergessen. Ein 200×200-Bild auf einem @2×-Bildschirm wird unscharf gerendert. Mit 400×400 exportieren, als 200×200 CSS-Pixel anzeigen.
  • Durch Vergrößern zuschneiden. Wenn Sie auf 25 % eines Bildes zuschneiden, haben Sie ein Bild mit einem Viertel der Auflösung. Es auf die Originaldimensionen zu vergrößern vergrößert nur die Artefakte. Zuerst zuschneiden, dann die niedrigere Auflösung als neue Obergrenze akzeptieren.

Für das Live-Tool siehe unseren reinen Browser-Bildskalierer und den begleitenden Bildkompressor. Beide laufen vollständig in Ihrem Browser – Dateien verlassen die Seite nicht.

Durchgerechnetes Beispiel: ein Hero-Bild für ein Retina-Notebook

Zielplatz im Design: 1200 × 600 CSS-Pixel. Quelle: eine 24-Megapixel-DSLR-Aufnahme, 6000 × 4000 Pixel, sRGB-JPEG.

  • Ausgabedimensionen wählen. Für @2×-Retina 2400 × 1200 Gerätepixel exportieren. Für Telefone mit @3×-DPR 3600 × 1800 exportieren. <picture> mit srcset verwenden, um das richtige auszuliefern.
  • Zuschneiden, dann neu abtasten. Die 6000 × 4000 auf einen 2:1-Bereich zuschneiden (z. B. 6000 × 3000), dann mit Lanczos3 in ImageMagick auf 2400 × 1200 herunter abtasten: magick input.jpg -filter Lanczos -resize 2400x1200^ -gravity center -extent 2400x1200 [email protected].
  • WebP mit Qualität 80 kodieren. cwebp -q 80 [email protected] -o [email protected]. Erwartete Dateigröße: ~85–130 KB bei dieser Auflösung. Ein äquivalentes JPEG q=85 läge bei ~180–220 KB.
  • Eine AVIF-Variante für unterstützende Browser hinzufügen. avifenc --speed 6 -q 60 [email protected] [email protected] → weitere 25–40 % kleiner als WebP.
  • Gesamtnutzlast: ~95 KB AVIF für moderne Browser, ~110 KB WebP-Fallback, ~200 KB JPEG-Legacy-Fallback. Verglichen mit dem Ausliefern des unskalierten 6-MB-DSLR- Originals: 60-mal kleiner.

Häufige Fehler

  • JPEG nach jeder Bearbeitung neu speichern.Jede JPEG-Kodierung ist verlustbehaftet. Nach 5–10 Hin-und-Her-Durchgängen werden die Artefakte sichtbar. Beginnen Sie Bearbeitungen stets vom Original (PNG/PSD/RAW) und behandeln Sie das JPEG nur als finalen Export.
  • Versehentlich Nearest-Neighbour verwenden.CSS image-rendering: pixelatedoder PowerPoints “Bild einfügen, nicht neu abtasten” umgehen beide den glatten Skalierer. Pixel-Art braucht Nearest-Neighbour; Fotos nie.
  • Den Alphakanal vergessen. Ein PNG mit Transparenz mit einem nicht vormultiplizierten Algorithmus zu skalieren, erzeugt dunkle Ränder an den Alphakanten. Vor dem Resampling vormultiplizieren, dann rück-multiplizieren. ImageMagicks -alpha set erledigt das mit den richtigen Flags.
  • DemimageSmoothingQuality="high" des Browsers einheitlich vertrauen. Safari, Firefox und Chrome setzen das unterschiedlich um. Für pixelgenaue Arbeit das Verkleinern serverseitig durchführen (sharp, ImageMagick) und das fertige Asset ausliefern.
  • “Photoshop bikubisch schärfer” als universell am besten behandeln. Bikubisch schärfer erzeugt Ringing-Artefakte an kontrastreichen Kanten. Für Text Lanczos verwenden. Für Fotos bei mäßigen Verkleinerungen ist bilinear mit etwas Schärfen oft visuell gleichwertig und viel schneller.

Sonderfälle

  • SVG. Vektorgrafiken brauchen kein Resampling – sie rendern in jeder Größe verlustfrei neu. Die einzige Skalierungssorge ist das Hinting für Subpixel-Positionierung und sicherzustellen, dass Strichbreiten bei der Zielgröße nicht unter 1 px kollabieren.
  • Animierte GIF/WebP. Resampling pro Frame ohne zeitliche Kohärenz erzeugt Flackern zwischen den Frames. Verwenden Sie ffmpeg mit einem temporalen Filter oder wandeln Sie in ein modernes animiertes Format um (WebP, AVIF, AV1).
  • HDR-Bilder. 10-Bit- und 12-Bit-PQ/HLG- kodierter Inhalt braucht HDR-fähige Resampler; ein gewöhnlicher 8-Bit-Resampler zerquetscht Lichter und Schatten. OpenColorIO- und ACES-Workflows handhaben das.
  • Druck mit >300 PPI auf ungestrichenem Papier. Der Tonwertzuwachs auf ungestrichenem Papier sättigt sich um 250 PPI; die Quelle auf 600 PPI hochzurechnen sind vergeudete Bytes. Richten Sie sich nach der Druckkapazität, nicht nach den Datei-Metadaten.

Quellen: ITU-R BT.601 (Empfehlungen zu Verkleinerungsfiltern); WebP-Kodierungspapier (Google, 2010); Mitchell & Netravali (SIGGRAPH 1988); Mozilla Developer Network “Responsive images”-Ratgeber.

Frequently asked questions

Kann ich ein Bild ohne Qualitätsverlust skalieren?
Das Verkleinern eines Bildes ist weitgehend verlustfrei, wenn Sie einen hochwertigen Resampling-Filter wie Lanczos oder Mitchell-Netravali verwenden, weil Sie vorhandene Pixel mitteln. Das Vergrößern verliert immer an Qualität, weil neue Pixeldaten erfunden werden müssen; KI-Upscaling-Tools (Gigapixel, waifu2x) können plausible Details synthetisieren, aber dennoch keine Information wiederherstellen, die nie da war.
Welcher Resampling-Algorithmus ist der beste, um Fotos zu skalieren?
Lanczos (sinc-basiert) und Mitchell-Netravali liefern die schärfsten Ergebnisse beim Verkleinern von Fotos mit minimalem Aliasing. Bikubisch ist in den meisten Anwendungen ein guter Standard. Bilinear ist schneller, aber unschärfer. Verwenden Sie nie Nearest-Neighbour für Fotos – es erzeugt das 'verpixelte' Erscheinungsbild, das für falsch skalierte Bilder typisch ist.
Auf welche Auflösung sollte ich Bilder fürs Web skalieren?
Für Standardbildschirme ist die breiteste Inhaltsspalte typischerweise 800–1200 px. Für HiDPI-Bildschirme (Retina) mit 2-facher Pixeldichte stellen Sie über das srcset-Attribut eine 2-fach-Version (1600–2400 px) bereit. Die meisten modernen Web-Bilder sollten als WebP exportiert werden, das bei gleicher visueller Qualität 25–35 % kleiner ist als JPEG.
Wie skaliere ich Bilder stapelweise unter Windows oder macOS?
Unter macOS verarbeitet die Vorschau über Werkzeuge > Größe anpassen mehrere Bilder, wenn mehrere Dateien geöffnet sind, oder Sie nutzen Automator. Unter Windows bietet PowerToys Image Resizer Stapelverkleinerung per Rechtsklick. Zum Skripten skaliert der Befehl mogrify von ImageMagick Hunderte Dateien mit einem einzigen Terminalbefehl.
Ändert das Skalieren eines Bildes seine Dateigröße?
Ja. Beide Dimensionen zu halbieren reduziert die Pixelzahl um 75 %, was die JPEG-Dateigröße je nach Inhalt und Kompressionseinstellungen typischerweise um 60–80 % verringert. Die Dateigröße hängt auch vom Ausgabeformat und der Qualitätseinstellung ab, nicht nur von den Pixeldimensionen.
Was ist der Unterschied zwischen Resampling und Neukomprimierung eines Bildes?
Resampling ändert die Pixeldimensionen (Pixel hinzufügen oder entfernen). Neukomprimierung kodiert eine vorhandene Datei mit einer anderen Qualitätsstufe neu, ohne die Dimensionen zu ändern. Jede verlustbehaftete Neukomprimierung eines JPEG verschlechtert die Qualität, selbst bei gleicher Qualitätseinstellung – arbeiten Sie beim Skalieren stets vom Original mit der höchsten Auflösung.

Sources & references

Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.

Related

Published May 16, 2026 · Last reviewed May 31, 2026