Posted in
7846
6:20 am, August 31, 2018
copy image to data uri using chrome base64 encode
Update: 26 Aug 2020 - Fixed video and original image link all should be working now in chrome.
Found this one useful if you want to convert an image to base64 encode and link it directly in css or html, rather than using a base64 encoder.
- find the image you want to convert
- lets use this emoji as an example.
- open dev tools, f12 and inspect the image.
- right click the image and open in sources panel
- right click the image in sources panel and press copy image as datauri
- this will give you the image as a converted string, like this:
- then you can use it like this in an image tag:
- or you can even add it to css as a background image tag
as this one is a bit hard to follow, here is a video of how to do it.
View post on imgur.comHTML
<img src="data:image/gif;base64,R0lGODlhKgAWANU1AKul8/3y/YmN7ZaQ6fX+/4OF4u34+ABs/wLap3ZSo34svfyjqJBBzPZsgEgWbJKM5dDI6W4jpqVb3lkchpGQ6IU0wlAZeHonufJs97ue6dLR676X1uan3tK86wrl/5OO4tnn+v3F36SF0v3a3/vQ3nl83T7+/3yA4ZOH3dvp+/L//Pju7uv8+On39/P09Zd4xv/j/+G7/UEHbUtJr////////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEOUMzNzgyNzREMkU2ODExQUIwOEE1NUNBNjI2NUE4RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFRDMyMzY4QkFEMjMxMUUxOEFERkQxMEE4RkNDQTYxRCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRDMyMzY4QUFEMjMxMUUxOEFERkQxMEE4RkNDQTYxRCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJv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" />View Statistics
This Week
191
This Month
1074
This Year
2234
Add Comment
Other Items in html
CSSnowflakes simple snowflakes non-JS snowflakes for your website
snowflakes falling body effects
HTML how to add an IMAGE! Quick HTML Tutorial
HTML How to CENTRE Text Easy! - Quick HTML and CSS Tutorial
font awesome spinner loader loading spinner
Using the HTML tag details for easy accordions
Video different sources on screen sizes video embed html responsive
Boots Widget change from widget to cat head and click function
pulse map dots
codemirror with auto preview window
using figcaption and figure for your images
a google font like muli - mulish and embed code
basic radio checklist - check and item and get its value in a textarea
share to twitter html link only
linked in share link html only, linkedin, linked-in
Facebook HTML for Sharing a Link
Footer Design and Redesign
Regions of New Zealand - In Dropdown Form
content editable p tag with spell check enabled
get directions from google maps form embed
Common and Uncommon Meta Tag's and Social Meta Tags
Input Suggestions using a datalist
Add custom symbol to ul li list and align text items
using the kbd html tag
twitter social sharing meta tags
test image url that always changes unsplash placeholder
set the amount of lines to show in a textarea field
Scroll down indicator css javascript and html
a page with two images
Aligning Images in TinyMCE or Floating them left and right (code)
test page for the custom css 12 grid used on this site
easy twitter embed code
Custom JS Tabs - No Jquery or Jquery UI
scroll to top html css and js
hide parts of a form until the 1st item is selected
load a youtube video in a fancybox modal
add google captcha to enable and disable a form button
template for testing and live reloading html files
toggle div function with chevron up down toggle
Bootstrap Card Formatting HTML and CSS - Header and Footer
Applied Accessibility - Tab Index
Applied Accessibility - Access Keys
Dropdown Box with Searchable Text
meta keywords tag
meta description tag
favicon code meta tag
foundation includes cdnjs
Form elements New Zealand region list
video embed no controls
video embed tag
Related Search Terms
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps apache api apps asp bat bootstrap bootstrap templates charts cookies core css css filters css grid design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac misc modals mysql nginx node php php errors php function php functions php simple html dom pi400 python react regex sections simple_html_dom simplepie php site bugs site documentation slick slider sql sqlite ssh sublime svg svg css templates tools virtual box vscode vue webdev windows windows 11 windows commands wordpress
🪦 2000 - 16 Oct 2022 - Boots
