Bild prozentual skalieren

Sie geben die ursprüngliche Breite und Höhe sowie den Prozentsatz an und erhalten die resultierenden Abmessungen, auf ganze Pixel gerundet, zusammen mit der endgültigen Megapixelzahl. Es ist reine Arithmetik — es wird kein Bild hochgeladen, verarbeitet oder gespeichert —, daher läuft die Berechnung sofort in Ihrem Browser und identisch über die API, wenn Sie sie in einem Build-Skript, einer Thumbnail-Pipeline oder einer Layoutberechnung benötigen, die die exakte Box kennen muss, die ein Bild einnehmen wird, bevor es überhaupt existiert.

Warum prozentuale Skalierung trügerisch einfach ist

Ein Bild auf einen Prozentsatz zu skalieren sieht nach einer einzigen Multiplikation aus, doch die Details entscheiden darüber, ob Ihr Layout bricht. Jede Seite muss unabhängig skaliert und auf ein ganzes Pixel gerundet werden, denn so etwas wie 640,5 Pixel gibt es nicht. Wer 1920 naiv mit 33 Prozent multipliziert, erhält 633,6, was kein Renderer akzeptiert; dieser Rechner liefert 634. Die Rundungsregel ist besonders bei kleinen Bildern entscheidend: Ein 11-Pixel-Icon auf 15 Prozent zu verkleinern ergibt 1,65 Pixel, und die ehrliche Antwort ist 2, nicht eine abgeschnittene 1, die das Seitenverhältnis stillschweigend verzerrt. Wenn Sie diese Zahlen kennen, bevor Sie das Bild anfassen, können Sie in einem Thumbnail-Auftrag die richtige Canvas-Größe reservieren, die korrekten width- und height-Attribute in Ihr HTML schreiben, damit die Seite beim Laden des Bildes nicht neu umbrochen wird, und überprüfen, ob ein Stapelkonverter das geliefert hat, was Sie angefordert haben. Das Tool Bild prozentual skalieren führt genau diese Berechnung deterministisch durch, sodass die Antwort, die Sie im Browser sehen, Byte für Byte die Antwort ist, die die API Ihrem Code zurückgibt.

Wie die Berechnung funktioniert

Die Formel besteht aus einer Zeile pro Dimension: neue Seite gleich ursprüngliche Seite mal Prozentsatz geteilt durch einhundert, gerundet auf das nächste ganze Pixel. Ein Prozentsatz von 50 halbiert das Bild, 100 lässt es unverändert, und 250 vergrößert es um das Zweieinhalbfache. Breite und Höhe verwenden denselben Faktor, und genau das bewahrt das Seitenverhältnis — abgesehen vom unvermeidlichen Sub-Pixel-Rundungsfehler, wenn ganze Pixel das exakte Verhältnis nicht ausdrücken können. Das Ergebnis enthält außerdem die Megapixelzahl der Ausgabe, also die Zahl, die Dateigröße und Speicherbedarf tatsächlich vorhersagt: Eine Skalierung auf 50 Prozent halbiert die Pixel nicht, sondern viertelt sie, denn die Fläche wächst mit dem Quadrat der Seiten. Der Prozentsatz muss positiv sein; null oder ein negativer Wert wird als ungültige Eingabe abgelehnt, statt stillschweigend ein Bild mit null Abmessungen zu erzeugen, und eine berechnete Seite kann nie unter ein Pixel fallen. Jedes Beispiel auf dieser Seite wurde durch Ausführen des echten Handlers erzeugt — was Sie lesen, ist also genau das, was Sie bekommen.

Wo es in einen echten Arbeitsablauf passt

Frontend-Entwickler nutzen es, um responsive srcset-Einträge zu berechnen: Aus einem 2400-Pixel-Master ergeben die 25-, 50- und 75-Prozent-Varianten 600, 1200 und 1800 Pixel, und diese Zahlen wandern direkt ins Markup. Designer verwenden es, wenn ein Kunde ein Foto mit 30 Prozent für einen Newsletter anfragt und jemand bestätigen muss, dass das Ergebnis noch die Mindestbreite der E-Mail-Vorlage erfüllt. Backend-Ingenieure rufen die API innerhalb von Pipeline-Prüfungen auf, vergleichen die Abmessungen, die ein Konverter erzeugt hat, mit denen, die er hätte erzeugen sollen, und lassen den Auftrag fehlschlagen, wenn sie auseinanderfallen. Da diese Fähigkeit reine Mathematik ohne Dateiverarbeitung ist, kostet es nichts, sie viele Male auszuführen: Die Browser-Version auf dieser Seite ist kostenlos und unbegrenzt, und die API berechnet bei der Automatisierung nur $0.002 pro Aufruf. Wenn Sie stattdessen die Pixel selbst transformieren müssen, statt die Abmessungen zu berechnen, ist das eine andere Fähigkeit; diese hier existiert, damit der Planungsschritt exakt, schnell und günstig genug ist, um für jedes Bild im Stapel zu laufen.