Support for JPG, PNG, WebP, SVG, GIF
Pictures and Base64: Full Guide
Double panel tool: code the local image to Base64/Data URL; Decoding to return Base64 or Data URL to a picture. Encoding Area Support Drag #dropZone With File Selection #fileInput,Preview #previewImg,Info #imgInfo/#imgSize,Output #encodeOutput Count with Characters #charCount, can be copied. Format buttons can be switched between pure Base64, Data URL, HTML/CSS clips, etc. (setFormat/updateOutput)。 Decoding Area Paste To #decodeInput,Preview #decodedImg, can download the original. Processing is done locally in the browser and is suitable for small inner-end connections and not for the placement of large photographs into the code warehouse.
Encoding Side Behaviour
handleFileReads pictures, generates previews and Base64 string caches.- Output mode: pure Base64 without prefix; Data URL tape
data:image/...;base64,。 - HTML/CSS clips can easily be pasted to img src or background-image.
- Character numbers are used to assess volume expansion (Base64 increases by about 33%).
- Non-photo files should be ignored or prompted (to achieve that).
Decoding and Downloading
- Paste complete Data URL or pure Base64 (image data to be recognized by browser when pure Base64 is available).
- Displays pictures and information on the right after success, downloads the file.
- Checks if prefixes are missing, cut off, and other codes are not available when you fail.
- Discrepancies are removed after sensitive image decoded, after the local file remains are observed.
When to use / Should not use
- Fits: KB small icons, email connections, presentation files HTML.
- Not suitable: Number of MB photos inline (blocking CSS/HTML, cache difference).
- Large diagrams are stored with objects or build chain image optimization instead of Base64.
- No additional compressions are made on this page; Large sizes, please use the compression/transformation tool first.
FAQ
Copy to CSS Do not show?
Confirms that you use the url format ("data:image/...") and the quote matches, uninterrupted string.
Is the number of characters rising normal?
Normal, Base64 is about one third more than binary, plus Data URL prefix.
Is it a picture?
(b) Code decoded locally; Please avoid treating confidential maps in untrusted equipment.
Different from SVG place-sheet?
(a) The place map produces vectors; This page is converted to a bitmap with Base64 text.
Engineering Practice Recommendations
The threshold policy for building the tool chain to prioritize url-loader/asset migrations: less than a KB is in-link. The mail HTML connection needs to be aware of the client cut length. Submit Base64 to Git would make diff huge, apply LFS or extra-chain. The tool does not scan viruses, as the risk of malicious content is observed before decoded from an unknown string.
What about the format button?
Posting JSON/Set more pure Base64; Browser directly to the image address in Data URL; Writing a presentation of HTML inimg clips; Writing styles with CSS background clips. Toggle format only and not recompress pixels. Character count helps to determine whether the document/mail limit is exceeded.
Performance and warehouse sanitation
The large figure is downsized and encoded. Avoid submitting hundreds of KB Base64s into Gits to cause warehouse expansion. Mail client may be cutting over-long CSS. Decoded area does not repeat the large paste with unknown origin when the wrong string fails, lest Cardon.
Privacy
When the intercept contains the document, the coded string is equally sensitive and copying to chat is equivalent to a map. Use the clean-out. Treatment is local, but does not mean that terminal security can be ignored.
Local data and use boundaries
This page results and drafts are mainly stored in the current browser environment, and removal of site data, replacement equipment or use of privacy patterns may result in loss of content. Important lists, classified texts, tasks and WBS are requested to be exported, copied or amputated in a timely manner. Once the public computer is in use, sensitive input should be emptied of the page to avoid leaving names, passwords, project structures, etc. to the next user. Tools are used to enhance individual and small team efficiency and are not a substitute for formal project management, attendance, key hosting or compliance auditing systems within the organization; Please refer to the corporate system and local regulations.