Om du bäddar in en bild placeras dess byte i HTML, CSS eller ett annat dokument. Det kan göra en liten artefakt fristående, men den kopplar också bilden till dokumentets leverans och cachning. Bestäm dig utifrån hela arbetsflödet istället för att anta att färre webbadresser alltid innebär en snabbare sida.
Bygg rätt omslag
En PNG bilddata URI börjar med data:image/png;base64,, följt av Base64 representationen av originalfilen. Ett JPEG behov image/jpeg; WebP behov image/webp. Att byta namn på en MIME-typ konverterar inte byte. Om mottagaren kräver en JPEG, koda om bilden innan du bygger dess data URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">Platshållaren ovan är inte en fungerande bild; ersätt den med kodarens kompletta utgång. Om utgången redan innehåller data: prefix, lägg inte till ytterligare ett. Håll omgivande citattecken balanserade och undvik radbrytningar som introduceras av rich text-redigerare.
Beräkna den verkliga storleken
Den kodade delen behöver fyra tecken för var tredje inmatningsbyte, avrundad till kompletta grupper. Prefixet Data URI lägger till lite mer. För en 30 000-byte fil är enbart nyttolasten 40 000 tecken. HTML komprimering kan ändra den överförda storleken, men webbläsaren behöver fortfarande analysera dokumentet och avkoda bilden. Mät den faktiska sidan, inte bara källfilen.
En separat serverad bild kan cachelagras och återanvändas oberoende över sidor. En inbäddad bild är knuten till varje dokument som innehåller den. Stora upprepade illustrationer är därför dåliga kandidater för automatisk inlining. Små engångsikoner i en fristående rapport kan vara en rimlig avvägning.
Kontrollera destinationen
Innehållssäkerhetspolicy kan begränsa data: bilder. E-postklienter kan ta bort eller tacka nej till inbäddat innehåll. En fil som förhandsgranskas i din webbläsare bevisar inte att en mottagares applikation kommer att visa den. Testa den exakta exporten, e-postklienten eller nedströmssystemet du behöver stödja.
För tillfälliga lokala förhandsvisningar undviker en Blob URL ofta att skapa en stor Base64-sträng. Återkalla URL när dess vy tas bort. För exporterad fristående HTML kan en Data URI vara lämplig. Bevara alternativ text och dimensioner i båda fallen. Syntax och webbläsaröverväganden täcks in MDN: datawebbadresser.