Image Resizer

So wird die Bildgrößenänderung verwendet

1. Datei ablegen oder auswählen in der Upload-Zone. JPEG, PNG, WebP und GIF werden alle akzeptiert, und das Tool liest die Datei mit URL.createObjectURL, sodass nichts hochgeladen wird.
2. Modus auswählen: zwischen dem "Pixel"-Tab für absolute Breite und Höhe oder dem "Prozentsatz"-Tab zur Skalierung relativ zum Original wechseln.
3. "Seitenverhältnis beibehalten" umschalten, damit die zweite Abmessung automatisch der ersten folgt - praktisch, wenn nur ein bestimmtes Breitenbudget eingehalten werden soll.
4. Zielwerte eingeben. Die aktuellen Quellabmessungen und die Megapixelanzahl werden über den Eingaben angezeigt, sodass auf einen Blick erkennbar ist, ob verkleinert oder vergrößert wird.
5. "Skalieren" klicken. Ein neues HTMLCanvasElement wird in der Zielgröße erstellt, die Quelle mit drawImage gezeichnet und das Ergebnis als PNG enkodiert und als Download über eine Blob-URL angeboten.

Was im Hintergrund passiert

Das Skalieren eines Rasterbilds ist nicht kostenlos - jedes neue Pixel muss durch einen Resampling-Filter aus den alten synthetisiert werden. Der Canvas 2D-Kontext wendet einen einzelnen Interpolations-Kernel an, der durch imageSmoothingQuality gesteuert wird, den Browser auf einen bilinearen oder bikubischen Resampler abbilden. Das ist für die meisten Fotos gut genug, aber es ist nicht der Lanczos-3-Filter, den ImageMagick oder libvips bei "-resize" auf der Kommandozeile verwenden, sodass bei sehr starkem Verkleinern subtil weichere Kanten als in einer Desktop-Pipeline auftreten können.

Die Ausgabe wird als PNG durch canvas.toBlob('image/png') enkodiert, was die Bitmap an den DEFLATE-basierten PNG-Encoder des Browsers übergibt (siehe W3C PNG-Spezifikation, zweite Ausgabe). Das hält die Ausgabe verlustfrei in den neuen Abmessungen, was wichtig ist, wenn die Datei später neu enkodiert oder durch ein anderes Tool verarbeitet werden soll - jede Runde der JPEG-Neu-Enkodierung akkumuliert DCT-Artefakte, und PNG umgeht das vollständig.

Echte Szenarien, in denen das Tool hilft

• Ein 24-Megapixel-Handyfoto auf 1600 px Breite verkleinern, bevor es in einen Blog hochgeladen wird, was die Bandbreite um 90% reduziert, ohne sichtbare Qualitätseinbußen.
• Das exakte 1080x1080-Quadrat für einen Instagram-Feed-Beitrag treffen, ohne einen vollständigen Editor in den Workflow einzubeziehen.
• Retina-Assets bei 2x der CSS-Größe vorbereiten (ein 300 px Logo wird bei 600 px exportiert) für srcset-Attribute.
• Screenshot-Aufnahmen von einem 5K-Display verkleinern, damit sie in ein 1920 px Notion- oder Confluence-Embed passen.
• Ein Open-Graph-Bild bei 1200x630 aus einem größeren Master generieren, ohne Figma zu starten.
• Ein Avatar-Foto auf das von den meisten Foren und Chat-Plattformen erzwungene Maximum von 512 px zuschneiden.

Randfalle, die es wert sind zu kennen

• Hochskalieren über 2x ist mit einem Browser-Kernel sinnlos - bilineare Interpolation erzeugt matschige Ausgabe. Wenn wirklich vergrößert werden muss, wird eine dedizierte Super-Resolution-Pipeline (waifu2x, Topaz Gigapixel oder serverseitiges ESRGAN) jede Canvas-API übertreffen.
• GIF-Eingabe verliert Animation. Das Canvas rendert nur den ersten Frame; die Animation wird nicht erhalten. Ein GIF-spezifisches Tool wie ezgif verwenden, wenn animierte Bilder erhalten bleiben müssen.
• EXIF-Orientierungstags werden entfernt. Ein Handyfoto, das in EXIF auf "90 Grad im Uhrzeigersinn drehen" eingestellt, aber physisch im Querformat auf dem Datenträger gespeichert ist, wird nach der Skalierung im Querformat ausgegeben. Das ist meistens das Gewünschte, aber überraschend, wenn auf das spätere EXIF-Drehen gezählt wurde.
• Sehr große Bilder können fehlschlagen. Browser begrenzen die Canvas-Fläche auf etwa 268 Millionen Pixel (16.384 hoch zwei) auf den meisten Engines - darüber hinaus malt drawImage leise schwarz.
• Nicht-ganzzahlige Prozentwerte werden abgerundet. 33,33% von einem 1000 px Bild sind 333 Pixel, nicht 333,33, weil Pixelanzahlen ganze Zahlen sein müssen.

Ein kurzer Überblick über Raster-Resampling

Rasterformate wie JPEG (JFIF-Container, ISO/IEC 10918-1), PNG (W3C-Empfehlung) und WebP (RFC 9649) speichern ein festes Pixelraster. Beim Ändern der Rastergröße wird jedes Ausgabepixel aus einem gewichteten Durchschnitt der Quellpixel in einer kleinen Nachbarschaft berechnet. Bilineares Sampling betrachtet die vier nächsten Quellpixel, bikubisches sechzehn und Lanczos-3 sechsunddreißig. Mehr Proben liefern schärfere Kanten, kosten aber mehr CPU und können Klingelartefakte einführen. Farbmanagement spielt ebenfalls eine Rolle: idealerweise arbeitet der Resampler in linearem RGB statt in den auf Datenträger gespeicherten sRGB-kodierten Bytes, weil die Mittelung von Gamma-kodierten Werten Mitteltöne abdunkelt. Browser haben sich hier in den letzten Jahren verbessert, aber es ist immer noch der Grund, warum ein verkleinertes helles Foto etwas trüb aussehen kann im Vergleich zum ImageMagick-Äquivalent mit -colorspace RGB -resize W -colorspace sRGB.

Vergleich mit anderen Tools

Für eine einmalige Skalierung ist der Browser schneller als das Öffnen von Photoshop, Affinity Photo oder GIMP, und es geht keine Privatsphäre für die Bequemlichkeit verloren. Im Vergleich zu einem Kommandozeilen-Tool kippen die Kompromisse jedoch in die andere Richtung: magick input.jpg -resize 1600x output.jpg verwendet standardmäßig Lanczos, bewahrt ICC-Profile und EXIF auf Anfrage und skaliert linear über Tausende von Dateien mit mogrify. libvips (zugänglich über das sharp-Node-Paket) ist die erste Wahl für Stapelpipelines in großem Maßstab, weil es Kacheln streamt statt das gesamte Bild in den Speicher zu laden. Für einmalige Retusche auf Pixelebene bietet squoosh.app dieselbe Canvas-gestützte Skalierung, aber mit einem echten Side-by-Side-Vergleichsregler. Dieses Tool für Geschwindigkeit und Privatsphäre verwenden; auf das CLI zurückgreifen, wenn Stapelverarbeitung, Farbgenauigkeit oder exotische Resampler benötigt werden.