Códaigh íomhá go Base64 / Data URI

Is URL é URI Sonraí ina bhfuil sonraí acmhainne go díreach ina ionad pointe ar chomhad iargúlta. Is é a fhoirm ghinearálta sonraí:[][; base64],

Spreagthaí coitianta:

• Laghdaigh iarratais HTTP: déan deilbhín a chomhtháthú go díreach isteach sa CSS seachas é a lódáil sa bhreis ar an doiciméad
• Síniú ríomhphoist le híomhá inlíne: níl baol ann go gcuirfear bac ar an íomhá mar ábhar cianda
• Comhpháirteanna Gréasáin / Oibrithe Gréasáin: nuair is minic a chruthaíonn luchtú acmhainn sheachtrach fadhb scópála nó CORS
• Stóráil Áitiúil (LocalStorage, IndexedDB, bunachar sonraí): mionsamhail abhatár a chur le sraithiú go teaghrán
• Snipíní féinchuimsitheacha: comhad HTML féinchuimsitheach, gan spleáchais sheachtracha

Roinnt comhthéacsanna nithiúla ina bhfuil údar maith le hionchódú íomhánna Base64:

• Deilbhíní inlíne SVG i CSS (background-image: url("sonraí:image/svg+xml;base64,…"))
• Sínithe ríomhphoist pearsantaithe le lógó
• Fréamhshamhail ghasta de leathanach neamhspleách arna chomhroinnt trí ríomhphost
• Comhpháirteanna gréasáin aonair (comhad amháin in-imscartha)
• Giniúint PDF ar thaobh an bhrabhsálaí (jsPDF) le mionsamhlacha leabaithe
• Sonraí tástála (magaí) ina bhfuil íomhánna

Trí chéim:

1. Uaslódáil d'íomhá (PNG, JPG, SVG, WebP, GIF) tríd an gcrios titim
2. Cliceáil ar “Ionchódaigh”
3. Cóipeáil an URI Sonraí mar thoradh air leis an gcnaipe tiomnaithe, agus greamaigh isteach i do HTML, CSS nó JSON
é

Ní piléar airgid é Base64. Roinnt réamhchúraimí:

• Méadaíonn base64 an méid faoi ~33%: 4 charachtar ASCII in aghaidh gach 3 beart dhénártha
• Ní dhéanann an brabhsálaí íomhánna ionchódaithe a thaisceadh ar leithligh; athlódáiltear iad leis an HTML/CSS ina bhfuil iad
• Is fearr leat íomhánna níos lú ná 10 KB; thairis sin, is gnách go mbíonn comhad seachtrach níos éifeachtaí
• I gcás SVG, b'fhearr le hionchódú URL (trí ionchódúURICcomponent) seachas Base64: tá an toradh níos giorra agus tá sé fós inpharsáilte cosúil le téacs
Déanann
• Uirlisí nua-aimseartha tógála (Webpack, Vite) an rogha Base64 vs. Base64 a uathoibriú. comhad seachtrach trí mhéid tairsí inchumraithe

HTML :

CSS :

.icon {
  cúlra: url ("sonraí:image/svg+xml; base64,PHN2ZyB4bWxucz0i…") gan athdhéanamh;
  leithead: 16px;
  airde: 16px;
}

JSON (sonraí bréige):

{
  "úsáideoir": {
    "name": "Adrien",
    "avatar": "sonraí:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Cad é an difríocht idir Base64 agus dénártha?

Seasann dénártha do na bearta amh de chomhad. Is ionchódú é Base64 a athraíonn na bearta seo i 64 carachtar ASCII inphriontáilte (A-Z, a-z, 0-9, +, /). Ní ionann comhthéacsanna téacs (HTML, JSON, ríomhphost). ní féidir dénártha a iompar; Réitíonn Base64 an fhadhb seo ag costas forchostais méide 33%.

Cén fáth a bhfuil mo Shonraí URI chomh fada sin?

Éiríonn ~40 KB le híomhá 30 KB sa dhénártha i Base64. Agus is beart ASCII é gach carachtar, mar sin tá, Tá an slabhra fada. Is gné dhílis den ionchódú é seo. Le haghaidh íomhánna móra, coinnigh comhad seachtrach.

An dtacaíonn gach brabhsálaí le URIs Sonraí?

Sea, gan eisceacht i measc brabhsálaithe nua-aimseartha (Chrome, Firefox, Safari, Edge ó IE8 fiú). Teorainneacha stairiúil: IE8 teoranta ag 32 KB. Níl a thuilleadh imní ort inniu ar an ngréasán.

Conas URI Sonraí a dhíchódú?

Déanann ár díchódóir íomhánna Base64 a mhalairt: do Sonraí URI a ghreamú, faigh an comhad íomhá (PNG, JPG, SVG, WebP) réidh le huaslódáil nó le sábháil.

Base64 vs. Ionchódú URL do SVGanna?

I gcás SVG, cruthaíonn ionchódú URL (le ionchódURICcomponent) teaghrán níos giorra ná Base64 agus tá sé fós inléite mar théacs. Is é seo an rogha a mholtar i CSS agus inlíne SVG á chomhtháthú. I gcás formáidí dénártha (PNG, JPG), tá Base64 fós éigeantach.

An gcuireann ionchódú Base64 isteach ar cháilíocht íomhá?

Níl. Tá an t-ionchódú gan chailliúint: is beart dénártha é ↔ dé-leagan teaghrán Base64. Picteilíní bunaidh a chaomhnú go docht. Ní mhéadaítear ach méid an chomhaid a iompraítear faoi 33%.