What's Data URL?

Data URL (Data Harmonised Resource Locating) is a special URL protocol that allows developers to embed small files directly into HTML or CSS, not load by external link. It's usually in the form of a... data: starts with the mimetype, the Base64 encoding and the actual data string.

For example: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

I. ELECTIONS OF DATA URL

Reduce HTTP request: Every external resource (e.g., pictures, icons) triggers a HTTP request. Convert small pictures to Data URL Embedded to significantly reduce the number of requests and enhance the loading capability of the web page.
Offline available: Resources are stored directly in codes, without reliance on external file paths, and are suitable for offline pages or mail templates.
Quits the trans-domain limit: Since the resources are already in local files, they are not affected by the CORS (cross-source resource sharing) policy.

II. VALANCES AND LIMITATIONS OF DATA URL

Volume expansion: Base64 Encoding usually has 33% larger sizes than original binary files Around. Data URLs are therefore not recommended for large files (e.g., high-resolution photographs, long video).
Cache failed: Data URL embedded in HTML cannot be cached by browsers like a stand-alone file. Every time HTML Updates, embedded resources are reloaded.
Parsing expenses: Browser needs to decode Base64 strings when rendering. Too many Data URLs for low performance devices This could lead to a page in Carden.

III. Common application scenarios

CSS Background chart: Inserts a small icon or background mode directly into the CSS file. background-image: url("data:image/svg+xml;base64,...");
Markdown image embedded: Saves pictures in a single Markdown document without fear of the bed being drawn.
HTML img tag: A temporary preview of the uploaded pictures or dynamically generated resources in a script.

IV. How can output formats be selected?

This tool supports multiple output formats to meet different development needs:

Data URL: Standard format, applicable to most HTML and JS scenarios.
CSS: Autopackaging As url() function, which allows for direct copying to the stylesheet.
Markdown: Generates a grammatical image that is easily used in notes or GitHub documents.