Kostenlose Online-Bildgrößenänderung

So ändern Sie die Größe eines Bildes

1. Wählen Sie eine Bilddatei oben aus oder legen Sie sie ab.
2. Wählen Sie eine voreingestellte Größe oder geben Sie individuelle Breite und Höhe in Pixeln ein.
3. Schalten Sie das Schloss-Symbol um, um das Original-Seitenverhältnis beizubehalten oder zu ignorieren.
4. Klicken Sie auf "Größe ändern", um das Bild in Ihrem Browser zu verarbeiten.
5. Laden Sie das größenveränderte Bild sofort herunter.

Was «Größenänderung» tatsächlich mit Ihren Pixeln macht

Die Größenänderung eines Bildes ist nicht dieselbe Operation wie sein Zuschnitt oder seine Kompression. Zuschneiden verwirft Pixel an den Rändern und lässt den Rest unverändert. Komprimieren behält jeden Pixel, codiert ihn aber dichter. Größenänderung verändert buchstäblich die Pixelanzahl: Ein Quellbild mit 4000x3000 Pixeln, neu skaliert auf 1920x1440, muss den Großteil seiner Pixel verwerfen und neue auswählen, um dieselbe Szene mit einem Viertel der Auflösung darzustellen. Die mathematische Operation, die entscheidet, welche neuen Pixel geschrieben werden, heißt Resampling, und die Qualität der Neuskalierung hängt fast vollständig davon ab, welcher Resampling-Algorithmus läuft.

Die vier gängigen Resampling-Algorithmen sind Nächster-Nachbar (den einzigen nächstgelegenen Quellpixel wählen, harte Kanten bleiben erhalten, blockartig bei Vergrößerung, die einzige richtige Wahl für Pixel-Art), Bilinear (lineare Mischung der 4 umgebenden Quellpixel, schnell und mittelmäßig), Bikubisch (Keys-1981-Kubikkern über 16 umgebende Pixel, jahrzehntelang die Photoshop-Standardeinstellung) und Lanczos (Sinc-Funktion gefenstert durch einen Lanczos-Kern, schärfste Ausgabe, leichtes Ringing nahe harter Kanten, was ImageMagick und Sharp standardmäßig für Verkleinerung verwenden). Dieses Werkzeug setzt imageSmoothingQuality der Canvas-API auf «high», was Chrome und Firefox auf dem Desktop als Kern der Lanczos-Klasse interpretieren und Safari als Kern der bikubischen Klasse. Der Browser entscheidet; JavaScript kann «high» anfordern, aber nicht den genauen Filter wählen.

Verkleinerung und Vergrößerung sind keine symmetrischen Probleme. Verkleinerung verwirft Information auf kontrollierte Weise; der Resampler entscheidet, welche Details erhalten bleiben, und ein guter Algorithmus bewahrt die sichtbare Struktur der Quelle. Vergrößerung fügt Pixel hinzu, die nie abgetastet wurden, und die Informationstheorie (das Nyquist-Shannon-Abtasttheorem) sagt, dass Frequenzen, die nicht im Originalsignal waren, nicht zurückgewonnen werden können. Das Beste, was ein klassischer Resampler tun kann, ist sanft zwischen bekannten Abtastwerten zu interpolieren, was immer weich aussieht. Für echte Vergrößerung ist die moderne Alternative KI-Superauflösung (Real-ESRGAN, waifu2x, Adobe Super Resolution, Topaz Gigapixel), die plausible Details mit neuronalen Netzen halluziniert, die auf Millionen ähnlicher Bilder trainiert wurden. Das passiert hier nicht. Dieses Werkzeug macht ehrliche Interpolation.

Wie dieses Werkzeug unter der Haube funktioniert

Die gesamte Pipeline ist die HTML5-Canvas-2D-API. Keine externe Bibliothek wird geladen. Wenn Sie ein Bild ablegen, übergibt die File-API des Browsers die Bytes an ein neues HTMLImageElement; der eingebaute JPEG-, PNG- oder WebP-Decoder des Browsers verwandelt den Bitstrom in einen Pixel-Puffer. Das Seitenverhältnis wird aus der natürlichen Breite und Höhe berechnet. Ein neues <canvas>-Element wird im Speicher mit den Zielmaßen erstellt, die Sie festgelegt haben, und ctx.drawImage(image, 0, 0, Zielbreite, Zielhöhe) zeichnet die skalierte Quelle in das Ziel. Da das Ziel andere Maße als die Quelle hat, ruft der Browser seinen Resampling-Kern auf, um jeden neuen Pixel zu berechnen.

Vor dem drawImage-Aufruf setzt das Werkzeug ctx.imageSmoothingEnabled = true und ctx.imageSmoothingQuality = «high». Das erste Flag schaltet die Glättung ein (Nächster-Nachbar aus); das zweite weist den Browser an, seinen Filter mit höchster Qualität zu verwenden. Die WHATWG-Canvas-Spezifikation überlässt den genauen Filter der Implementierung. Chrome und Firefox auf dem Desktop verwenden Kerne der Lanczos-Klasse bei «high»; Safari verwendet einen Kern der bikubischen Klasse; mobile Builds können unter Speicherdruck auf Bilinear herabstufen. Nichts davon ist für JavaScript sichtbar. Nach dem Zeichnen serialisiert canvas.toBlob(mimeType, Qualität) das Canvas zu einem Blob im gewählten Ausgabeformat: PNG (verlustfreies DEFLATE, das Qualität-Argument wird ignoriert), JPEG (verlustbehaftetes DCT bei Qualität 0,92) oder WebP (verlustbehaftet oder verlustfrei bei Qualität 0,92). Der Blob wird zu einer herunterladbaren Objekt-URL.

Keine Bytes verlassen den Tab. Das Bild wird in Ihrem Browser dekodiert, in Ihrem Browser resampelt und in Ihrem Browser neu codiert. Die heruntergeladene Datei wird lokal erzeugt und vom normalen Download-Mechanismus des Browsers auf Ihrem Gerät gespeichert. Der einzige Netzwerkverkehr ist das anfängliche Laden der Seite und das kleine image-resizer.js-Skript (wenige Kilobyte). Schalten Sie Ihren Browser nach dem Laden der Seite in den Flugmodus, und das Größenänderungswerkzeug funktioniert weiter mit jeder lokalen Bilddatei, die Sie auswählen. Öffnen Sie während einer Größenänderung den Netzwerk-Tab der DevTools: Es gibt null Anfragen, die Bilddaten tragen. Die gesamte Architektur ist absichtlich minimal, weil die Canvas-API für diese Aufgabe bereits leistungsfähig genug ist; eine Bibliothek einzubinden würde nur Bytes und Komplexität hinzufügen, ohne die Ausgabe zu ändern.

Eine kurze Geschichte des Bild-Resamplings

• Optische Vergrößerer, die vordigitale Ära. Vor der Digitalfotografie bedeutete «vergrößern» eines Fotos, ein Negativ durch einen optischen Vergrößerer auf ein lichtempfindliches Papierblatt zu projizieren. Das Objektiv führte das Resampling kontinuierlich durch, ohne Quantisierung, aber mit den optischen Grenzen des Objektivs selbst. Die ersten kommerziellen Vergrößerer stammen aus den 1860er Jahren. Resampling als mathematische Operation wurde erst zu einer sinnvollen Frage, als Bilder als Pixelraster statt als kontinuierliche Emulsion existierten.
• Bikubische Interpolation, 1973-1981. Robert G. Rifman veröffentlichte 1973 bei TRW Defense and Space Systems einen bikubischen, spline-basierten Bild-Resampling-Algorithmus, geschrieben für die Neuskalierung von Satellitenbildern. Die kanonische Formulierung kam 1981 von R. G. Keys: «Cubic Convolution Interpolation for Digital Image Processing» in IEEE Transactions on Acoustics, Speech, and Signal Processing. Jede Bildbibliothek, die heute «bikubisch» sagt, meint den Keys-Kubikkern, ausgewertet über eine 4x4-Nachbarschaft.
• Mitchell-Netravali-Filter, 1988. Don P. Mitchell und Arun N. Netravali veröffentlichten «Reconstruction Filters in Computer Graphics» auf der SIGGRAPH '88 und stellten eine parametrisierte Familie kubischer Filter vor, die über zwei Koeffizienten B und C einstellbar ist. Der kanonische «Mitchell»-Filter (B=C=1/3) opfert ein wenig Schärfe für sehr geringes Ringing und wurde zu einem Standardvorgabewert für Verkleinerung in High-End-Bildbibliotheken wie libvips.
• Wählbare Filter in ImageMagick, 1990er. John Cristy veröffentlichte ImageMagick (ursprünglich 1987, öffentlich 1990) mit wählbaren Resampling-Filtern als erstklassigem Feature. Mitte der 1990er konnten Fotografen und DTP-Fachleute Lanczos, Mitchell, Catmull-Rom, Hermite und Gauß am selben Quellbild vergleichen und je nach Anwendungsfall wählen. Die Option -filter Lanczos von ImageMagick ist bis heute ein gängiges Rezept in Produktionspipelines.
• HTML5-Canvas-Größenänderung, 2008-2017. Die WHATWG-Canvas-Spezifikation standardisierte 2008 drawImage() mit impliziter Skalierung, und die 9-Argumente-Form (die hier verwendete) ist seither in jedem Browser. Das Attribut imageSmoothingQuality (low / medium / high) kam später: Chrome 54 im Jahr 2016, Firefox 51 im Jahr 2017, Safari 11.1 im Jahr 2018. Davor war die Größenänderung browserseitig in jeder Implementierung faktisch nur bilinear, selbst wenn das Werkzeug «hohe Qualität» anforderte.
• KI-Superauflösung, 2018-2021. ESRGAN (Wang et al., 2018) zeigte, dass generative adversarial networks plausible Details für vergrößerte Fotos synthetisieren konnten. Real-ESRGAN (Wang et al., 2021) machte die Technik für reale Eingaben praxistauglich; waifu2x (nagadomi, 2015) hatte zuvor eine CNN-basierte Variante für Anime-Kunst abgestimmt. Adobe Camera Raw fügte 2021 Super Resolution hinzu. Diese Werkzeuge ersetzen das klassische Resampling für Verkleinerung nicht; sie zielen auf den Fall, in dem man ausdrücklich halluzinierte Details statt sanfter Interpolation will.

Gängige Bildgrößen

• 1920 x 1080 · Full HD, Standard für Web-Hintergründe und YouTube-Thumbnails.
• 1080 x 1080 · Instagram-Feed-Posts (quadratisches Format).
• 1080 x 1350 · Instagram-Hochformat-Posts (nehmen mehr Platz im Feed ein).
• 1280 x 720 · HD, gut für Blog-Header und Präsentationen.
• 800 x 600 · Klassische Webbild-Größe, gut für E-Mail-Newsletter.
• 400 x 400 · Profilbilder und Avatar-Bilder.
• 16 x 16 / 32 x 32 · Favicon-Größen für Websites.

Echte Größenänderungs-Workflows

• Größen für soziale Netzwerke. Jede Social-Media-Plattform hat bevorzugte Abmessungen für Feed-Posts, Stories, Banner und Vorschaubilder. Im falschen Format hochzuladen bedeutet, dass die Plattform an Ihrer Stelle zuschneidet oder schwarze Balken einfügt, oft schlecht. Übliche Zielmaße 2026: Instagram-Feed 1080x1080 (quadratisch) oder 1080x1350 (Hochformat, aktuell das engagementstärkste Standbild-Format, weil es etwa 25 % mehr vertikalen Bildschirm auf dem Handy belegt), Instagram Stories und Reels 1080x1920, YouTube-Vorschau 1280x720, Twitter/X-Karte 1200x675, Facebook- und LinkedIn-Linkvorschau (Open Graph) 1200x630, Pinterest-Standard-Pin 1000x1500, TikTok 1080x1920. Einmal vor dem Hochladen zu skalieren garantiert das gewünschte Ergebnis; rohe Fotos hochladen überlässt die Wahl der Plattform.
• Web-Optimierung und Core Web Vitals. Der Lighthouse-Audit «Properly size images» fällt bei jedem Bild durch, dessen natürliche Abmessungen viel größer sind als die angezeigten. Ein Hero-Bild, das mit 1200 Pixeln Breite angezeigt, aber mit 4000 Pixeln ausgeliefert wird, verschwendet Bandbreite und schadet Largest Contentful Paint, dem sichtbarsten Core Web Vital. Die Abhilfe ist, die Quelle ungefähr auf die Anzeigegröße zu skalieren, oder auf 2x für Retina-Bildschirme, und über das moderne srcset-Attribut unterschiedliche Größen an unterschiedliche Viewports auszuliefern. Ein einzelnes Hero-Bild von 4000 auf 1920 Pixel zu verkleinern, schneidet die Dateigröße typischerweise um 60 bis 80 %, und der LCP-Wert folgt direkt.
• E-Mail-Anhänge. Gmail, Outlook und Apple Mail begrenzen Anhänge alle auf 25 MB pro Nachricht. Ein Ordner mit Handyfotos in voller Auflösung kann die Grenze schon mit fünf oder sechs Bildern erreichen. Die lange Kante auf 1920 Pixel zu skalieren bringt jedes Foto typischerweise unter 1 MB, während es auf jedem Laptop- oder Handybildschirm perfekt ansehbar bleibt. Zwanzig Fotos mit 1920 Pixeln passen bequem in eine einzelne Nachricht; dieselben zwanzig in voller Auflösung würden drei oder vier Sendungen oder einen Cloud-Sharing-Link erfordern.
• Profilbilder und Avatare. Die meisten sozialen Plattformen wollen 400x400 bis 800x800 Pixel für Profilbilder und zeigen sie als Kreis an. Lokal vor dem Hochladen zu skalieren, lässt Sie den quadratischen Zuschnitt steuern (kombiniert mit dem Bildzuschneider dieses Werkzeugs) und die genaue Pixelanzahl, statt der Plattform den willkürlichen Zuschnitt zu überlassen. Die Faustregel für Retina-Bildschirme ist, in doppelter Anzeigegröße hochzuladen, also sollte ein 200-Pixel-Avatar eine Quelle von mindestens 400x400 haben.
• Favicon- und App-Icon-Erzeugung. Moderne Browser wollen 16x16 (Browser-Tab) und 32x32 (Tab mit hoher Pixeldichte), Apple-Touch-Icons wollen 180x180, Windows-Kacheln wollen 270x270, und Progressive-Web-App-Manifeste enthalten typischerweise 192x192 plus 512x512. Eine gut gestaltete quadratische Quelle (typischerweise 512x512 PNG ohne feine Details) auf jedes dieser Ziele zu skalieren, ist der kanonische Workflow, um auf allen Plattformen scharfe Icons zu erzeugen.
• Druckvorbereitung. Ein 4x6-Zoll-Fotoabzug bei 300 DPI braucht 1200x1800 Pixel Quellauflösung. Ein 16x20-Zoll-Poster braucht 4800x6000. Ein 8x10-Zoll-Abzug bei 240 DPI (Zeitungsqualität) braucht 1920x2400. Die Quelle auf die richtige Pixelanzahl für die beabsichtigte Druckgröße zu skalieren bedeutet, dass das Drucklabor nicht stellvertretend automatisch resampeln muss, was unvorhersehbare Filterwahlen und unbekannte Qualitätseinstellungen vermeidet. Kombinieren Sie die skalierte Pixelanzahl mit den richtigen DPI-Metadaten im Druckdialog, und das Ergebnis stimmt mit dem überein, was Sie auf dem Bildschirm gesehen haben.

Häufige Fallstricke und was sie bedeuten

• Vergrößerung sieht immer unscharf aus. Eine 200 Pixel breite Vorschau, auf 1920 Pixel vergrößert, wirkt weich, egal welcher Browser oder welche Qualitätseinstellung verwendet wurde. Klassische Interpolation (bikubisch, Lanczos, Mitchell) kann nur zwischen bekannten Abtastwerten glätten; sie kann die fehlenden Details nicht erfinden. Die informationstheoretische Obergrenze wird durch die Nyquist-Frequenz der Quelle gesetzt. Für echte Vergrößerung mit scharfer Ausgabe lassen Sie die Quelle durch ein Superauflösungs-Werkzeug (Real-ESRGAN, Topaz Gigapixel AI, Adobe Super Resolution in Camera Raw) laufen, das plausible Details mit einem neuronalen Netz halluziniert, das auf Millionen ähnlicher Bilder trainiert wurde.
• Das Entsperren des Seitenverhältnisses streckt das Foto. Mit deaktiviertem Schloss-Symbol und uneinheitlicher Breite und Höhe ist die Ausgabe mathematisch gestaucht oder gestreckt. Das Werkzeug ist standardmäßig gesperrt; das Entsperren ist eine bewusste Aktion. Wenn Sie ein Zielverhältnis statt des natürlichen Verhältnisses der Quelle erreichen müssen, ist der richtige Weg, zuerst zuzuschneiden (verwenden Sie den Bildzuschneider) und dann das zugeschnittene Ergebnis zu skalieren. So bleiben die Proportionen korrekt und das Motiv unverzerrt.
• Pixel-Art wird durch die Glättung verwischt. Die standardmäßig eingeschaltete Glättung dieses Werkzeugs zerstört 8-Bit-Sprites, Pixel-Gitter-Icons und jede Grafik, bei der die harten Kanten zwischen Farbzellen die Pointe sind. Resampling mit einem beliebigen Glättungsfilter (bilinear, bikubisch, Lanczos) verwandelt diese Kanten in Verläufe. Für Pixel-Art ist die richtige Antwort die Nächster-Nachbar-Größenänderung, die jede harte Kante bewahrt. Browserseitig setzen Sie image-rendering: pixelated in CSS auf dem angezeigten Bild. Für einen tatsächlichen Export in einer neuen Größe verwenden Sie ein Desktop-Werkzeug: -filter Point von ImageMagick, GIMPs Interpolation auf «Keine», oder spezialisierte Editoren wie Aseprite.
• Mehrfaches Skalieren verschlechtert JPEG und WebP. Jeder Hin-und-Rückweg über das Canvas codiert JPEG oder WebP bei Qualität 0,92 neu. Der erste Durchlauf ist visuell nicht wahrnehmbar; der dritte oder vierte führt in flachen Bereichen sichtbare Artefakte ein und macht feine Details weicher. Skalieren Sie immer aus der hochauflösendsten Master-Version, die Sie haben, nicht aus einer Kopie, die Sie gestern exportiert haben. Wenn Sie iterieren müssen (1920 ausprobieren, dann 1600, dann 1280), gehen Sie jedes Mal zur Originalquelle zurück, statt Skalierungen aneinanderzuhängen.
• Druck-DPI ist nicht dasselbe wie Pixelmaße. Viele Leute erwarten, dass ein Feld «DPI» oder «Auflösung» die Druckgröße steuert. Dieses Werkzeug skaliert nur über die Pixelanzahl. Die DPI-Markierung in einer JPEG- oder PNG-Datei ist beratende Metadaten für Drucker, die ihnen sagen, wie viele Pixel-pro-Zoll auf Papier zu rendern sind. Pixelmaße und DPI sind unabhängig: Ein 1920x1080-Bild hat 1920x1080 Pixel bei jeder DPI-Einstellung. Um die Druckgröße zu steuern, müssen Sie zusätzlich die richtige DPI in einem Druckdialog oder in einem Desktop-Fotowerkzeug einstellen (das Druckfenster der Vorschau, das Dialogfeld Bildgröße in Photoshop mit ausgeschaltetem «Bild neu berechnen»).
• Sehr große Bilder können einen mobilen Browser-Tab abstürzen lassen. Das Dekodieren eines Bildes zu einem Canvas braucht RAM proportional zu seinen Abmessungen: Ein 24-Megapixel-Foto (6000x4000 Pixel) braucht etwa 96 MB allein für den RGBA-Quellpixel-Puffer, plus einen separaten Puffer für das Ziel-Canvas, plus den Arbeitsspeicher des JPEG- oder WebP-Codierers. Mobile Geräte mit 1 bis 2 GB für den Browser verfügbarem RAM können den Tab vom Betriebssystem beendet sehen, bevor die Codierung fertig ist. Skalieren Sie sehr große Fotos in einem Desktop-Browser, oder in Etappen (zuerst 50 %, dann erneut 50 %), damit jeder Schritt in den verfügbaren Speicher passt.

Datenschutz: Bilder verlassen Ihr Gerät nie

Jeder cloud-basierte Bildgrößenänderer (iLoveIMG, ResizeImage.net, ResizePixel, BeFunky, Fotor, der Resize-Endpunkt von Pixlr, die Dutzenden «Bild online skalieren»-Dienste) lädt Ihre Datei auf die Server des Anbieters hoch, führt seinen Skalierungsalgorithmus aus und gibt das kleinere Bild als Download zurück. Die Datenschutzauswirkungen sind nicht trivial, weil Fotos regelmäßig identifizierbare Inhalte enthalten: Gesichter, im Hintergrund sichtbare Adressen, Screenshots interner Oberflächen oder vertraulicher Dokumente, Fotos von Kindern, Fotos in privaten Räumen, Scans von Dokumenten mit personenbezogenen Daten. Die meisten Anbieter veröffentlichen Datenschutzrichtlinien, die zusagen, Uploads innerhalb von ein bis zwei Stunden zu löschen und während der Übertragung zu verschlüsseln, und die größeren halten die Zertifizierung ISO/IEC 27001. Sie haben starke kommerzielle Gründe, diese Richtlinien einzuhalten. Aber «innerhalb einer Stunde gelöscht» ist nicht «nie gesehen». In dieser Stunde sitzt der Bildinhalt in der Infrastruktur des Anbieters, zugänglich für jeden Prozess oder jede Person mit entsprechenden Berechtigungen, und sichtbar in Protokollen und Backups gemäß der geltenden Aufbewahrungsrichtlinie.

Dieser Größenänderer lädt nichts hoch. Die gesamte Pipeline (Dateiauswahl, Bilddecodierung, Canvas-Skalierung, Codierung, Download) läuft in Ihrem Browser-Tab mit JavaScript und der HTML5-Canvas-API. Kein Upload, keine Netzwerkanfrage, die Bilddaten trägt, kein Logeintrag. Sie können das verifizieren, indem Sie vor dem Skalieren die Entwicklertools des Browsers im Netzwerk-Tab öffnen: keine Anfrage feuert mit Bildinhalt. Der einzige Netzwerkverkehr ist das anfängliche Laden der Seite und ein kleines image-resizer.js-Skript. Schalten Sie den Browser nach dem Laden der Seite in den Flugmodus, und der Größenänderer funktioniert weiter mit jeder lokalen Datei, die Sie auswählen, der stärkste empirische Beweis, dass nichts hochgeladen wird. Für Fotos mit irgendetwas Sensiblem (Gesichter, Orte, interne Screenshots, Ausweisdokumente) lohnt sich der browserseitige Kompromiss offensichtlich.

Wann ein anderes Werkzeug die richtige Wahl ist

• Stapelautomatisierung über Hunderte Dateien. Verwenden Sie sharp in Node.js (die kanonische serverseitige Bildbibliothek, gebaut auf libvips), ImageMagick oder GraphicsMagick auf der Kommandozeile, oder Pillow in Python. Diese Werkzeuge bewältigen Tausende Dateien ohne Browser-Speichergrenzen, legen jeden Resampling-Kern als explizite Option offen und laufen aus CI-Jobs, Deploy-Hooks oder Cron-Tasks.
• KI-Superauflösung für echte Vergrößerung. Für scharfe Vergrößerung, die tatsächlich Details hinzufügt, verwenden Sie einen Upscaler mit neuronalem Netz. Real-ESRGAN (Open Source, läuft lokal via ChaiNNer oder Kommandozeile), waifu2x (Open Source, kostenlose Web-Demos verfügbar), Topaz Gigapixel AI (kommerziell, Desktop) oder Adobe Super Resolution in Camera Raw oder Lightroom. Diese Modelle halluzinieren plausible Details, statt sie wiederherzustellen; die Ergebnisse sehen auf Gesichtern und natürlichen Texturen scharf aus, weil das Modell viele ähnliche Bilder während des Trainings gesehen hat.
• Pixel-Art-Größenänderung, die harte Kanten bewahrt. Verwenden Sie ein Werkzeug, das Nächster-Nachbar-Resampling explizit anbietet: -filter Point von ImageMagick, GIMPs Interpolation auf «Keine», oder spezialisierte Pixel-Art-Editoren wie Aseprite. Dieses Werkzeug glättet immer, weil das Flag imageSmoothingEnabled der Canvas-API eingeschaltet ist; es auszuschalten würde jeden anderen Anwendungsfall verschlechtern, daher fällt der Kompromiss zugunsten von Fotos statt Sprites aus.
• Druckqualitäts-Workflows mit DPI-Steuerung. Adobe Photoshop, Affinity Photo oder Lightroom legen Pixelmaße und DPI als unabhängige Einstellungen offen, unterstützen farbverwaltete Workflows (ICC-Profil-Bewahrung, Soft-Proofing, CMYK-Ausgabe) und merken sich einen nicht-destruktiven Skalierungsverlauf. Browserseitige Canvas-Skalierung kann nichts davon garantieren, weil Canvas in sRGB arbeitet und eingebettete Farbprofile beim Neucodieren verwerfen kann.

Häufig gestellte Fragen

Verringert das Ändern der Größe die Bildqualität?

Das Verkleinern erhält die Qualität gut. Das Vergrößern (ein Bild größer als das Original machen) führt zu einer gewissen Unschärfe, da neue Pixel interpoliert werden müssen. Für beste Ergebnisse beginnen Sie mit dem Ausgangsbild in höchster Auflösung, das Ihnen zur Verfügung steht.

Was macht das "Seitenverhältnis sperren"?

Wenn gesperrt, passt das Ändern der Breite automatisch die Höhe an (und umgekehrt), um die ursprünglichen Proportionen des Bildes beizubehalten. Entsperren Sie es, wenn Sie das Bild auf exakte Dimensionen strecken oder stauchen müssen.

Wird mein Bild auf einen Server hochgeladen?

Nein. Die gesamte Größenänderung erfolgt lokal in Ihrem Browser mit der HTML5 Canvas API. Ihr Bild verlässt niemals Ihr Gerät.

Kann ich das Ausgabeformat ändern?

Ja. Sie können das größenveränderte Bild als JPEG, PNG oder WebP ausgeben, unabhängig vom Originalformat. Dies ist nützlich, um Formate beim Ändern der Größe zu konvertieren.

Weitere häufig gestellte Fragen

Was ist der Unterschied zwischen DPI, PPI und Pixelmaßen?

Pixelmaße (Breite mal Höhe in Pixeln) beschreiben, was das Bild tatsächlich enthält. PPI (Pixel pro Zoll) beschreibt, wie dicht diese Pixel auf einem Bildschirm gepackt werden, eine Eigenschaft der Anzeigehardware, nicht der Datei. DPI (Dots per Inch) beschreibt, wie viele Druckerausgabepunkte pro Zoll Papier abgelegt werden, wenn das Bild gedruckt wird. Die in einer JPEG- oder PNG-Datei eingebettete DPI-Markierung ist beratende Metadaten für Drucker; sie ändert die Pixeldaten nicht. Ein 1920x1080-Bild hat 1920x1080 Pixel bei jeder DPI-Einstellung. Um einen Druck zu verkleinern, reduzieren Sie entweder die Pixelanzahl (dieses Werkzeug) oder erhöhen Sie die DPI-Metadaten vor dem Versand zum Druck (der Druckdialog eines Desktop-Werkzeugs oder Photoshops Dialog Bildgröße mit ausgeschaltetem «Bild neu berechnen»).

Warum sieht mein vergrößertes Bild unscharf aus?

Weil die Informationstheorie sagt, dass es so sein muss. Klassisches Resampling (bikubisch, Lanczos, Mitchell) kann nur sanft zwischen bekannten Quellpixeln interpolieren; es kann das nie abgetastete Detail nicht erfinden. Das Nyquist-Shannon-Abtasttheorem setzt eine harte Obergrenze: Frequenzen oberhalb der Hälfte der Pixelraster-Rate der Quelle sind mathematisch nicht wiederherstellbar. Eine 200-Pixel-Quelle auf 1920 Pixel zu vergrößern, wird immer weich aussehen, weil 90 % der neuen Pixel interpoliert sind. Für scharfe Vergrößerung verwenden Sie ein Superauflösungs-Modell (Real-ESRGAN, Topaz Gigapixel, Adobe Super Resolution), das plausible Details über ein neuronales Netz synthetisiert, das auf Millionen ähnlicher Bilder trainiert wurde.

Sollte ich für Retina- oder HiDPI-Bildschirme skalieren?

Ja. Retina-Bildschirme von iPhone und MacBook und HiDPI-Bildschirme unter Windows rendern in der 2- oder 3-fachen logischen CSS-Pixeldichte. Ein Hero-Bild, das auf einem Retina-Bildschirm logisch 1200 Pixel breit angezeigt wird, malt tatsächlich 2400 physische Pixel. Liefern Sie die 2x-Quelle über das HTML-Attribut srcset aus (der moderne Standard für responsive Bilder), und der Browser wählt die richtige Variante für das Gerät jedes Besuchers. Für ein einzelnes Avatar oder Hero-Bild ohne srcset skalieren Sie einfach auf das 2-fache der Anzeigegröße: Das Bild ist auf Retina scharf und auf Nicht-Retina nur leicht überdimensioniert, was etwas Bandbreite kostet, aber die deutlich sichtbarere Unschärfe eines zu klein dimensionierten, auf hochdichte Pixel gestreckten Bildes vermeidet.

Funktioniert dieses Werkzeug offline?

Ja. Die HTML5-Canvas-API ist Teil des Browsers selbst, keine heruntergeladene Bibliothek, daher gibt es keine separate Laufzeitumgebung zum Cachen. Die Seite lädt auf die übliche Weise; sobald sie geöffnet ist, läuft der Größenänderer vollständig aus dem im Browser eingebauten Code an jeder lokalen Datei, die Sie auswählen. Sie können das überprüfen, indem Sie nach dem Öffnen der Seite in den Flugmodus wechseln und ein lokales Bild skalieren. Das heruntergeladene Ergebnis wird lokal erzeugt und vom normalen Download-Mechanismus des Browsers gespeichert, ebenfalls ohne Netzwerkbeteiligung.

Sollte ich vor oder nach dem Skalieren zuschneiden?

Zuerst zuschneiden, dann skalieren. Das Zuschneiden legt das Seitenverhältnis fest (16:9 für YouTube, 1:1 für den Instagram-Feed, 9:16 für Stories, 1,91:1 für Open Graph), indem unerwünschte Randpixel verworfen werden. Das Skalieren legt anschließend die Pixelanzahl für das gewählte Seitenverhältnis fest. Die Schritte in umgekehrter Reihenfolge sind auch möglich, aber Arbeit vergeuden, Sie würden mehr Pixel resampeln als nötig, um dann einige beim Zuschneiden wieder wegzuwerfen. Verwenden Sie für dieses Werkzeug zuerst den Bildzuschneider, um das Seitenverhältnis festzulegen, und dann diesen Bildgrößenänderer, um die genauen Zielmaße festzulegen. Viele plattformspezifische Workflows (YouTube-Vorschau 1280x720, Instagram-Feed 1080x1080) kombinieren beide Schritte; sie in Folge mit zwei dedizierten Werkzeugen auszuführen, ergibt eine sauberere Ausgabe als der Versuch, alles auf einmal mit gestreckten Seitenverhältnissen zu erledigen.

Gibt es ein Desktop- oder Kommandozeilenäquivalent?

Mehrere. Für Stapelautomatisierung ist sharp in Node.js die standardisierte serverseitige Bibliothek (gebaut auf libvips). ImageMagick (magick input.jpg -resize 1920x1080 output.jpg) und GraphicsMagick laufen aus jeder Shell und bewältigen riesige Dateien. Pillow in Python (Image.open(p).resize((1920, 1080), Image.LANCZOS)) ist die Voreinstellung für Data-Science-Workflows. Für punktuelles interaktives Arbeiten wie dieses Werkzeug, aber mit expliziter Kern-Auswahl und mehr Ausgabeformaten einschließlich AVIF, ist Squoosh (Google Chrome Labs, vollständig clientseitig) die empfohlene Browser-Alternative. Photoshop, Affinity Photo und Vorschau unter macOS (Werkzeuge, Größe anpassen) decken den Desktop-GUI-Fall ab.

Verwandte Werkzeuge