Ändern Sie die Größe eines Bildes
Ändert die Größe eines PNG, JPEG, WebP oder GIF auf ein Feld, eine Breite, eine Höhe, einen Prozentsatz oder eine exakte Größe und schreibt es als PNG oder JPEG zurück. Die Dekodierung, das Resampling und die Kodierung erfolgen alle in diesem Browser-Tab.
PNG, JPEG, WebP oder GIF. Die Datei wird auf dieser Registerkarte gelesen und es gibt keinen Server, an den sie gesendet werden kann.
So funktioniert es
Was das bewirkt
Verkleinert ein Bild – oder, wenn Sie darauf bestehen, größer –, ohne dass es Ihren Computer verlässt. Sie können die Größe, das Format und die JPEG-Qualität frei wählen, und die Proportionen werden beibehalten, sofern Sie dies nicht ausdrücklich wünschen.
Die Größenänderung hört sich so an, als ob es sich um eine Rechenzeile handeln sollte, und die Arithmetik besteht tatsächlich aus einer Zeile. Die Teile, die schief gehen, liegen an anderer Stelle: Welche Abmessungen müssen berechnet werden, wenn ein Foto eine EXIF-Rotation trägt, wie kann man sie um den Faktor zehn verkleinern, ohne dass der Resampler des Browsers die Details verwischt, was macht man mit der Transparenz, wenn das Ausgabeformat keine enthält, und wie nennt man die Datei, damit sie nicht die einzige Kopie überschreiben kann, die noch die Pixel enthält.
Die Methode
Beide Seiten werden mit einem Faktor multipliziert. Wenn man Breite und Höhe getrennt berechnet und jeweils rundet, erhält man ein 3:2-Foto mit 1,4999:1 – auf dem Bildschirm nicht wahrnehmbar und sofort sichtbar, wenn man es neben ein anderes Bild legt. Im Box-Modus ist dieser Faktor der kleinere der beiden, den die Box zulässt, sodass das Bild hineinpasst und nicht über eine Kante hinausragt. Nur der Modus „Genaue Größe“ verwendet zwei Faktoren, und zwar auf Anweisung.
Die Reduzierung erfolgt stufenweise. Das drawImage eines Browsers führt ein Resampling mit einem kleinen Kernel durch. Wenn Sie ihn also bitten, in einem Schritt von einer Breite von 4000 auf 400 Pixel zu wechseln, wird etwa ein Eingabepixel von zehn gelesen und die anderen neun verworfen: Feine Details werden zu Aliasing und Text schimmert. Wiederholtes Halbieren bedeutet, dass jedes Ausgabepixel der Durchschnitt von genau vier Eingaben ist, was ein geeigneter Boxfilter tun würde. Die Leiter stoppt, während beide Seiten noch mehr als das Doppelte des Ziels haben, sodass die letzte Ziehung immer eine Reduzierung um weniger als das Zweifache darstellt – die Größe, die ein kleiner Kernel korrekt bewältigen kann.
Die EXIF-Ausrichtung wird explizit abgefragt und nicht der Engine überlassen. Ein Telefon schreibt ein Sensorbild im Querformat und einen Tag mit der Aufschrift „Drehen Sie dies um eine Vierteldrehung“. Ob der Decoder diesen Tag standardmäßig berücksichtigt, hat sich im Laufe der Lebensdauer der Spezifikation geändert und ist immer noch von Engine zu Engine unterschiedlich. Die Angabe bedeutet, dass ein Porträtfoto in jedem Browser 3000 x 4000 groß ist, nicht 4000 x 3000 in einem von ihnen und in der Ausgabe gestaucht wird.
Die Größe und das Format werden aus dem Header der Datei ausgelesen, bevor etwas dekodiert wird. Dadurch kann ein 300-Megapixel-Panorama mit einem Satz abgelehnt werden, anstatt dass der Tab mittendrin nicht mehr genügend Speicher hat. Aus diesem Grund lautet die Meldung für ein HEIC HEIC statt „nicht unterstützte Datei“.
Vor dem Weiterlesen
Ein 4000 x 3000 großes Foto ist in einer 1200 x 1200 großen Box untergebracht. Wie oft wird es tatsächlich gezeichnet?
Zweimal – halbiert auf 2000 x 1500, dann ein abschließender 1,67-facher Draw auf 1200 x 900. Das drawImage eines Browsers führt ein Resampling mit einem kleinen Kernel durch. Wenn Sie ihn also bitten, in einem Schritt von 4000 breit auf 400 zu wechseln, wird etwa ein Zehntel der Eingabepixel gelesen und die anderen neun verworfen: Feine Details verwandeln sich in Aliasing und Text schimmert. Halbierung bedeutet, dass jedes Ausgabepixel der Durchschnitt von genau vier Eingaben ist, was ein richtiger Boxfilter tut, und das Anhalten der Leiter, während beide Seiten noch über dem Doppelten des Ziels liegen, hält die letzte Zeichnung unter 2x – der Größe, die ein kleiner Kernel korrekt verarbeitet.
factor = min(1200 / 4000, 1200 / 3000)Die Box gibt zwei Grenzen vor. Beide Seiten werden mit einem von ihnen multipliziert, niemals mit ihrem eigenen.
= min(0.30, 0.40) = 0.30Je kleiner, damit das Bild in die Box passt und nicht über den Rand hinausragt. Hier greift die Höhenbeschränkung nie, denn das Foto ist breiter als hoch.
width = round(4000 x 0.30) = 1200Wenn man Breite und Höhe getrennt berechnet und jeweils rundet, erhält man ein 3:2-Foto mit 1,4999:1.
height = round(3000 x 0.30) = 900Für sich genommen nicht wahrnehmbar und sofort sichtbar, sobald es neben einem anderen Foto platziert wird.
Ein gelungenes Beispiel
Ein 4000 x 3000 großes Foto, eingepasst in eine 1200 x 1200 große Box, wobei alles andere auf den Standardwerten belassen wurde:
factor = min(1200 / 4000, 1200 / 3000)
= min(0.30, 0.40)
= 0.30
width = round(4000 x 0.30) = 1200
height = round(3000 x 0.30) = 900
Die Höhenbeschränkung greift nie, denn das Foto ist breiter als hoch. Es wird in zwei Phasen statt in einer Phase gezeichnet:
| Bühne | Größe | Reduzierung gegenüber der Stufe davor |
|---|---|---|
| Entschlüsselt | 4.000 × 3.000 | — |
| Halbiert | 2.000 × 1.500 | 2,00x |
| Finale | 1.200 × 900 | 1,67x |
und als photo-1200x900.png angeboten. Diese genauen Zahlen – die beiden Stufen, die endgültige Größe und der Dateiname – werden in der Testdatei dieses Tools bestätigt. Wenn sich also die Formel jemals ändert, ohne dass sich diese Seite mit ändert, schlägt der Build fehl.
Hier wird absichtlich keine Dateigröße veröffentlicht. Die ausgegebenen Bytes hängen von den PNG- und JPEG-Encodern des Browsers ab, die je nach Engine und Version unterschiedlich sind, und eine auf dieser Seite angegebene Zahl wäre für die meisten Leser falsch.
Was es nicht tut
Es wird nicht zugeschnitten, gedreht oder aufgefüllt. Jeder Modus skaliert das gesamte Bild; Im exakten Größenmodus werden die Proportionen durch Dehnen und nicht durch Abschneiden verändert. Es ist nicht auf eine Dateigröße ausgerichtet – Sie wählen die Pixel und die JPEG-Qualität, und die Bytes sind das, was der Encoder erzeugt. Es liest PNG, JPEG, WebP und GIF und schreibt PNG und JPEG, wobei HEIC, AVIF, TIFF, SVG und RAW-Kameraformate weggelassen werden. Es wird jeweils eine Datei benötigt. Und es behält nur das erste Bild von allem, was animiert ist.
Es ändert auch nicht das Format für Sie. Das Konvertieren von PNG in JPEG ist eine separate Entscheidung mit eigenen Kompromissen, und die Durchführung nach der Größenänderung ist die Reihenfolge, in der die kleinere Datei entsteht.
So wird es gemacht
- Lesen Sie die ersten Bytes der ausgewählten Datei und ermitteln Sie allein daraus, ob es sich um ein PNG, ein JPEG, ein WebP oder ein GIF handelt und wie viele Pixel sie enthalten soll. Der deklarierte Typ der Datei wird nicht herangezogen, da Safari einen HEIC ohne Typ meldet.
- Lehnen Sie hier alles über 80 Megapixel ab, bevor Sie ein Byte zuweisen. Ein dekodiertes Bild kostet unabhängig von der Dateigröße vier Bytes pro Pixel. Ein 100-Megapixel-Panorama benötigt also 400 MB Speicher, den ein Browser-Tab nicht hat.
- Dekodieren Sie das Bild mit dem browsereigenen Decoder und fragen Sie dabei explizit nach der anzuwendenden EXIF-Ausrichtung, sodass ein im Hochformat aufgenommenes Foto so gemessen wird, wie es aussieht, und nicht so, wie der Sensor es aufgenommen hat.
- Berechnen Sie einen Skalierungsfaktor aus den dekodierten Abmessungen und multiplizieren Sie beide Seiten damit, wobei Sie jeweils auf ein ganzes Pixel runden. Nur der exakte Größenmodus verwendet zwei Faktoren, und zwar nur, weil er angewiesen wurde, die Proportionen zu ignorieren.
- Halbieren Sie das Bild wiederholt, bis eine weitere Halbierung überschießt, und zeichnen Sie dann den letzten Schritt direkt zum Ziel. Ein Browser führt ein Resampling mit einem kleinen Kernel durch, sodass bei einer einzigen 10-fachen Reduzierung etwa ein Pixel von zehn abgetastet und der Rest verworfen wird.
- Füllen Sie die Leinwand zuerst mit der matten Farbe, wenn die Ausgabe JPEG ist, da JPEG keinen Alphakanal hat und aus einem transparenten Pixel etwas werden muss.
- Kodieren Sie die endgültige Leinwand als PNG oder JPEG, lesen Sie den vom Browser als tatsächlich geschriebenen Typ zurück und bieten Sie ihn als Download an, benannt nach dem Original mit angehängten neuen Abmessungen.
Wovon es ausgeht
- Beide Seiten werden um einen Faktor skaliert und anschließend auf ganze Pixel gerundet, sodass sich die Proportionen um bis zu einem halben Pixel verschieben können. Bei einem 4000-Pixel-Foto entspricht das einer Änderung von etwa 0,01 % und ist die einzige Möglichkeit, eine viel größere Abweichung durch die unabhängige Abrundung der beiden Seiten zu vermeiden.
- EXIF-Ausrichtung wird angewendet. Ein Foto, dessen Dateikopf „4000 x 3000“ lautet, das aber ein Vierteldrehungs-Tag trägt, wird als 3000 x 4000 behandelt, weil es das ist, was Sie in Ihrem Fotobetrachter sehen und mit dem alle darunter liegenden Dimensionen übereinstimmen müssen.
- Der Schalter „Niemals größer machen“ gilt für die Modi „Box“, „Breite“ und „Höhe“, die ein Ziel beschreiben, in das das Bild passen muss. Ein Prozentsatz oder eine exakte Größe wird wörtlich genommen, sodass sich 200 % vergrößern.
- Von einem animierten GIF oder WebP bleibt nur der erste Frame erhalten. Eine Leinwand enthält einen Frame, und für die erneute Zusammenstellung einer Animation wäre ein Encoder erforderlich, den der Browser nicht bereitstellt.
- Ein eingebettetes Farbprofil wird normalerweise gelöscht. Die meisten Engines konvertieren ein Foto mit großem Farbraum in sRGB, wenn es auf eine Leinwand gezeichnet wird, sodass ein Adobe RGB-Bild etwas flacher als das Original aussehen kann.
- Ein JPEG wird dekodiert und neu kodiert, niemals kopiert. Selbst bei 100 % Qualität gehen dabei etwas mehr Details verloren, weshalb bei „Originalformat beibehalten“ ein WebP oder ein GIF als verlustfreies PNG und nicht als JPEG geschrieben wird.
- KB bedeutet 1.024 Bytes und MB bedeutet 1.024 KB, was ein Desktop-Dateimanager anzeigt und daher mit dem Wert verglichen wird.
Fragen
Wird mein Bild irgendwo hochgeladen?
Nein. Die Datei wird in diesem Browser-Tab gelesen und von einem Worker, der auf Ihrem eigenen Computer ausgeführt wird, in der Größe geändert. Dabei wird derselbe Bilddecoder verwendet, den der Browser verwendet, um ein Foto auf jeder anderen Seite anzuzeigen. Es gibt keinen Server, an den es gesendet werden kann, und der automatische Test für diese Seite schlägt fehl, wenn eine Anfrage diese Site verlässt, während ein Bild geladen wird.
Warum ist mein animiertes GIF jetzt ein einzelner Frame?
Weil eine Leinwand jeweils einen Rahmen enthält. Der erste Frame wird dekodiert, in der Größe geändert und ausgeschrieben, der Rest wird verworfen. Für die ordnungsgemäße Größenänderung einer Animation ist ein Encoder erforderlich, der die Frames mit ihrem Timing zurückschreiben kann, und ein Browser stellt keinen für GIF oder WebP zur Verfügung.
Warum wurde die Datei größer statt kleiner?
Normalerweise, weil ein Foto als PNG geschrieben wurde. PNG ist verlustfrei, sodass ein als PNG neu kodiertes Foto selbst bei einem Bruchteil der Pixel ein Vielfaches der Größe des JPEG-Bildes haben kann, aus dem es stammt. Wählen Sie JPEG unter „Schreiben als“ und die Datei wird viel kleiner sein. Die andere Ursache ist ein sehr kleines Bild, bei dem der feste Overhead des Formats den größten Teil der Datei ausmacht.
Warum wird mein kleines Foto dadurch nicht größer?
„Niemals größer machen“ ist standardmäßig aktiviert und wird von den Box-, Breiten- und Höhenmodi berücksichtigt. Durch die Vergrößerung werden Pixel erfunden: Ein auf 1920 gestrecktes 600-Pixel-Foto ist eine größere, unschärfere Datei ohne weitere Details. Schalten Sie den Schalter unter „Weitere Optionen“ aus, wenn Sie es trotzdem möchten, oder verwenden Sie den Prozentmodus, der wörtlich genommen wird.
Kann ich die Größe eines HEIC-Fotos von meinem iPhone aus ändern?
Nicht hier. HEIC und AVIF werden mit einer entsprechenden Meldung abgelehnt, da die Leinwand des Browsers nicht zuverlässig dekodieren kann. Ein anderthalb dekodiertes Foto ist schlimmer als eine Ablehnung. Exportieren Sie das Foto als JPEG aus der Foto-App oder stellen Sie die Kamera auf „Am kompatibelsten“ ein, dann wird die Größe normal angepasst.
Ändern sich die Farben?
Etwas geringer, wenn das Original ein Farbprofil mit großem Farbraum hatte. Wenn Sie ein Bild auf eine Leinwand zeichnen, wird es in den Leinwandfarbraum konvertiert, der in den meisten Engines sRGB ist, sodass ein Adobe RGB- oder Display P3-Foto möglicherweise etwas flacher aussieht. Ein sRGB-Bild, das fast alles aus dem Internet darstellt, ist davon nicht betroffen.