Kuva → Base64
Pudota mikä tahansa kuva tähän kuva → Base64 -muuntimeen saadaksesi data URI:n ja valmiita HTML-, CSS- ja JavaScript-katkelmia. Upotetut kuvat säästävät HTTP-pyyntöjä pienille kuvakkeille, ja ne ovat välttämättömiä yhden tiedoston HTML:lle, sähköpostimalleille ja offline-sovelluksille.
Miten muunnat Kuva → Base64 verkossa
- Valitse kuvatiedosto tai liitä kuva-URL.
- Valitse tuloste: data URI,
<img>, CSS-tausta, favicon, JSON ja muuta. - Napsauta Koodaa kuva Base64:ksi.
- Esikatsele kuvaa ja kopioi koodi.
Lisää Kuva → Base64-muuntimia
Tulostusmuodot
Valitse, miten tulos paketoidaan. Muunnin voi palauttaa:
- txt: vain Base64-merkkijono, valmis liitettäväksi koodiin, tietokantakenttään tai API-pyyntöön.
- uri: valmis
data:-URI, jonka voit liittää selaimen osoitekenttään tai käyttää missä tahansa URL hyväksytään. - html img:
<img>-tunniste data URI:llasrc-attribuutissa. - css background image: CSS-sääntö käyttäen
background-image: url(data:...). - html favicon:
<link rel="icon">-tunniste upotetulle faviconille. - html hyperlink:
<a>-linkki, joka lataa tai avaa upotetun tiedoston. - html iframe:
<iframe>, joka renderöi sisällön upotettuna. - javascript image: JavaScript, joka luo
Image-objektin. - javascript popup: JavaScript, joka avaa sisällön uudessa ikkunassa.
- json: JSON-objekti tiedostonimellä, MIME-tyypillä ja datalla.
- xml: XML-elementti, jossa data on CDATA-osiossa.
Milloin kuvia kannattaa upottaa Base64:nä?
Upota pienet kuvat (alle noin 5–10 kt), kuten kuvakkeet, logot ja paikkamerkit, säästääksesi pyyntöjä. Vältä suurten valokuvien upottamista: ne tekevät HTML:stä/CSS:stä raskaampaa, niitä ei voi välimuistittaa erikseen ja ne hidastavat renderöintiä. Yksityiskohtaisempi keskustelu: data URI:t selitettynä.
Usein kysytyt kysymykset
Miten muunnan kuvan Base64:ksi?
Valitse kuvasi, valitse tulosteeksi "Data URI" tai "<img>" ja napsauta "Koodaa kuva Base64:ksi". Kopioi tulos HTML:ään tai CSS:ään.
Mitä kuvamuotoja tuetaan?
Mikä tahansa muoto, jonka selaimesi lukee: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF ja muita.
Miten käytän Base64-kuvaa HTML:ssä?
Laita data URI src-attribuuttiin: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
Kommentit (0)
Kysymyksiä, ideoita tai bugi työkalussa “Kuva → Base64”? Jätä kommentti, arvioi työkalu tai vastaa muille.
Ei vielä kommentteja. Ole ensimmäinen, joka jakaa palautteesi!