Bildgrößen ändern _

Wie die browserbasierte Bildgrößenänderung funktioniert

Jede Größenänderung ist eine kurze Pipeline, die vollständig in JavaScript läuft. Es wird keine Codec-Bibliothek heruntergeladen und kein Server ist beteiligt. Die native Canvas API des Browsers dekodiert die Datei, zeichnet sie in der Zielgröße neu und kodiert sie im Speicher neu, dann übergeben Sie einen Blob, den die Seite vorschauen oder in eine ZIP-Datei packen kann. Da jeder Schritt im Sandbox des Tabs bleibt, erreichen die Originaldateien nie das Netzwerk.

1. Liest jede hochgeladene Datei als Blob und erstellt eine Objekt-URL, damit der Browser sie lokal dekodieren kann, ohne Bytes an einen Server zu kopieren oder auf die Festplatte zu schreiben.
2. Berechnet die Zielabmessungen aus dem gewählten Modus — eine Begrenzung der längsten Seite, eine exakte Breite und Höhe oder eine prozentuale Skalierung. Die Seitenverhältnis-Sperre hält die Proportionen korrekt, wenn Sie ein einzelnes Feld bearbeiten.
3. Erstellt ein offscreen Canvas in der Zielgröße und ruft ctx.drawImage(source, 0, 0, width, height) auf, um die dekodierten Pixel neu zu zeichnen. Der Browser übernimmt die Interpolation, die das skalierte Ergebnis glättet.
4. Ruft canvas.toBlob auf, um im Quellformat neu zu kodieren. PNG bleibt verlustfrei, JPEG und WebP werden mit hoher Qualität neu kodiert. Die Seite zeigt dann eine Vorher/Nachher-Karte und bietet einen Download pro Bild oder eine einzelne ZIP-Datei an, die im Speicher mit fflate erstellt wird.

Warum Bildgrößen ändern?

• Überdimensionierte Bilder sind die häufigste Ursache für langsame Seiten. Ein 4000×3000-Handyfoto direkt in ein 600 Pixel breites Layout eingefügt schickt etwa 40-mal mehr Pixel, als der Bildschirm anzeigen kann. Die längste Seite vor dem Upload auf 1600 px zu begrenzen reduziert das Seitengewicht drastisch und verbessert Core Web Vitals LCP.
• Upload-Formulare erzwingen strenge Abmessungen. Avatar-Slots, Portale für Ausweisfotos, Marktplatz-Einträge und OG-Social-Cards verlangen exakte Pixelgrößen: 1200×630 für eine Open-Graph-Vorschau, 512×512 für ein App-Symbol, 150×150 für eine Miniaturansicht. Die genaue Zahl zu treffen vermeidet die Schleife der abgelehnten Uploads.
• E-Mail- und Chat-Clients komprimieren große Bilder still nach, was einen sauberen Screenshot ruinieren kann. Selbst auf eine vernünftige Breite zu skalieren hält das Ergebnis vorhersehbar, anstatt es der verlustbehafteten Pipeline jemand anderen zu überlassen.
• Stapelkonsistenz ist für Galerien und Kataloge wichtig. Einen Ordner mit Fotos verschiedener Größen durch ein einzelnes 800×800-Ziel zu schicken bedeutet, dass sich jede Karte im Raster ausrichtet, ohne ein riesiges Bild, das das Layout bricht.

Häufige Anwendungsfälle

Größenänderungen treten immer dann auf, wenn Quellabmessungen und Erwartungen des Ziels nicht übereinstimmen. Drei Muster tauchen immer wieder auf.

• Produktfotos für einen Shopify- oder WooCommerce-Shop vorbereiten. Ein Ordner mit 4000-Pixel-Kamera-Originalen wird auf eine längste Seite von 1600 px begrenzt, damit die Storefront schnell lädt, während das Seitenverhältnis intakt bleibt, damit nichts gestreckt wirkt.
• Social-Media- und App-Assets aus einer Master-Datei generieren. Einen exakten 1200×630 für die Open-Graph-Karte festlegen, dann 512×512 für ein App-Symbol, jedes in ein paar Klicks exportieren ohne einen schweren Editor zu öffnen.
• Einen Stapel QA- oder Support-Screenshots verkleinern, bevor sie an ein Ticket angehängt werden. Einen Ordner mit 50 Bildern auf 50% zu skalieren reduziert die Archivgröße typischerweise um etwa drei Viertel, bevor er in den Bug-Tracker geht.

Ein Praxisbeispiel: 4000-px-Foto zu einem 1600-px-Web-Bild

Ein 4000×3000-Foto direkt vom Handy ist eine häufige Last, die weit größer ist als jedes Web-Layout braucht. Ein guter Maßstab dafür, was Skalierung spart.

Das Foto in die Upload-Zone ablegen, den Modus auf Längste Seite begrenzen lassen und den Wert auf 1600 setzen. Die Canvas-Pipeline zeichnet das Bild bei 1600×1200 mit beibehaltenem Seitenverhältnis neu, dann kodiert es im Originalformat neu. Die Ausgabekarte zeigt die neuen Abmessungen und Dateigröße, die für ein typisches JPEG von mehreren Megabytes auf wenige Hundert Kilobytes sinkt. Klicken Sie auf Herunterladen auf der Karte für die einzelne Datei, oder auf .zip herunterladen, wenn Sie mehrere Bilder in einem Durchgang skaliert haben. Der gesamte Vorgang, vom Ablegen bis zum Download, läuft in einem Bruchteil einer Sekunde und verbraucht nach dem Laden der Seite selbst null Bandbreite.

Welche Skalierungsmodi sind verfügbar?

Drei. Längste Seite begrenzen begrenzt die längere von Breite oder Höhe auf einen Pixelwert und skaliert die andere Seite entsprechend — das ist der sichere Standard, weil er nie verzerrt. Exakte Breite × Höhe lässt Sie beide Zahlen eingeben, mit einer Seitenverhältnis-Sperre, die das zweite Feld aus dem Quellverhältnis neu berechnet, wenn Sie das erste bearbeiten — deaktivieren Sie die Sperre, wenn ein Formular eine exakte nicht-proportionale Größe verlangt. Prozentual skalieren multipliziert beide Abmessungen mit einem einzigen Faktor, praktisch um einen ganzen Stapel auf einmal zu halbieren oder zu verdoppeln. Sechs Ein-Klick-Voreinstellungen (von 1920×1080 bis zu einer 150×150-Miniaturansicht) decken die häufigsten Ziele ab.

Läuft das auf meinem Gerät?

Ja, vollständig. Die Seite verwendet die native Canvas API des Browsers und die Web File API, um jedes Bild im Speicher zu dekodieren, neu zu zeichnen und neu zu kodieren. Keine Bilddaten werden an einen Server gesendet, es gibt keinen temporären Upload und keinen Cloud-Hin-und-Rückweg. Sie können es selbst überprüfen: Öffnen Sie DevTools, wechseln Sie zum Netzwerk-Panel und führen Sie eine Skalierung aus. Die einzigen ausgehenden Anfragen sind der initiale Seitenaufruf und Werbeaufrufe. Nichts Bildförmiges verlässt den Tab, was dies sicher für gescannte Ausweisdokumente, medizinische Bilder und anderes Material macht, das Sie nie hochladen möchten.

Wird die Größenänderung die Qualität verringern?

Ein Bild verkleinern (Downscaling) sieht ausgezeichnet aus — der Browser mittelt die Quellpixel in weniger Pixel, sodass Details scharf bleiben und die Datei viel kleiner wird. Über die Quellauflösung hinaus vergrößern (Upscaling) kann keine Details erfinden, die nie aufgenommen wurden, sodass ein kleines hochskaliertes Bild weich aussehen wird; das ist eine Grenze jedes Skalierungs-Tools, nicht nur dieses. Die Ausgabe behält das Quellformat bei: PNG bleibt verlustfrei, während JPEG und WebP mit einer hohen Qualitätseinstellung neu kodiert werden, sodass der visuelle Unterschied zum Original kaum wahrnehmbar ist.

Welche Dateiformate werden unterstützt?

Auf der Eingabeseite wird jedes Format akzeptiert, das der Browser dekodieren kann: PNG, JPEG, WebP, GIF und BMP decken fast jede Datei ab, die ein Handy, eine Kamera oder ein Screenshot-Tool erzeugt. Die Ausgabe behält das Quellformat, wo der Canvas-Encoder es unterstützt — PNG, JPEG und WebP funktionieren direkt. GIF und BMP, die die Canvas API dekodieren, aber nicht neu kodieren kann, werden als verlustfreies PNG gespeichert. Der Dateiname des skalierten Bildes enthält die neuen Abmessungen (zum Beispiel foto-1600x1200.jpg), damit ein Stapel leicht zu sortieren ist.

Bilder ablegen, Größe wählen, skalieren. Alles läuft in Ihrem Tab. Kein Upload, kein Konto, kein Warten in einer Server-Warteschlange.