Home jQuery Asynchronous Image to DATA URIs Conversion using PHP and jQuery

Asynchronous Image to DATA URIs Conversion using PHP and jQuery


You know we can add image into the web page without adding the link of the external image file. Let’s make it simple, the DATA URIs is the concept were we can just add the data of the image into the page and it works.

HTML Syntax to add image using DATA URI:

CSS Syntax to add image using DATA URI:

PHP code to Convert Image to DATA URI

In this tutorial I am going to demonstrate how to create the DATA URI from the Image using PHP with the demo, let’s start with the first to create index.php along with the user interface.

Step 1: Create index.php file and add following code:

Make sure to add required external CSS and JS files, such as jQuery and Bootstrap.

User interface Screen

You can read more about uploading Asynchronous file from here: PHP and Ajax Asynchronous File Upload using jQuery

Step 2: Create script.js file and add following function:


Step 3: Image to data uris conversion:

This is the file where we are performing the image conversion operation asynchronously.
create convertImage.php file and use following code


Step 4: Create style.css file and add following code:

We are done, go ahead and test your application or you can visit to the live demo to do a quick checkout and you can also download the source code for this tutorial from the links given below:

Thanks, if you get this tutorial helpful please provide your feedback using comments section.

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

No Spam, ever. We'll never share your email address and you can opt out at any time.

Yogesh Kolihttp://www.itechempires.com
Yogesh Koli is a software engineer & Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 6+ years of experience working with the front-end and back-end web application development.


1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
ao.gl Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

newest oldest most voted
Notify of

Thank you for this informative read, I have sharedd it on Twitter.

Tutorials You May Like!

- Advertisement -