Postupujte podľa tohto funkčného príkladu a potom prispôsobte rovnaké ovládacie prvky svojmu vlastnému obrázku. Otvoriť Konvertor obrázka na Base64.
Vyberte obrázok a zobrazte ukážku jeho identity
Otvorte prevodník Image to Base64. Vyberte obrázok alebo Vyskúšajte ukážku. Príklad používa 512 × 512 pixelový favicon-orbit.png, ktorý obsahuje 202,491 bajtov. Editor zobrazuje obrázok nad jeho kódom, takže môžete potvrdiť, že ste vybrali zamýšľané aktívum.
PNG, JPG, WebP, GIF, BMP a AVIF sú podporované, keď ich váš prehliadač dokáže dekódovať pre ukážku. Maximálna veľkosť súboru je 25 MB, s limitmi 60 megapixelov a 16,000 pixelov na stranu. SVG značky nie sú týmto rastrovým prevodníkom akceptované.
Nástroj číta pôvodné bajty súboru. Nepoužíva ukážku na opätovné zostavenie obrázka, jeho zmenu veľkosti alebo opätovnú kompresiu. Existujúce metadáta a animácia GIF sú preto v zakódovaných údajoch zachované.
Pred kódovaním použite Zmeniť veľkosť obrázka alebo Kompresor obrázkov, ak potrebujete menšie aktívum. Base64 sám o sebe nezmenšuje veľkosť obrázka.
Vyberte reprezentáciu, ktorú váš projekt očakáva
Otvorte Nastavenia a vyberte HTML obrázok v časti Formát kódu pre tento príklad. Výsledkom je značka img obsahujúca dátovú URL Base64. Atribút alt je spočiatku prázdny; napíšte užitočný alternatívny text, keď obrázok komunikuje informácie.
Dátová URL začína predponou ako data:image/png;base64, po ktorej nasledujú zakódované údaje. Plain Base64 obsahuje iba údaje. CSS pozadie obalí dátovú URL do deklarácie background-image. Tieto reprezentácie slúžia na rôzne ciele, preto skopírujte formulár požadovaný vašou aplikáciou namiesto zmeny iba názvu súboru.
Panel kódu sa aktualizuje okamžite po zmene Formátu kódu. Ikona kopírovania skopíruje aktuálnu reprezentáciu a zobrazí potvrdenie o skopírovaní. Keď je prístup k schránke zablokovaný, kód sa vyberie na manuálne kopírovanie.
Úplná značka HTML img nie je to isté ako dátová adresa URL. Keď pole vyžaduje adresu URL, použite iba hodnotu src.
Príklad v tejto príručke
Vyskúšajte vzorku: favicon-orbit.png, 512 × 512 px, 202,491 bajtov. Vyberte HTML obrázok v časti Formát kódu. Vyberte Štart a stiahnite favicon-orbit-base64.txt.
- Pôvodné PNG
- 512 × 512 px · 202,491 bajtov
- HTML textový výstup
- 270,029 bajtov
- Kódovanie
- Pôvodné bajty; žiadna opätovná kompresia
Stiahnite si kód a pochopte jeho veľkosť
Vyberte Štart a potom Stiahnuť. Príklad uloží favicon-orbit-base64.txt obsahujúci HTML kód obrázka. Jeho 270,029 bajtov je viac ako 202,491-bajtový zdroj. Porovnanie v článku zobrazuje skutočný začiatok stiahnutého textu, skrátený len kvôli čitateľnosti.
Base64 zvyčajne konvertuje tri zdrojové bajty na štyri textové znaky, čím pridáva približne jednu tretinu pred malý obal. Vloženie malej ikony môže urobiť dokument sebestačným, ale umiestnenie veľkých reťazcov obrázkov do HTML alebo CSS tiež zväčšuje tento dokument a bráni tomu, aby sa obrázok ukladal do vyrovnávacej pamäte ako samostatný súbor.
Kódovanie nie je šifrovanie. Ktokoľvek s úplným reťazcom Base64 môže obnoviť pôvodný obrázok. S kódom zaobchádzajte rovnako opatrne ako so zdrojom, ak obsahuje súkromné informácie.
Skrátený úryvok v tomto článku je vysvetľujúci. Použite kompletný stiahnutý TXT alebo skopírujte celý kód z nástroja.
Časté otázky
Zníži kódovanie kvalitu obrázka?
Nie. Kódovanie zachováva pôvodné bajty. Obrázok nezmenšuje, nekomprimuje ani neprekresľuje.
Prečo je reťazec Base64 väčší ako obrázok?
Base64 reprezentuje tri vstupné bajty pomocou štyroch textových znakov, takže zvyčajne pridáva približne jednu tretinu pred obal alebo prefix.
Sú animácie GIF zachované?
Kódovanie zachováva pôvodné GIF bajty, vrátane animácie. Ukážka môže zobraziť statický snímok, zatiaľ čo kódované údaje si zachovávajú všetky snímky.
Je Base64 bezpečný pre tajné obrázky?
Base64 nie je šifrovanie. Ak je pôvodný obrázok súkromný, uchovajte reťazec v súkromí. Samotný konvertor ho spracováva lokálne vo vašom prehliadači.
Zmeňte správny obrázok na správny kód.
Vyskúšajte ukážku alebo použite vlastný súbor a pred zdieľaním skontrolujte výsledok.
