Ich habe ein konvertiertes Logo einmal an die Website eines Kunden verschickt und es kam mit einem schwarzen Rechteck zurück, wo sich früher der transparente Hintergrund befand. Ich hatte ein PNG in JPEG umgewandelt, ohne darüber nachzudenken. Der seltsame Teil war, dass ich erwartet Weiß - jeder Artikel, den ich gelesen hatte, sagte Transparenz "werden weiß." Es wurde schwarz, und ich verbrachte zwanzig Minuten davon, dass mein Code kaputt war, bevor ich die HTML-Spezifikation las und feststellte, dass der Browser genau das tat, was ihm gesagt wurde.
Das ist das ehrliche Thema dieses Leitfadens. der Bildformat-Konverter Auf toolz.dev ist ein dünner Wrapper über dem eigenen Canvas-Encoder. Das gibt ihm echte Vorteile - nichts Uploads, es ist sofort, es funktioniert einmal offline - und echte Grenzen, die die meisten Bilder in ein Format konvertieren ", das nicht zulässt. Ich habe dieses gebaut, also werde ich Ihnen beide Hälften sagen.
tl; dr: der Bildformat-Konverter Nimmt jedes Bild, das Ihr Browser öffnen und als neu codieren kann PNG, JPEG oder WebP - Diese drei und nur diese drei. Es gibt keine AVIF-, GIF- oder SVG-Ausgabe, da das Tool den Canvas-Encoder des Browsers verwendet und das die Canvas unterstützt. Wählen Sie ein Ziel aus, ziehen Sie den Qualitätsschieber (nur JPEG und WebP - PNG ignoriert ihn), Download. Zwei Dinge, die Sie vor der Konvertierung wissen sollten: Transparenz-Komposits auf Schwarz, wenn Sie JPEG anvisieren, nach Spezifikation und EXIF-Metadaten werden entfernt Bei jeder Konvertierung trägt ein Canvas-Neukodieren nur Pixel. Um Dateien zu verkleinern, koppeln Sie sie mit dem Bildkompressor und das Bildgröße ändern Werkzeug
Was unterstützt dieser Konverter eigentlich?
Lassen Sie uns zuerst den Bereich richtig machen, da die meisten Formatführer hier überverkaufen.
Eingabe: Der Dateiauswahl-Anschluss akzeptiert image/*, und die Datei wird in eine Ebene geladen <img> Element Wenn Ihr Browser es also anzeigen kann, kann das Tool es lesen - PNG, JPEG, WEBP, GIF, BMP, AVIF und in den meisten modernen Browsern, SVG.
Ausgabe: PNG, JPEG, Webp. Drei Schaltflächen. Das ist die Liste.
Der Grund ist nicht Faulheit, sondern die Plattform. Das Tool zeichnet Ihr Bild auf a <canvas> und ruft canvas.toBlob(callback, type, quality)drohen Der HTML-Living-Standard erfordert, dass jeder Browser unterstützt wird image/png für diesen Aufruf und lassen andere Formate optional; in der Praxis image/jpeg und image/webp werden überall unterstützt und image/avif Codierung ist nicht. Es gibt keine Browser-API, um ein AVIF oder ein GIF von einer Leinwand zu schreiben. Eine Website, die Ihnen die AVIF-Ausgabe anbietet, besteht entweder aus dem Versand eines WebAssembly-Encoders (hundert Kilobyte Download) oder - weitaus häufiger - das Hochladen Ihres Bildes auf einen Server. Weder das, was dieses Werkzeug tut.
Hier ist also die ehrliche Vergleichstabelle, Tool-First:
| du willst | Dieses Werkzeug | wieso |
|---|---|---|
| PNG → JPEG | ja | Leinwand codiert image/jpeg |
| PNG → WebP | ja | Leinwand codiert image/webp |
| JPEG → WebP | ja | Die nützlichste Konvertierung hier |
| WebP → PNG/JPEG | ja | Für Tools, die webp noch nicht lesen können |
| avif → webp | Ja (avif in nur) | Browser dekodiert AVIF; kann es nicht codieren |
| Alles → Avif | kein | Es ist kein Canvas-AVIF-Encoder vorhanden |
| Animiertes GIF → Animiertes WebP | kein | ein <img> Gibt der Leinwand einen Rahmen |
| Alles → SVG | kein | SVG ist Vektor; Dies ist eine Raster-Pipeline |
| Stapel von 200 Dateien | kein | eine Datei nach der anderen |
Wenn Sie AVIF oder animierte WebP benötigen, verwenden Sie squoosh lokal, cwebp/avifenc über die Befehlszeile oder den Imageschritt Ihrer Build-Pipeline. Ich würde dir lieber einen nützlichen Ort schicken, als so zu tun.
Warum färbt JPEG meinen transparenten Hintergrund schwarz?
Weil die Spezifikation das sagt, und das habe ich erst nach dem Client-E-Mail erfahren.
JPEG hat keinen Alphakanal. Wenn Sie eine Leinwand auffordern, ein Format zu serialisieren, das Alpha nicht unterstützt, lautet der HTML-Living-Standard explizit: Die Bitmap muss auf einem Einfarbiger schwarzer Hintergrund vor der Codierung. nicht weiß. schwarz Chrome, Firefox und Safari folgen alle, weshalb das Verhalten konsistent ist und warum es alle genau einmal überrascht.
Also: Wenn Sie ein transparentes PNG-Logo in JPEG konvertieren, erhalten Sie eine schwarze Box dahinter. Jedes Mal. Das ist kein Fehler im Tool, es ist die konsistente Plattform, und es wird kein Problem behoben, durch das der Qualitätsregler gezogen wird.
Was tun stattdessen:
- Transparenz halten? Zielscheibe PNG oder WebPdrohen Beide tragen Alpha. WEBP wird normalerweise das kleinere der beiden sein.
- Benötigen Sie JPEG speziell? Flach das Bild auf die Hintergrundfarbe, die du eigentlich in einem Editor möchtest, dann umrechnen
- Nur ein Foto konvertieren? Fotos haben keine Transparenz, so dass dies nie auftaucht. weg konvertieren.
Dies ist die gängigste Art und Weise, wie Menschen ein Bild mit einem Konverter beschädigen, und es lohnt sich, sie zu verinnerlichen: Alpha ist eine Eigenschaft des Formats, nicht Ihrer Datei. Wenn Sie sich für JPEG entscheiden, wird der Alphakanal weggeworfen.
Was geht sonst noch in einer Leinwand-Neukodierung verloren?
Eine Leinwand enthält Pixel. Nur Pixel. Alles andere in Ihrer Originaldatei wird verworfen, wenn der Browser neu codiert, und dies fängt die Leute auf:
Exif ist weg. Kamera-Marke und -Modell, Objektiv, Belichtung, Erfassungsdatum, Urheberrechtsfelder und GPS-Koordinaten Alle verschwinden. Dies ist ein Zufall in der Privatsphäre - Konvertieren eines Telefonfotos, bevor Sie es veröffentlichen, um den Ort zu entfernen, an dem es aufgenommen wurde. Wenn Sie jedoch ein Archivar sind oder das Copyright-Feld benötigen, um zu überleben, führen Sie keine Originale durch einen Canvas-basierten Konverter aus. eine Kopie konvertieren.
Farbprofile werden abgeflacht. Ein Bild mit einem breiten Gamut-Profil wie Display P3 oder Adobe RGB wird auf eine Leinwand gezeichnet, die es in der Praxis als sRGB behandelt. Für Web-Bilder möchten Sie das sowieso. Für Druckarbeiten ist es nicht.
Die Animation wird auf einen Frame zusammengebrochen. ein <img> Element gibt die Leinwand, was auch immer der Rahmen zeigt. Wenn Sie ein animiertes GIF von zwölf Sekunden eingeben, erhalten Sie eine einzige still. Das Tool warnt Sie nicht davor, was ich eher als echte raue Kante als als Feature betrachte.
Alles andere codiert aus dekodierten Pixeln neu. Was uns zu der einen Regel bringt, die am wichtigsten ist.
Was ist Generationsverlust und wie vermeide ich es?
Jedes Mal, wenn Sie ein verlustbehaftetes Format speichern, wirft der Encoder Daten weg. Werfen Sie Daten weg, dekodieren Sie sie und werfen Sie mehr weg, und die Schadensverbindungen. Dies ist ein Generationsverlust, und es ist der Grund, warum Ihre Mem-Vorlagen so aussehen, als würden sie gefaxt.
Die Regel ist kurz: Konvertieren Sie immer vom besten Original, das Sie haben, niemals von einer konvertierten Kopie.
Konkret ist JPEG → WebP → JPEG zweimal schlechter als das ursprüngliche JPEG. Die ersten Codierungsartefakte werden durch die zweite Encode-Datei als echtes Bilddetail behandelt, das treu mit Bits aufbewahrt wird, die sie erhalten. Wenn Sie eine RAW-Datei oder einen PNG-Export haben, beginnen Sie dort.
Es gibt eine Folge, die Menschen auf die Beine stellt: Das Konvertieren von JPEG in PNG stellt die Qualität nicht wieder her. PNG ist verlustfrei, so dass Ihr Bild perfekt erhalten bleibt - einschließlich jedes bereits in die Pixel eingebrannten Kompressionsartefakts. Das gleiche beschädigte Bild in einer Datei erhalten Sie drei- oder viermal so viel. PNG-FROM-JPEG lohnt sich nur als Zwischenschritt, wenn Sie viele Bearbeitungsrunden durchführen und bei jedem Speichern vermeiden möchten, erneut zu komprimieren.
Welches Format soll ich eigentlich wählen?
Überspringen Sie das Format Taxonomie; hier ist die Entscheidung in der Reihenfolge, in der ich es tatsächlich mache.
Ist es ein Foto? webp bei 80–85. Wenn etwas in Ihrer Pipeline webp nicht lesen kann, JPEG bei 80–85.
Hat es Transparenz? webp.png, wenn Sie maximale Kompatibilität benötigen.
Ist es ein Screenshot, ein UI-Mock, ein Diagramm oder irgendetwas mit Text und flacher Farbe? PNG oder Webp. JPEGs diskrete Kosinus-Umwandlung scharfe Kanten in sichtbare Mückenrauschen um den Schriftzug - es wurde Ende der 1980er Jahre für kontinuierliche Tonaufnahmen entworfen (das Format ist standardisiert als ITU-T T.81 / ISO / IEC 10918-1) und Text ist genau der Inhalt, den es am schlechtesten handhabt.
Ist es ein Logo oder ein Symbol, für das Sie die Quelle steuern? Weder - verwenden Sie SVG und setzen Sie es überhaupt nicht über einen Raster-Konverter.
Für die dahinterstehenden Spezifikationen: PNG ist ISO/IEC 15948, und WebP wurde schließlich als veröffentlicht RFC 9649 2024, vierzehn Jahre nachdem Google es ausgeliefert hatte. In der eigenen Vergleichsstudie ist die eigene Vergleichsstudie webp um etwa 25–34% kleiner als JPEG und bei äquivalenten SSIM-Werten um etwa 26% kleiner als PNG. Dies sind die Nummern des Anbieters auf dem Korpus des Anbieters - behandeln Sie sie als starken Hinweis und nicht als Versprechen über Ihr spezifisches Image. Der Grund, warum ich sie gerne zitiere, ist, dass sie meine Ergebnisse im Laufe der Jahre auf echten Screenshots und Fotos genau genug abgestimmt haben. Ihre können sich unterscheiden, weshalb das Tool Ihnen die Quellgröße vor der Konvertierung anzeigt.
Wie konvertiere ich ein Bild auf toolz.dev?
Schritt 1: Öffnen Sie den Konverter
Gehe zum Bildformat-Konverterdrohen Nichts zu installieren, kein Konto.
Schritt 2: Laden Sie Ihr Bild hoch
Klicken Sie auf den Bereich Upload und wählen Sie eine Datei aus. Es wird über eine Objekt-URL in Ihren Browser geladen - die Datei wird nie irgendwohin gesendet. Sie sehen den Dateinamen und seine Größe.
Schritt 3: Überprüfen Sie die Formatanzeige
Das Werkzeug zeigt Aktuell → Zieldrohen "Aktuell" wird aus dem MIME-Typ der Datei gelesen, also a .jpg Dateiberichte als JPEGdrohen Nützliche Überprüfung der Sanitätsprüfung, wenn jemand die Erweiterung einer Datei umbenannt hat, ohne sie tatsächlich zu konvertieren, was mehr passiert, als Sie denken.
Schritt 4: Wählen Sie Ihr Ziel
PNG, JPEG oder WebP.
Schritt 5: Qualität einstellen – wenn es zutrifft
Der Qualitätsregler (1–100, standardmäßig 90) Erscheint nur für JPEG und WebPdrohen Das ist absichtlich: PNG ist verlustfrei und canvas.toBlob ignoriert das Qualitätsargument völlig für image/pngEin Schieberegler zu zeigen, der nichts tut, wäre eine Lüge.
Für die Einstellung: 90 ist die Standardeinstellung und für die meisten Inhalte fast nicht vom Original zu unterscheiden. Wo arbeite ich eigentlich - sinnvoll kleiner, noch sauber. Unter 60 sehen Sie es auf Fotos, und auf allem, was mit Text ist, werden Sie es viel früher sehen.
Schritt 6: Konvertieren und herunterladen
stoßen an Konvertieren & amp;drohen Die Codierung erfolgt auf Ihrem Computer und die Datei wird als gespeichert converted_<original-name>.<ext>drohen Die Abmessungen bleiben genau erhalten - der Konverter übergibt die eigene Breite und Höhe Ihres Bildes, so dass dieser Schritt die Codierung und nichts anderes ändert.
Konvertieren oder komprimieren - welche brauche ich?
Die Leute greifen nach einem Konverter, wenn sie eine kleinere Datei wollen, und oft ist dies das falsche Werkzeug. Drei verschiedene Jobs, drei verschiedene Werkzeuge:
| Tor | Werkzeug | Was ändert sich |
|---|---|---|
| Ändern Sie die Codierung | Formatkonverter | Format, Qualität |
| Gleiches Format, kleinere Datei | Bildkompressor | Nur Qualität |
| Weniger Pixel | Bildgröße ändern | Maßstab |
Und der größte Sieg ist fast immer derjenige, den man überspringen kann. Wenn Sie ein 4000 × 3000-Foto in einem 1200-Px-Weitenlayout servieren, Die Größe der Größe schlägt jede Formatwahl kombiniert - Sie werfen 90% der Pixel weg, die der Browser ohnehin verkleinern und verwerfen wollte. Zuerst die Größe ändern, dann konvertieren. Wenn Sie dies in dieser Reihenfolge tun, dauert es routinemäßig 4 MB PNG unter 200 KB, und es wird keine clevere Formatauswahl auf dem Original in voller Größe näher.
Eine weitere Gewohnheit, die es wert ist, aufzubauen: Behalten Sie Ihre Originale. archivieren verlustfreie Master, erzeugen verlustbehaftete Derivate zur Verteilung. Wenn Avif-überall endlich eintrifft oder das nächste Format danach, werden Sie aus sauberen Quellen wieder exportieren, anstatt das Bedauern zu erhöhen.
Häufig gestellte Fragen
Welches Bildformat eignet sich am besten für Websites?
webp, für die meisten Inhalte. Es ist kleiner als JPEG für Fotos und kleiner als PNG für Grafiken, unterstützt Transparenz und jeder aktuelle Browser liest ihn - Safari war der letzte Holdout und wurde in Version 14 unterstützt. AVIF komprimiert noch besser, aber Sie können es nicht in einem Browser-Canvas erstellen, Sie benötigen einen Build-Schritt oder einen Desktop-Encoder.
Kann dieses Tool mein Bild in AVIF konvertieren?
kein drohen Der Konverter gibt nur PNG, JPEG und WebP aus, da er den Canvas-Encoder des Browsers verwendet und kein Browser AVIF von einer Leinwand aus codieren kann. Ihr Browser kann entschlüsseln AVIF, also können Sie eine AVIF-Datei konvertieren auf WebP oder PNG hier - nur nicht in die andere Richtung. Verwenden Sie für den AVIF-Ausgang einen Kommandozeilen-Encoder wie avifenc oder die Bildpipeline Ihres Frameworks.
Warum hat mein transparentes PNG nach der Konvertierung in JPEG einen schwarzen Hintergrund erhalten?
Da JPEG keinen Alphakanal hat und die HTML-Spezifikation besagt, dass ein Canvas-Serialisierungsprogramm ohne Alpha-Unterstützung das Bild auf einem durchgehenden schwarzen Hintergrund zusammenfassen muss. Es ist ein spezifiziertes Verhalten, kein Fehler, und es ist in jedem Browser dasselbe. Konvertieren Sie stattdessen in PNG oder webP, wenn Sie Transparenz benötigen.
Entfernt das Konvertieren eines Bildes seine EXIF-Daten?
Ja - alles, einschließlich GPS-Koordinaten, Kameraeinstellungen und Aufnahmedatum. Das Tool zeichnet Ihr Bild auf eine Leinwand und kodiert die Pixel neu, und eine Leinwand enthält keine Metadaten. Dies ist nützlich, wenn Sie Standortdaten entfernen, bevor Sie ein Foto veröffentlichen, und ein Problem, wenn Sie die Metadaten benötigen. Behalten Sie also ein nicht konvertiertes Original in so oder so.
Kann ich ein animiertes GIF in ein animiertes webp konvertieren?
Nicht mit diesem Werkzeug. Es lädt Ihr Bild in ein <img> Element und erfasst einen einzelnen Frame auf der Leinwand, sodass ein animiertes GIF als Standbild herauskommt. Animiertes WebP erfordert einen echten Multi-Frame-Encoder — verwenden gif2webp von Googles WebP-Tools oder konvertieren Sie die Animation in MP4, die dramatisch kleiner als beides ist.
Verbessert die Konvertierung von JPEG in PNG die Qualität?
kein PNG ist verlustfrei, so dass es genau das bewahrt, was es gegeben hat - einschließlich der Kompressionsartefakte, die bereits in die Pixel von JPEG gebacken wurden. Sie haben ein identisch aussehendes Bild in einer viel größeren Datei. Datenverlust geht verloren, kein Formatwechsel bringt sie zurück.
Gibt es eine Dateigrößenbeschränkung?
Es wird keine harte Grenze durchgesetzt. Die praktische Decke ist der Speicher Ihres Geräts, da das gesamte Bild in einer Leinwand-Bitmap mit einer Größe von ungefähr × Höhe × 4 Byte dekodiert wird. Ein 8000 × 6000-Foto benötigt etwa 192 MB RAM als RAW-Pixel, bevor die Codierung überhaupt beginnt. Desktop-Browser verarbeiten die typische Kameraausgabe ohne Beschwerde, ältere Telefone können mit sehr großen Dateien zu kämpfen haben.
Was ist der Unterschied zwischen PNG und JPEG?
JPEG ist verlustbehaftet und für Fotos gebaut: Es verwirft feine Details, um kleine Dateien zu erreichen, und es hat keine Transparenz. PNG ist verlustfrei und wird für Grafiken, Screenshots und Logos entwickelt: Es hält jedes Pixel genau und unterstützt einen transparenten Hintergrund auf Kosten größerer Dateien für Fotos. Sie können hier zwischen ihnen konvertieren, aber denken Sie daran, dass ein transparentes PNG gespeichert wird, das als JPEG-Datei gespeichert wird, da JPEG keinen Alpha-Kanal hat.
Wie konvertiere ich ein Bild kostenlos in WebP?
Laden Sie Ihr PNG oder JPEG, wählen Sie WebP als Ausgabeformat, stellen Sie die Qualität ein, wenn Sie eine kleinere Datei wünschen, und laden Sie es herunter - sie ist kostenlos und läuft vollständig in Ihrem Browser. WebP ist normalerweise die Umwandlung, die es wert ist, für das Web zu erstellen, da es kleiner als JPEG und PNG ist, während es weiterhin Transparenz unterstützt und von jedem aktuellen Browser gelesen wird.
Wird mein Bild auf einen Server hochgeladen?
kein drohen Die Datei wird lokal mit einer Objekt-URL gelesen, von Ihrem Browser dekodiert, von Ihrem Browser neu codiert und von Ihrem Browser gespeichert. Sie können dies selbst überprüfen: Öffnen Sie DevTools, gehen Sie auf die Registerkarte Netzwerk und konvertieren Sie ein Bild - Sie werden keinen Upload sehen. Sobald die Seite geladen wurde, funktioniert die Konvertierung mit ausgeschaltetem WLAN.
Die Kurzversion
Ein Browser-Canvas ist ein guter, ehrlicher Bildkonverter für drei Formate und ein schlechter für alles andere. In PNG, JPEG und WEBP ist es sofort, privat und kostenlos und deckt die Konvertierung ab, die für das Web tatsächlich wichtig ist: Veröffentlichen Sie Ihre Fotos auf WebP. Außerhalb dieser drei kann es nicht helfen, und ich würde es lieber sagen, als Sie mit einem schwarzen Rechteck auf der Homepage eines Kunden herausfinden zu lassen.
Fragen Sie vor der Konvertierung, ob Sie Transparenz benötigen (dann nicht JPEG), ob Sie die Metadaten benötigen (dann das Original behalten) und ob das Bild einfach zu viele Pixel ist (dann Größe ändern zuerst). Holen Sie sich diese drei richtig und die Formatauswahl ist der einfache Teil.
der Bildformat-Konverter ist hier. Für den Rest des Bild-Workflows gibt es die Bildkompressor, das Bildgröße ändern Werkzeug und — für flache Hintergrundausschnitte – Hintergrundentfernerdrohen Das breitere Bild ist in der Anleitung für Bildwerkzeuge und das Bildkomprimierungshandbuchdrohen
