Bild-Skalierung
Skalieren Sie Bilder auf exakte Maße oder Prozentsätze. Wählen Sie Social-Media-Voreinstellungen oder benutzerdefinierte Größen.
Originalgröße
Neue Größe
AktualisiertÜber dieses Werkzeug
Das Ändern der Bildgröße ist eine der häufigsten Aufgaben in digitalen Medien-Workflows, und die korrekte Ausführung macht den Unterschied zwischen einem professionellen Ergebnis und einem verpixelten Durcheinander. Ob Sie Bilder für schnellere Webseiten-Ladezeiten optimieren, die strengen Maßanforderungen von Social-Media-Plattformen erfüllen, hochauflösende Dateien für die Druckproduktion vorbereiten oder große Fotos für E-Mail-Anhänge komprimieren — eine korrekte Größenänderung stellt sicher, dass Ihre Bilder in jeder Größe scharf aussehen. Im Kern ändert das Skalieren die Pixelabmessungen eines Bildes — die Anzahl der einzelnen Farbpunkte, aus denen das Bild besteht. Ein 4000 x 3000 Pixel großes Foto enthält 12 Millionen Pixel (12 Megapixel). Die Reduzierung auf 1200 x 900 verwirft etwa 91 Prozent dieser Pixel, weshalb der Resampling-Algorithmus so wichtig ist. Der Algorithmus entscheidet, wie Pixelwerte während dieser Transformation gemischt oder ausgewählt werden. DPI (Punkte pro Zoll) und PPI (Pixel pro Zoll) beschreiben die Druckdichte und nicht die Bildgröße. Ein 3000 x 2000 Pixel großes Bild, gedruckt mit 300 DPI, ergibt einen 25,4 x 16,9 cm großen Druck, während dieselbe Datei mit 72 PPI einen viel größeren Bereich auf dem Bildschirm füllt. Dieses Tool konzentriert sich auf Pixelabmessungen, was für die digitale Anzeige relevant ist, und lässt DPI-Metadaten für Druck-Workflows intakt. Das Seitenverhältnis — das proportionale Verhältnis zwischen Breite und Höhe — ist entscheidend zur Vermeidung von Verzerrungen. Ein 16:9 Breitbild, das in ein 1:1 Quadrat gestreckt wird, sieht gestaucht aus. Das Sperren des Seitenverhältnisses stellt sicher, dass die Änderung einer Dimension die andere automatisch anpasst und die Originalproportionen Ihres Bildes erhalten bleiben. Die Ausgabe erfolgt in PNG (ISO 15948), JPEG (ITU-T T.81) oder WebP (IETF RFC 9649), und die gesamte Verarbeitung erfolgt lokal — Ihre Bilder verlassen nie Ihr Gerät.
Anleitung
- Laden Sie Ihr Bild hoch durch Ziehen und Ablegen oder Klicken. Unterstützt alle gängigen Bildformate.
- Geben Sie die Zielmaße in Pixeln oder Prozent ein. Sperren Sie das Seitenverhältnis oder entsperren Sie für benutzerdefinierte Größe.
- Wählen Sie den Modus (Einpassen, Füllen oder Strecken) und klicken Sie auf Herunterladen.
Anleitung
- Laden Sie Ihr Bild hoch durch Ziehen und Ablegen oder Klicken. Unterstützt alle gängigen Bildformate.
- Geben Sie die Zielmaße in Pixeln oder Prozent ein. Sperren Sie das Seitenverhältnis oder entsperren Sie für benutzerdefinierte Größe.
- Wählen Sie den Modus (Einpassen, Füllen oder Strecken) und klicken Sie auf Herunterladen.
Methodik
Die Bildgrößenänderung nutzt die HTML Canvas API mit konfigurierbarer Interpolationsqualität, gesteuert durch die Eigenschaft imageSmoothingQuality. Jeder Resampling-Algorithmus dient einem anderen Zweck. Nearest-Neighbor kopiert den nächstgelegenen Pixelwert ohne Mischung und erzeugt harte Kanten, ideal für Pixel-Art und Screenshots. Bilineare Interpolation mittelt eine 2x2-Pixel-Nachbarschaft und erzeugt glattere Übergänge bei moderatem Rechenaufwand. Bikubische Interpolation tastet ein 4x4-Gitter mit kubischen Polynomen ab und liefert die glattesten Verläufe und beste Detailerhaltung — dies ist die Standardeinstellung für fotografische Inhalte. Lanczos-Resampling, verwendet in fortgeschrittener Bildbearbeitungssoftware, nutzt Sinc-Funktions-Faltung für noch schärfere Ergebnisse, wobei die Canvas API dieses Verhalten bei der "high"-Qualitätseinstellung approximiert. Das Tool skaliert über ein Offscreen-Canvas: Das Quellbild wird auf ein Canvas-Element in den Zielabmessungen gezeichnet, sodass die Rendering-Engine des Browsers die Subpixel-Interpolation nativ übernimmt. Bei stärken Verkleinerungen (über 50%) zeichnet ein mehrstufiger Ansatz das Bild in Zwischengrößen, um Aliasing-Artefakte zu vermeiden. Seitenverhältnisberechnungen verwenden einfache Proportionsmathematik. Die Stapelverarbeitung wendet identische Einstellungen auf mehrere Bilder sequenziell an und erzeugt einzelne Dateien oder ein ZIP-Archiv.
Ihre Ergebnisse verstehen
Das Vergrößern von Bildern über ihre Originalgröße hinaus reduziert die Qualität, da kein Algorithmus Details erzeugen kann, die vom Kamerasensor nie aufgenommen würden. Für beste Ergebnisse beginnen Sie immer mit der höchsten verfügbaren Auflösung. Eine 2-fache Vergrößerung (z.B. von 1000px auf 2000px) führt zu merklicher Unschärfe, während alles über 3x deutliche Pixelierung oder Verschwommenheit zeigt, abhängig von der verwendeten Interpolationsmethode. Beim Verkleinern zeigt der angezeigte Prozentsatz, um wie viel kleiner die neuen Dimensionen im Verhältnis zum Original sind. Eine 50%-Reduktion bedeutet halbe Breite und halbe Höhe, was zu einem Viertel der gesamten Pixelanzahl führt. Größere Reduktionen erhalten in der Regel eine hervorragende visuelle Qualität, da der Algorithmus mehr Quelldaten zur Verfügung hat. Das Beibehalten des Seitenverhältnisses verhindert Verzerrungen—wenn Sie gestreckte oder gestauchte Motive sehen, entsperren und sperren Sie das Verhältnis erneut, um es zu korrigieren. Verwenden Sie Nearest-Neighbor-Interpolation speziell für Pixel-Art, Icons und Screenshots, bei denen schärfe, harte Kanten erhalten bleiben müssen. Für Fotografien und natürliche Bilder verwenden Sie immer die bikubische Einstellung (hohe Qualität) für die glattesten Verläufe und natürlichsten Ergebnisse.
Die Wissenschaft der Bildauflösung
Bildauflösung dreht sich grundlegend um Informationsdichte—wie viele diskrete Farbabtastwerte pro Flächeneinheit existieren. Ein digitales Bild ist ein zweidimensionales Raster aus Pixeln, wobei jedes Farbwerte speichert (typischerweise 8 Bit pro Kanal für Rot, Grün und Blau, was 16,7 Millionen mögliche Farben ergibt). Die Gesamtpixelzahl bestimmt, wie viel visuelles Detail das Bild darstellen kann. DPI (Punkte pro Zoll) und PPI (Pixel pro Zoll) werden oft verwechselt, dienen aber unterschiedlichen Kontexten. PPI beschreibt, wie dicht Pixel gepackt sind, wenn ein Bild auf dem Bildschirm angezeigt oder gedruckt wird. Ein 3000x2000 Bild bei 300 PPI druckt mit 25,4x16,9 cm in fotografischer Schärfe. Dasselbe Bild bei 72 PPI wurde auf 105,8x70,6 cm gedruckt, aber bei naher Betrachtung unscharf erscheinen. Die Bildschirmauflösung fügt eine weitere Variable hinzu—ein 4K-Monitor (3840x2160) packt mehr Pixel pro Zoll als ein 1080p-Display gleicher physischer Größe, wodurch Bilder schärfer erscheinen. Beim Größenändern muss der Resampling-Algorithmus entweder Pixelinformation verwerfen (Verkleinerung) oder neue Pixeldaten durch mathematische Interpolation erfinden (Vergrößerung). Bikubische Interpolation untersucht eine 4x4-Pixel-Nachbarschaft und passt ein kubisches Polynom an, um neue Werte zu schätzen und glatte Verläufe zu erzeugen. Lanczos-Resampling verwendet Sinc-Funktions-Faltung für theoretisch optimale Schärfe. Nearest-Neighbor kopiert einfach das nächstgelegene existierende Pixel und erhält harte Kanten, erzeugt aber sichtbare Treppenartefakte. Moderne Displays erschweren die Auflösungsplanung zusätzlich. Apple Retina-Bildschirme verwenden 2x oder 3x Pixeldichte, was bedeutet, dass ein CSS-Pixel 4 oder 9 physischen Pixeln entsprechen kann. Bilder in doppelter Anzeigegröße bereitzustellen gewährleistet Schärfe auf diesen hochdichten Bildschirmen, ohne Bandbreite auf Standard-Displays zu verschwenden.
Praktische Beispiele
Ein Fotograf muss Bilder für sein Online-Portfolio vorbereiten. Die originalen DSLR-Fotos haben 6000x4000 Pixel (24MP). Er skaliert sie auf 2400x1600 für die Portfolio-Galerie und erstellt 300x200 Thumbnails für die Rasteransicht, wobei bikubische Interpolation für beides verwendet wird, um glatte Details zu erhalten. Ein Social-Media-Manager bereitet ein einzelnes Produktfoto für mehrere Plattformen vor: 1080x1080 für Instagram, 1200x630 für Facebook-Link-Shares und 1280x720 für YouTube-Thumbnails. Die Preset-Buttons sparen Zeit und stellen sicher, dass die Anforderungen jeder Plattform präzise erfüllt werden. Ein Webentwickler optimiert Hero-Bilder für eine responsive Website. Die Desktop-Version benötigt 1920x800 Pixel, während die Mobile-Version 768x400 erfordert. Der Stapelmodus verarbeitet die gesamte Bildbibliothek in Sekunden und produziert einheitlich dimensionierte Dateien, die bereit für das Deployment sind.
Tipps & Bewährte Methoden
Bewahren Sie immer eine unveränderte Kopie Ihres Originalbildes auf, bevor Sie die Größe ändern. Einmal beim Verkleinern verworfene Pixel können nicht wiederhergestellt werden. Arbeiten Sie mit der größten verfügbaren Quelldatei, um sich maximale Flexibilität zu geben. Beim Skalieren für das Web zielen Sie auf die tatsächliche Anzeigegröße ab, anstatt übergroße Bilder hochzuladen und sich auf CSS-Skalierung zu verlassen. Ein 600px breiter Container benötigt nur ein 600px breites Bild (oder 1200px für Retina-Displays). Dies reduziert die Ladezeiten erheblich und verbessert die Benutzererfahrung. Für Stapeloperationen testen Sie Ihre Einstellungen zunächst an einem einzelnen Bild, um die Ausgabequalität zu bestätigen. Verwenden Sie den Prozentmodus, wenn alle Bilder proportional gleich verkleinert werden sollen, und den Pixelmodus, wenn Sie einheitliche Ausgabeabmessungen unabhängig von den Originalgrößen benötigen.
Alle Berechnungen werden lokal in Ihrem Browser durchgeführt. Es werden keine Daten an Server gesendet.