Ved å bygge inn et bilde plasseres bytene i HTML, CSS eller et annet dokument. Den kan gjøre en liten artefakt selvforsynt, men den kobler også bildet til dokumentets levering og bufring. Bestem deg basert på den komplette arbeidsflyten i stedet for å anta at færre nettadresser alltid betyr en raskere side.
Bygg riktig innpakning
Et PNG bildedata URI begynner med data:image/png;base64,, etterfulgt av Base64 representasjonen av den opprinnelige filen. En JPEG trenger image/jpeg; WebP behov image/webp. Å gi nytt navn til en MIME-type konverterer ikke bytene. Hvis mottakeren krever en JPEG, omkode bildet før du bygger dataene URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">Plassholderen ovenfor er ikke et arbeidsbilde; erstatte den med koderens komplette utgang. Hvis utgangen allerede inneholder data: prefiks, ikke legg til et nytt. Hold omkringliggende anførselstegn balansert og unngå linjeskift introdusert av riktekstredigerere.
Beregn den virkelige størrelsen
Den kodede delen trenger fire tegn for hver tre inndatabyte, avrundet til komplette grupper. Data URI prefikset legger til litt mer. For en 30 000-byte fil er nyttelasten alene 40 000 tegn. HTML komprimering kan endre den overførte størrelsen, men nettleseren må fortsatt analysere dokumentet og dekode bildet. Mål den faktiske siden, ikke bare kildefilen.
Et separat levert bilde kan bufres og gjenbrukes uavhengig på tvers av sider. Et innebygd bilde er knyttet til hvert dokument som inneholder det. Store gjentatte illustrasjoner er derfor dårlige kandidater for automatisk inlining. Små engangsikoner i en selvstendig rapport kan være en rimelig avveining.
Sjekk destinasjonen
Innholdssikkerhetspolicy kan begrense data: bilder. E-postklienter kan fjerne eller avslå innebygd innhold. En fil som forhåndsvises i nettleseren din, beviser ikke at mottakerens applikasjon vil vise den. Test den eksakte eksporten, e-postklienten eller nedstrømssystemet du trenger å støtte.
For midlertidige lokale forhåndsvisninger unngår en Blob URL ofte å lage en stor Base64-streng. Tilbakekall URL når visningen er fjernet. For eksportert frittstående HTML kan en Data URI være passende. Behold alternativ tekst og dimensjoner i begge tilfeller. Syntaks og nettleserhensyn er dekket i MDN: datanettadresser.