Ik heb een keer een geconverteerd logo naar de site van een klant verzonden en het kwam terug met een zwarte rechthoek waar de transparante achtergrond vroeger was. Ik had een PNG omgezet naar JPEG zonder erover na te denken. Het vreemde was dat ik verwachtend wit - elk artikel dat ik had gelezen zei transparantie & quot; wordt wit." Het werd zwart, en ik besteedde twintig minuten aan de veronderstelling dat mijn code was gebroken voordat ik de HTML-specificatie las en ontdekte dat de browser precies deed wat hem werd verteld.
Dat is het eerlijke thema van deze gids. de Converter voor afbeeldingsformaat op Toolz.dev is een dunne wrapper over de browser's eigen canvas encoder Dat geeft het echte voordelen - niets uploads, it's instant, het werkt offline eenmaal geladen - en echte limieten die de meeste & quot; converteer elke afbeelding naar elk formaat" pagina's zullen niet toegeven aan. Ik heb deze gebouwd, dus I' zal je beide helften vertellen.
tl;dr: de Converter voor afbeeldingsformaat neemt elke afbeelding die uw browser kan openen en codeert deze opnieuw als PNG, JPEG of WEBP- die drie, en alleen die drie Er is geen AVIF, GIF, of SVG-uitvoer, omdat de tool de browser' s canvas encoder gebruikt en dat is wat het canvas ondersteunt Kies een doel, sleep de kwaliteit slider (alleen JPEG en WebP - PNG negeert het), download Twee dingen die u moet weten voordat u converteert: Transparantiecomposieten op zwart wanneer u JPEG target, per specificatie en EXIF-metadata wordt gestript Bij elke conversie, omdat een canvas opnieuw codeert, draagt alleen pixels. Om bestanden te verkleinen, koppelt u deze aan de afbeeldingscompressor en de Afbeelding wijzigen gereedschap.
Wat ondersteunt deze converter eigenlijk?
Laten we eerst de scope goed krijgen, want dit is waar de meeste indelingen oversell leiden.
Invoer: De bestandskiezer accepteert image/*en het bestand wordt in een vlakte geladen <img> element. Dus als uw browser het kan weergeven, kan de tool het lezen - PNG, JPEG, WebP, GIF, BMP, AVIF, en in de meeste moderne browsers, SVG.
Uitgang: PNG, JPEG, Webp. Drie knoppen. Dat is de lijst.
De reden is niet luiheid, het is het platform. De tool tekent uw afbeelding naar een <canvas> en belt canvas.toBlob(callback, type, quality). De HTML Living Standard vereist dat elke browser wordt ondersteund image/png voor die oproep en laat andere formaten optioneel; in de praktijk, image/jpeg en image/webp worden overal ondersteund en image/avif codering is niet Er is geen browser API om een AVIF of een GIF van een canvas te schrijven Een site die u AVIF-uitvoer biedt is ofwel het verzenden van een WebAssembly encoder (honderden kilobytes download) of - veel vaker - het uploaden van uw afbeelding naar een server, noch is wat deze tool doet.
Dus hier is de eerlijke vergelijkingstabel, tool-first:
| je wilt | Dit gereedschap | waarom |
|---|---|---|
| PNG → JPEG | ja | Canvas codeert image/jpeg |
| PNG → WebP | ja | Canvas codeert image/webp |
| JPEG → WebP | ja | De meest bruikbare conversie hier |
| WebP → PNG/JPEG | ja | Voor tools die nog steeds geen WebP kunnen lezen |
| Avif → Webp | Ja (Afb) volgens alleen) | Browser decodeert Avif; kan het niet coderen |
| alles → Avif | heel weinig | Er bestaat geen canvas-AVIF-encoder |
| Geanimeerde GIF → Geanimeerde WebP | heel weinig | een <img> Geeft het canvas één frame |
| Alles → SVG | heel weinig | SVG is vector; dit is een rasterpijplijn |
| Batch van 200 bestanden | heel weinig | één bestand tegelijk |
Als u AVIF of geanimeerde webp nodig heeft, gebruik dan squoosh lokaal, cwebp/avifenc vanaf de opdrachtregel of de afbeeldingsstap van uw buildpijplijn. Ik stuur je liever ergens nuttigs dan te doen alsof.
Waarom maakt JPEG mijn transparante achtergrond zwart?
Omdat de specificatie het zegt, en dat heb ik pas geleerd na de e-mail van de klant.
JPEG heeft geen alfakanaal. Wanneer je een canvas vraagt om een indeling te serialiseren naar een formaat dat Alpha niet ondersteunt, is de HTML Living Standard expliciet: de bitmap moet worden samengesteld op een Solide zwarte achtergrond voor het coderen. niet wit. Zwart. Chrome, Firefox en Safari volgen dit allemaal, daarom is het gedrag consistent en waarom het iedereen precies één keer verrast.
Dus: Als u een transparant PNG-logo omrekent naar JPEG, krijgt u een zwarte doos erachter. Elke keer. Dat is geen bug in de tool, het is het platform dat consistent is, en geen enkele hoeveelheid slepen De kwaliteitsschuifregelaar lost het op.
Wat te doen in plaats daarvan:
- transparantie houden? schietwedstrijd Great of WEBP. Beide dragen alfa. WebP zal meestal de kleinste van de twee zijn.
- JPEG specifiek nodig? Maak de afbeelding plat op de achtergrondkleur die u eigenlijk in een editor wilt hebben, eerst daarna converteren.
- Alleen een foto converteren? Foto's hebben geen transparantie, dus dit komt nooit naar voren. omzetten.
Dit is de meest voorkomende manier waarop mensen een afbeelding beschadigen met een converter, en het is de moeite waard om te internaliseren: Alpha is een eigenschap van het formaat, niet van uw bestand. Het kiezen van JPEG is ervoor kiezen om het alfakanaal weg te gooien.
Wat gaat er nog meer verloren in een canvas opnieuw coderen?
Een canvas bevat pixels. Gewoon pixels. Al het andere in uw originele bestand wordt weggegooid wanneer de browser opnieuw codeert, en dit betrapt mensen:
Exf is weg. cameramerk en -model, lens, belichting, opnamedatum, copyrightvelden en GPS-coördinaten allemaal verdwijnen Dit is een privacy win per ongeluk - het converteren van een telefoonfoto voordat je deze plaatst, verwijdert de locatie waarop deze is gemaakt - maar als je ' een archivaris bent of als je het auteursrechtveld nodig hebt om te overleven, voer dan geen originelen uit via een op canvas gebaseerde converter. Converteer een kopie.
Kleurprofielen worden afgeplat. Een afbeelding die is getagd met een breed gammaprofiel zoals Display P3 of Adobe RGB wordt aangetrokken door een canvas dat het in de praktijk als sRGB behandelt. Voor webafbeeldingen is dit wat je toch wilt. Voor drukwerk is dat niet het geval.
Animatie klapt samen tot één frame. een <img> Element geeft het canvas, ongeacht het frame dat wordt weergegeven. Laat een geanimeerde GIF van twaalf seconden vallen en je krijgt een single still. De tool waarschuwt je hier niet voor, wat ik beschouw als een echte ruwe rand in plaats van een functie.
Al het andere codeert opnieuw van gedecodeerde pixels. Dat brengt ons bij de enige regel die het belangrijkst is.
Wat is generatieverlies en hoe voorkom ik het?
Telkens wanneer u een lossy-formaat opslaat, gooit de encoder gegevens weg. Gooi gegevens weg, decodeer het en gooi meer weg, en de schadeverbindingen. Dit is generatieverlies, en het is de reden waarom je meme-sjablonen eruitzien alsof ze zijn gefaxt.
De regel is kort: Converteer altijd van het beste origineel dat je hebt, nooit van een geconverteerd exemplaar.
Concreet is JPEG → WebP → JPEG erger dan de originele JPEG, twee keer over. De eerste Encodes artefacten worden behandeld als echt beelddetail door de tweede codering, die getrouwe bits besteedt aan het bewaren ervan. Als u een RAW-bestand of een PNG-export heeft, begin daar dan.
Er is een uitvloeisel dat mensen opvrolijkt: Het converteren van JPEG naar PNG, herstelt geen kwaliteit. PNG is verliesvrij, dus het zal uw afbeelding perfect behouden - inclusief elk compressieartefact dat al in de pixels is gebakken U krijgt dezelfde beschadigde afbeelding in een bestand dat drie of vier keer groter is PNG-van-JPEG is het alleen waard als tussenstap wanneer u ' staan op het punt om veel bewerkingsrondes te doen en willen voorkomen dat u bij elke opslag opnieuw comprimeert.
Welk formaat moet ik eigenlijk kiezen?
Sla de formattaxonomie over; hier is de beslissing in de volgorde die ik daadwerkelijk heb gemaakt.
Is het een foto? Webp op 80-85. Als iets in uw pijplijn WebP niet kan lezen, JPEG op 80-85.
Heeft het transparantie? Webp. png als u maximale compatibiliteit nodig heeft.
Is het een screenshot, een UI-spot, een grafiek of iets met tekst en egale kleur? PNG, of WebP. JPEG' s discrete cosinustransformatie smeert scherpe randen uit tot zichtbare muggenruis rond belettering - het werd eind jaren tachtig ontworpen voor continu-toonfoto's (het formaat is gestandaardiseerd als ITU-T T.81 / ISO/IEC 10918-1) en tekst is precies de inhoud die het slechtst verwerkt.
Is het een logo of een pictogram waarvan je de bron beheert? Geen van beide - gebruik SVG, en don' t zet het door een raster converter helemaal.
Voor de specificaties hierachter: PNG is ISO/IEC 15948 en WebP werd uiteindelijk gepubliceerd als RFC 9649 in 2024, veertien jaar nadat Google het verscheepte Op grootte, Google' s eigen vergelijkingsstudie zet WebP lossy op ruwweg 25-34% kleiner dan JPEG bij gelijkwaardige SSIM, en WebP lossless op ongeveer 26% kleiner dan PNG. Dat zijn de vendor' s nummers op de vendor' s corpus - behandelen ze als een sterke hint, geen belofte over uw specifieke afbeelding De reden dat I ' ik comfortabel citeer ze is dat ze ' hebben mijn resultaten nauw genoeg gematcht op echte screenshots en foto's door de jaren heen. De jouwe kunnen verschillen, en daarom toont u de brongrootte vóór de bron voordat u converteert.
Hoe converteer ik een afbeelding op Toolz.dev?
Stap 1: Open de converter
ga naar de Converter voor afbeeldingsformaat. Niets te installeren, geen account.
Stap 2: Upload je afbeelding
Klik op het uploadgebied en kies een bestand Het wordt in uw browser geladen via een object-URL - het bestand wordt nooit ergens naartoe verzonden U & #39; ziet de bestandsnaam en de grootte ervan.
Stap 3: Controleer de formaatuitlezing
De tool toont Huidig → Doel. "huidige" wordt gelezen uit het MIME-type van het bestand, dus een .jpg dossierrapporten als JPEG. Handige sanity-controle wanneer iemand een extensie van een bestand heeft hernoemd zonder het daadwerkelijk te converteren, wat meer gebeurt dan u denkt.
Stap 4: Kies je doel
PNG, JPEG of WebP.
Stap 5: Kwaliteit instellen - als deze van toepassing is
De kwaliteitsschuifregelaar (1-100, standaard ingesteld op 90) Alleen voor JPEG en WebP. Dat is opzettelijk: PNG is verliesloos en canvas.toBlob negeert het kwaliteitsargument volledig voor image/png, dus het tonen van een slider die niets doet, zou een leugen zijn.
Voor waar het in te stellen: 90 is de standaard en is bijna niet te onderscheiden van het origineel voor de meeste inhoud. 80-85 is waar ik eigenlijk werk - betekenisvol kleiner, nog steeds schoon Onder 60 u ' zal het zien op foto's, en op alles met tekst you' zal het veel eerder zien.
Stap 6: Converteren en downloaden
gelukkige zet converteren & downloaden. Coding gebeurt op uw machine en het bestand wordt opgeslagen als converted_<original-name>.<ext>. Afmetingen blijven precies behouden - de converter geeft uw afbeelding door' zijn eigen breedte en hoogte door, dus deze stap verandert de codering en niets anders.
Converteren of comprimeren - Welke heb ik nodig?
Mensen grijpen naar een converter wanneer ze een kleiner bestand willen, en vaak is dat de verkeerde tool. Drie verschillende banen, drie verschillende tools:
| doelwit | kwast | Wat verandert? |
|---|---|---|
| verander de codering | Formaat converter | Formaat, kwaliteit |
| Zelfde formaat, kleiner bestand | afbeeldingscompressor | Alleen kwaliteit |
| Minder pixels | Afbeelding wijzigen | afmeting |
En de grootste overwinning is bijna altijd degene die mensen overslaan. Als u een 4000 × 3000 foto in een lay-out van 1200 px breed serveert, Het verkleinen van beats elke formaatkeuze gecombineerd- jij' werpt 90% van de pixels weg die de browser zou downscalen en toch weggooien. Formaat wijzigen eerst en vervolgens converteren. Als je het in die volgorde doet, is er routinematig een PNG van 4 MB onder de 200 KB nodig, en geen enkele slimme formaatselectie op het volledige origineel komt in de buurt.
Nog een gewoonte die het waard is om te bouwen: bewaar je originelen. Archiveer lossless meesters, genereer lossy derivaten voor distributie. Wanneer Avif-Averywhere eindelijk arriveert, of het volgende formaat erna, je zult opnieuw exporteren van schone bronnen in plaats van spijt op te schalen.
Veelgestelde vragen
Welk beeldformaat is het beste voor websites?
WebP, voor de meeste inhoud. & #39; is kleiner dan JPEG voor foto's en kleiner dan PNG voor afbeeldingen, het ondersteunt transparantie en elke huidige browser leest het - Safari was de laatste holdout en voegde ondersteuning toe in versie 14. AVIF comprimeert nog beter, maar je kunt & # 39; t produceren in een browsercanvas; u hebt een buildstap of een desktop-encoder nodig.
Kan deze tool mijn afbeelding converteren naar AVIF?
heel weinig . De converter voert alleen PNG, JPEG en WebP uit, omdat het de canvas-encoder van de browser gebruikt en geen enkele browser AVIF kan coderen vanaf een canvas. Uw browser kan decoderen Avif, zodat u een AVIF-bestand kunt converteren tegen WebP of PNG hier - alleen niet de andere richting Voor AVIF-uitvoer, gebruik een opdrachtregel-encoder zoals avifenc of uw Framework's Image Pipeline.
Waarom kreeg mijn transparante PNG een zwarte achtergrond nadat ze naar JPEG was geconverteerd?
Omdat JPEG geen alfakanaal heeft en de HTML-specificatie zegt dat een canvas die naar een formaat zonder alfaondersteuning serialiseert, de afbeelding moet samenstellen op een effen zwarte achtergrond. Het is spec-gemandateerd gedrag, geen bug, en het is hetzelfde in elke browser. Converteer in plaats daarvan naar PNG of WebP als u transparantie nodig heeft.
Verwijdert het converteren van een afbeelding zijn EXIF-gegevens?
Ja - alles, inclusief GPS-coördinaten, camera-instellingen en opnamedatum De tool tekent uw afbeelding naar een canvas en codeert de pixels opnieuw, en een canvas bevat geen metagegevens. Dat en#39; is handig als u ' locatiegegevens strippen voordat u een foto plaatst, en een probleem als u de metagegevens nodig heeft, dus houd hoe dan ook een niet-omgezet origineel.
Kan ik een geanimeerde GIF converteren naar een geanimeerde webp?
Niet met dit gereedschap. het laadt je afbeelding in een <img> element en legt een enkel frame vast op het canvas, dus een geanimeerde GIF komt uit als één stilstaand beeld. Geanimeerde WebP vereist een echte multi-frame encoder - gebruik gif2webp van Google's WebP-tools, of converteer de animatie naar MP4, die dramatisch kleiner zal zijn dan een van beide.
Zal het converteren van JPEG naar PNG de kwaliteit verbeteren?
Nee. PNG is verliesvrij, dus het behoudt precies wat het ' s gegeven - inclusief de compressie artefacten die al gebakken zijn in de JPEG' s pixels Je eindigt met een identiek uitziende afbeelding in een veel groter bestand Verloren gegevens gaan verloren; geen formaatwijziging brengt het terug.
Is er een limiet voor bestandsgrootte?
Er wordt geen harde limiet afgedwongen Het praktische plafond is uw apparaat' s geheugen, aangezien het hele beeld wordt gedecodeerd tot een canvas bitmap op ruwweg breedte × hoogte × 4 bytes - een 8000×6000 foto heeft ongeveer 192 MB RAM nodig als onbewerkte pixels voordat de codering zelfs maar begint Desktopbrowsers verwerken typische camera-uitvoer zonder klachten; oudere telefoons kunnen moeite hebben met zeer grote bestanden.
Wat is het verschil tussen PNG en JPEG?
JPEG is lossy en gebouwd voor foto's: het gooit fijne details weg om kleine bestanden te bereiken en het heeft geen transparantie. PNG is verliesloos en is gebouwd voor afbeeldingen, screenshots en logo's: het houdt elke pixel precies en ondersteunt een transparante achtergrond, ten koste van grotere bestanden voor foto's. Je kunt hier tussen hen converteren, maar onthoud een transparante PNG die is opgeslagen als JPEG een solide achtergrond krijgt, aangezien JPEG geen alfakanaal heeft.
Hoe converteer ik een afbeelding gratis naar WebP?
Laad uw PNG of JPEG, kies WebP als het uitvoerformaat, stel de kwaliteit in als u een kleiner bestand wilt en download - het is gratis en draait volledig in uw browser WebP is meestal de conversie die de moeite waard is om voor internet te maken, omdat het kleiner is dan zowel JPEG als PNG, terwijl het nog steeds transparantie ondersteunt en door elke huidige browser wordt gelezen.
Wordt mijn afbeelding geüpload naar een server?
Nee. Het bestand wordt lokaal gelezen met een object-URL, gedecodeerd door uw browser, opnieuw gecodeerd door uw browser' s canvas, en opgeslagen door uw browser U kunt dit zelf verifiëren: DevTools openen, naar het tabblad Netwerk gaan en een afbeelding converteren - u' ziet geen upload Zodra de pagina is geladen, werkt de conversie met uw Wi-Fi uit.
De korte versie
Een browsercanvas is een goede, eerlijke afbeeldingsconverter voor drie formaten en een slechte voor al het andere. Binnen PNG, JPEG en WebP is het direct, privé en gratis, en het dekt de conversie die er echt toe doet voor het web: het krijgen van uw foto's naar WebP. Buiten die drie kan het niet helpen, en ik zou het liever zeggen dan u te laten ontdekken met een zwarte rechthoek op de startpagina van een klant.
Vraag voordat u iets converteert of u transparantie nodig heeft (dan geen JPEG), of u de metadata nodig heeft (houd dan het origineel), en of de afbeelding gewoon te veel pixels is (dan afwijking van de grootte hebben eerst). Zorg dat die drie goed zijn en de formaatkeuze is het gemakkelijke deel.
de Converter voor afbeeldingsformaat is hier. Voor de rest van de beeldworkflow is er de afbeeldingscompressor, de Afbeelding wijzigen gereedschap, en - voor uitsparingen met platte achtergrond - de Achtergrondverwijderaar. Het bredere beeld staat in de Gids voor afbeeldingenhulpmiddelen en de Afbeeldingscompressiegids.
