Bildgröße ändern, Fotos online skalieren
Ändere die Bildgröße nach Breite, Höhe oder Prozentsatz, sperre das Seitenverhältnis und wähle einen Anpassungsmodus. 100 % in deinem Browser, ohne Uploads.
Bildgröße ändern, Fotos online skalieren wird geladen… Wenn nichts passiert, aktiviere JavaScript.
Die Größe eines Bildes zu ändern bedeutet, die Anzahl der Pixel zu verändern, aus denen seine Breite und Höhe bestehen, was sich wiederum sowohl auf die Dateigröße als auch darauf auswirkt, wie das Bild auf dem Bildschirm dargestellt wird. Die Auflösung eines digitalen Bildes wird in Megapixeln gemessen: Ein Bild mit 4000 × 3000 enthält 12 Millionen Pixel. Halbierst du beide Abmessungen auf 2000 × 1500, sinkt die Pixelzahl auf 3 Millionen und reduziert die Rohdaten um 75 %. Den Unterschied zwischen den intrinsischen Pixelabmessungen eines Bildes und der CSS-Größe, mit der ein Browser es darstellt, zu verstehen, ist für die Web-Performance entscheidend: Ein Bild, das 4000 px breit ist, aber in einem 400 px breiten Container angezeigt wird, zwingt den Browser dazu, zehnmal mehr Daten als nötig herunterzuladen.
Häufig gestellte Fragen
Werden meine Bilder auf einen Server hochgeladen?
Was ist das Seitenverhältnis und warum sollte ich es sperren?
Was ist der Unterschied zwischen den Anpassungsmodi Einpassen, Ausfüllen und Strecken?
Kann ich die Größe eines Bildes per Prozentsatz statt mit festen Pixeln ändern?
Welche Formate werden als Eingabe und als Ausgabe unterstützt?
Gibt es eine maximale Auflösung oder Dateigröße?
Warum sollte ich auf einer Website mehrere Bildgrößen ausliefern?
Beeinflusst die Größenänderung die Bildqualität?
Was bedeutet Megapixel und warum ist es wichtig?
Wie schneidet die Größenänderung im Browser im Vergleich zu Photoshop oder anderen Desktop-Werkzeugen ab?
Über Bildgröße ändern, Fotos online skalieren
Webentwickler, Grafikdesigner, Social-Media-Manager und Blogger ändern täglich Bildgrößen. Ein responsives Webdesign benötigt in der Regel dieselbe Fotografie in drei oder vier verschiedenen Breiten: ein Original in voller Auflösung für große Monitore, eine mittlere Variante für Tablets und ein kompaktes Vorschaubild für das Smartphone, ausgeliefert über das HTML-Attribut srcset, damit Browser nur die benötigte Größe herunterladen. E-Commerce-Plattformen brauchen einheitliche Vorschaubildgrößen für Produktraster. Im E-Mail-Marketing müssen Bilder strenge Größenobergrenzen einhalten. Druck-Workflows erfordern bestimmte Ziele in DPI und Millimetern. Allein die richtige Bildgröße vor dem Hochladen kann Gigabyte an Speicherplatz sparen und das Laden der Seiten drastisch beschleunigen.
Dieses Werkzeug führt jeden Vorgang zur Größenänderung lokal in deinem Browser über die HTML Canvas API aus, sodass deine Bilder dein Gerät nie verlassen. Du kannst eine genaue Breite, eine genaue Höhe oder einen Prozentsatz der ursprünglichen Abmessungen angeben. Das Aktivieren der Seitenverhältnis-Sperre stellt sicher, dass das Bild nie verzerrt oder gestaucht wird. Drei Anpassungsmodi geben dir feinkörnige Kontrolle: Einpassen skaliert das Bild so, dass es vollständig in den Zielrahmen passt (die Leinwand wird bei Bedarf aufgefüllt), Ausfüllen füllt den Rahmen und schneidet den Überstand an den Rändern ab, und Strecken zwingt das Bild ungeachtet der Proportionen in die exakten Abmessungen. Das Ergebnis steht als PNG-, JPEG- oder WebP-Download in der von dir gewählten Qualität zur Verfügung.
Ein paar Tipps für die besten Ergebnisse: Sperre immer das Seitenverhältnis, es sei denn, du benötigst ausdrücklich eine verzerrte Ausgabe. Wenn du Vorschaubilder für eine Website erzeugst, ziele auf die exakte Anzeigegröße ab, statt dich darauf zu verlassen, dass CSS das Bild verkleinert, denn korrekt dimensionierte Bilder auszuliefern ist einer der schnellsten Gewinne in einem Lighthouse-Performance-Audit. Wenn du mehrere Größen desselben Bildes erstellen musst, ändere die Größe zuerst auf die größte und verkleinere dann diese Ausgabe auf die kleineren Größen, da so mehr Details erhalten bleiben als beim wiederholten Verkleinern aus dem Original. Für Retina- und High-DPI-Displays erstelle Bilder in der doppelten (2×) CSS-Anzeigegröße, um eine gestochen scharfe Darstellung zu gewährleisten.
Pixel, Megapixel und der lange Weg zu responsiven Bildern
Das Wort "Pixel" ist ein Kofferwort aus "picture element" (Bildelement) und wurde Ende der 1960er-Jahre von Ingenieuren am Jet Propulsion Laboratory der NASA geprägt, die einen Begriff für die einzelnen Zellen der von Raumsonden zurückgesendeten digitalisierten Bilder brauchten. Die erste Digitalkamera für Endverbraucher, die ein volles Megapixel erfassen konnte, war die Kodak DCS 100, die 1991 zu einem Preis von rund 13.000 Dollar auf den Markt kam; sie speicherte die Bilder auf einer separaten Festplatteneinheit, die an einem Schultergurt getragen wurde. Bis 2010 wurden günstige Smartphones mit 5-Megapixel-Kameras ausgeliefert, und bis 2023 überschritten Spitzenmodelle regelmäßig 200 Megapixel, was ein Paradoxon schuf, bei dem die Kameras in unseren Taschen Bilder erzeugen, die weit größer sind, als jeder Bildschirm darstellen kann.
Das Konzept responsiver Bilder, verschiedenen Geräten verschiedene Bildgrößen auszuliefern, ist Jahrzehnte älter als das moderne Web. Frühe Fernseh-Übertragungsingenieure standen vor einem ähnlichen Problem, als sie Systeme entwarfen, die auf Bildschirmen von winzigen tragbaren Geräten bis zu großen Wohnzimmerkonsolen funktionieren mussten. Im Web wurde das Problem um 2010 akut, als Apple das Retina-Display einführte, das die Pixeldichte des iPhone-4-Bildschirms verdoppelte. Plötzlich mussten Entwickler Bilder in doppelter Auflösung für diese Geräte ausliefern oder unscharfe Fotos in Kauf nehmen, ohne dabei Nutzer mit normalen Bildschirmen mit unnötig großen Downloads zu belasten. Diese Spannung trieb die Schaffung des HTML-Attributs srcset, 2014 standardisiert, und des picture-Elements voran, die beide den Browsern erlauben, automatisch die am besten geeignete Bildgröße auszuwählen.
Bevor es den Digitalzoom gab, wurde der optische Zoom in Kameras durch das physische Verschieben von Linsenelementen erreicht, dasselbe Prinzip, das Teleskopbauer schon seit dem 17. Jahrhundert nutzten. Digitale Algorithmen zur Größenänderung sind dagegen ein Produkt der im 20. Jahrhundert entwickelten Signalverarbeitungsmathematik. Die bilineare Interpolationsmethode, die heute von den meisten Browsern verwendet wird, wurde in einem Aufsatz von 1975 beschrieben, während die von professionellen Bildbearbeitern bevorzugte bikubische Interpolation 1981 von Robert Keys eingeführt wurde. Moderne KI-basierte Vergrößerungswerkzeuge nutzen faltende neuronale Netze, die an Millionen von Bildpaaren trainiert wurden, um beim Vergrößern von Bildern plausible Details zu "erfinden", und erzielen damit Ergebnisse, die ältere mathematische Methoden schlicht nicht erreichen können.