Följ detta arbetsexempel och anpassa sedan samma kontroller till din egen bild. Öppna Bild till Base64-konverterare.
Välj en bild och förhandsgranska dess identitet
Öppna Image to Base64 Converter. Välj en bild eller Prova ett exempel. Exemplet använder 512 × 512 pixel favicon-orbit.png, som innehåller 202,491 byte. Redigeraren visar bilden ovanför dess kod så att du kan bekräfta att du har valt rätt tillgång.
PNG, JPG, WebP, GIF, BMP och AVIF stöds när din webbläsare kan avkoda dem för förhandsgranskning. Den maximala filstorleken är 25 MB, med gränser på 60 megapixlar och 16,000 pixlar per sida. SVG-kod accepteras inte av denna rasterkonverterare.
Verktyget läser de ursprungliga filbyten. Det använder inte förhandsgranskningen för att bygga om bilden, ändra storlek på den eller komprimera om den. Befintliga metadata och GIF-animering behålls därför i den kodade datan.
Innan kodning, använd Resize Image eller Image Compressor om du behöver en mindre tillgång. Base64 i sig minskar inte bildstorleken.
Välj den representation ditt projekt förväntar sig
Öppna Settings och välj HTML-bild under Code format för detta exempel. Resultatet är en img-tagg som innehåller en Base64 data-URL. Alt-attributet är initialt tomt; skriv användbar alternativ text när bilden kommunicerar information.
Data-URL börjar med ett prefix som data:image/png;base64, följt av den kodade datan. Plain Base64 innehåller endast datan. CSS-bakgrund omsluter data-URL:en i en background-image-deklaration. Dessa representationer tjänar olika destinationer, så kopiera den form som din applikation begär istället för att bara ändra filnamnet.
Kodpanelen uppdateras omedelbart efter att du ändrat Code format. Kopieringsikonen kopierar den aktuella representationen och ger bekräftelsen på att kopiering skett. När urklippsåtkomst blockeras väljs koden för manuell kopiering.
En komplett HTML img-tagg är inte samma sak som en data-URL. Använd endast src-värdet när ett fält efterfrågar en URL.
Exemplet i denna guide
Prova ett exempel: favicon-orbit.png, 512 × 512 px, 202,491 byte. Välj HTML-bild under Kodformat. Välj Start och ladda ner favicon-orbit-base64.txt.
- Original PNG
- 512 × 512 px · 202,491 byte
- HTML textutdata
- 270,029 byte
- Kodning
- Originalbyte; ingen omkomprimering
Ladda ner koden och förstå dess storlek
Välj Start och sedan Ladda ner. Exemplet sparar favicon-orbit-base64.txt som innehåller HTML bildkod. Dess 270,029 byte är större än källfilens 202,491 byte. Artikelns jämförelse visar början på den nedladdade texten, förkortad endast för läsbarhet.
Base64 konverterar vanligtvis tre källbyte till fyra texttecken, vilket lägger till ungefär en tredjedel utöver den lilla omslutningen. Att bädda in en liten ikon kan göra ett dokument fristående, men att placera stora bildsträngar inuti HTML eller CSS gör också dokumentet större och förhindrar att bilden cachelagras som en separat fil.
Kodning är inte kryptering. Vem som helst med den kompletta Base64-strängen kan återskapa den underliggande bilden. Hantera koden med samma försiktighet som källfilen om den innehåller privat information.
Det avkortade utdraget i denna artikel är förklarande. Använd den kompletta nedladdade TXT eller kopiera den fullständiga koden från verktyget.
Vanliga frågor
Minskar kodning bildkvaliteten?
Nej. Kodning bevarar de ursprungliga byten. Den ändrar inte storlek, komprimerar eller ritar om bilden.
Varför är Base64-strängen större än bilden?
Base64 representerar tre indatabyte med fyra texttecken, så den lägger normalt till ungefär en tredjedel före en omslutning eller ett prefix.
Bevaras GIF-animationer?
Kodning bevarar de ursprungliga GIF-byten, inklusive animering. En förhandsgranskning kan visa en stillbild medan den kodade datan behåller alla bildrutor.
Är Base64 säker för hemliga bilder?
Base64 är inte kryptering. Håll strängen privat om den underliggande bilden är privat. Själva konverteraren bearbetar den lokalt i din webbläsare.
Gör rätt bild till rätt kod.
Prova ett exempel eller använd din egen fil, och granska resultatet innan du delar.
