Indlejring af et billede placerer dets bytes i HTML, CSS eller et andet dokument. Det kan gøre en lille artefakt selvstændig, men den kobler også billedet til det dokuments levering og caching. Beslut dig baseret på den komplette arbejdsgang i stedet for at antage, at færre URL'er altid betyder en hurtigere side.
Byg den korrekte indpakning
Et PNG billeddata URI begynder med data:image/png;base64,, efterfulgt af Base64 repræsentationen af den originale fil. Et JPEG behov image/jpeg; WebP behov image/webp. Omdøbning af en MIME type konverterer ikke bytes. Hvis modtageren kræver en JPEG, skal du omkode billedet, før du bygger dets data URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">Pladsholderen ovenfor er ikke et arbejdsbillede; erstatte det med encoderens komplette output. Hvis outputtet allerede indeholder data: præfiks, tilføj ikke endnu et. Hold omgivende anførselstegn afbalanceret, og undgå linjeskift, der indføres af rich-text-editorer.
Beregn den reelle størrelse
Den kodede del skal bruge fire tegn for hver tre inputbytes, afrundet til komplette grupper. Data URI præfikset tilføjer lidt mere. For en 30.000-byte fil er nyttelasten alene 40.000 tegn. HTML komprimering kan ændre den overførte størrelse, men browseren skal stadig analysere dokumentet og afkode billedet. Mål den faktiske side, ikke kun kildefilen.
Et separat serveret billede kan cachelagres og genbruges uafhængigt på tværs af sider. Et indlejret billede er knyttet til hvert dokument, der indeholder det. Store gentagne illustrationer er derfor dårlige kandidater til automatisk inlining. Små enkeltstående ikoner i en selvstændig rapport kan være en rimelig afvejning.
Tjek destinationen
Indholdssikkerhedspolitik kan begrænse data: billeder. E-mail-klienter kan fjerne eller afvise indlejret indhold. En fil, der vises i din browser, beviser ikke, at en modtagers applikation vil vise den. Test den nøjagtige eksport, e-mail-klient eller downstream-system, du skal understøtte.
Til midlertidige lokale forhåndsvisninger undgår en Blob URL ofte at skabe en stor Base64 streng. Tilbagekald URL, når dens visning er fjernet. For eksporteret enkeltstående HTML kan en Data URI være passende. Bevar alt tekst og dimensioner i begge tilfælde. Syntaks og browserovervejelser er dækket ind MDN: data-URL'er.