Als u een afbeelding insluit, worden de bytes ervan in HTML, CSS of een ander document geplaatst. Het kan een klein artefact op zichzelf staan, maar het koppelt de afbeelding ook aan de levering en cache van dat document. Beslis op basis van de volledige workflow in plaats van ervan uit te gaan dat minder URL's altijd een snellere pagina betekenen.
Bouw de juiste verpakking
Een PNG afbeelding Gegevens URI beginnen met data:image/png;base64,, gevolgd door de Base64 weergave van het originele bestand. Er is een JPEG nodig image/jpeg; WebP nodig image/webp. Het hernoemen van een MIME type converteert de bytes niet. Als de ontvanger een JPEG nodig heeft, codeert u de afbeelding opnieuw voordat u de gegevens URI opbouwt.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">De bovenstaande tijdelijke aanduiding is geen werkafbeelding; vervang het door de volledige uitvoer van de encoder. Als de uitvoer al de data: voorvoegsel, voeg geen ander voorvoegsel toe. Houd de omringende aanhalingstekens in balans en vermijd regeleinden die door rich-text-editors zijn geïntroduceerd.
Bereken de werkelijke maat
Het gecodeerde gedeelte heeft vier tekens nodig voor elke drie invoerbytes, afgerond op volledige groepen. Het voorvoegsel Data URI voegt nog iets toe. Voor een bestand van 30.000 bytes bedraagt de payload alleen al 40.000 tekens. HTML-compressie kan de overgedragen grootte wijzigen, maar de browser moet het document nog steeds parseren en de afbeelding decoderen. Meet de daadwerkelijke pagina, niet alleen het bronbestand.
Een afzonderlijk weergegeven afbeelding kan in de cache worden opgeslagen en onafhankelijk op verschillende pagina's worden hergebruikt. Een ingesloten afbeelding is gekoppeld aan elk document dat deze afbeelding bevat. Grote herhaalde illustraties zijn daarom slechte kandidaten voor automatische inline. Kleine eenmalige iconen in een op zichzelf staand rapport kunnen een redelijke afweging zijn.
Controleer de bestemming
Het inhoudsbeveiligingsbeleid kan beperken data: afbeeldingen. E-mailclients kunnen ingesloten inhoud verwijderen of weigeren. Een bestand dat in uw browser wordt weergegeven, bewijst niet dat de toepassing van de ontvanger het zal weergeven. Test de exacte export, e-mailclient of downstream-systeem dat u moet ondersteunen.
Voor tijdelijke lokale voorbeelden vermijdt een Blob URL vaak het maken van een grote Base64 tekenreeks. Trek de URL in wanneer de weergave ervan is verwijderd. Voor geëxporteerde standalone HTML kan een gegevens URI geschikt zijn. Behoud in beide gevallen alt-tekst en afmetingen. Syntaxis- en browseroverwegingen worden behandeld in MDN: gegevens-URL's.