Cool trick to convert images into code and embed it inside html

Get Started | Login

Discussion Forums > WebViews and HTML for Mobile

Replies: 6 Views: 2873

Rohan Veteran developer Posts: 79 Reg: Mar 12, 2011 London 10,040	confirm \| cancel 05/25/13 12:50 PM (10 years ago) Cool trick to convert images into code and embed it inside html Hey I wanted to share with you a really cool tricked I just learnt which might be help to some people in the future. PROBLEM: I have an html page with a small logo in it. Problem is I couldn’t embedd it directly for technical reasons as the page uses a base href which means the page is looking to another location for the images, not the local image in the Xcode folder. The obvious way to fix this and load an image is to place it on an external server, however for relatively small image which weighs in at a couple of kilobytes it seems like a lot of external http request calls to make, and as always theres a lag for it to show up, and the server might get hammered making the main website which hosts it less reponsive. SOLUTION: It's possible to transform the image into code and embed it right inside the html, NO loading from an external source required, by using ‘data URIs’ HOW 2: 1: Create an image that you want to use, for example a 50 pixel by 50 pixel png. 2: Run it through www.tinypng.org to shrink its size down, then save it. 3: go to this website ( the URI Kitchen): http://software.hixie.ch/utilities/cgi/data/data and upload your image. Select base64 encoding, the generate the code. A new window opens up and in the main window you’ll see your image, but in your browsers navigation bar there will be a long line of what appears to be random number beginning with ‘data:image/png;base64,’ This is your picture reduced to a code string! Copy it and it can now be used in a CSS style sheet. 4: In the Webpage: For example, to use this code and display it in an h4 tag add this to your CSS code in the head of your html page: h4 { display: block; width: 49px; height:49px; background-image: url(data:image/png;base64,…LongStringHere…. ) } And then put h4 in your html body: <Body> <h4> </h4> </body> Now wherever you put 'h4' tag in the html your picture will show up! No external server requests required. A niche bit of coding true, but could be useful as now all my assets are within my Xcode project :-) Title Comments Hey I wanted to share with you a really cool tricked I just learnt which might be help to some people in the future. PROBLEM: I have an html page with a small logo in it. Problem is I couldn’t embedd it directly for technical reasons as the page uses a base href which means the page is looking to another location for the images, not the local image in the Xcode folder. The obvious way to fix this and load an image is to place it on an external server, however for relatively small image which weighs in at a couple of kilobytes it seems like a lot of external http request calls to make, and as always theres a lag for it to show up, and the server might get hammered making the main website which hosts it less reponsive. SOLUTION: It's possible to transform the image into code and embed it right inside the html, NO loading from an external source required, by using ‘data URIs’ HOW 2: 1: Create an image that you want to use, for example a 50 pixel by 50 pixel png. 2: Run it through www.tinypng.org to shrink its size down, then save it. 3: go to this website ( the URI Kitchen): http://software.hixie.ch/utilities/cgi/data/data and upload your image. Select base64 encoding, the generate the code. A new window opens up and in the main window you’ll see your image, but in your browsers navigation bar there will be a long line of what appears to be random number beginning with ‘data:image/png;base64,’ This is your picture reduced to a code string! Copy it and it can now be used in a CSS style sheet. 4: In the Webpage: For example, to use this code and display it in an h4 tag add this to your CSS code in the head of your html page: h4 { display: block; width: 49px; height:49px; background-image: url(data:image/png;base64,…LongStringHere…. ) } And then put h4 in your html body: <Body> <h4> </h4> </body> Now wherever you put 'h4' tag in the html your picture will show up! No external server requests required. A niche bit of coding true, but could be useful as now all my assets are within my Xcode project :-)

ianJamesPiano Code is Art Posts: 2661 Reg: Feb 13, 2011 Palm Springs, C... 37,010	05/25/13 01:09 PM (10 years ago) Thanks for the Tip. Bookmarked! Comments Thanks for the Tip. Bookmarked!

SmugWimp Smugger than thou... Posts: 6316 Reg: Nov 07, 2012 Tamuning, GU 81,410	05/25/13 01:48 PM (10 years ago) Now that's interesting! Thanks! Cheers! -- Smug Comments Now that's interesting! Thanks! Cheers! -- Smug

Arubaman Aspiring developer Posts: 636 Reg: Oct 20, 2011 Akron 16,910	05/25/13 01:49 PM (10 years ago) Pretty nifty, thanks for the details. Comments Pretty nifty, thanks for the details.

LA Aspiring developer Posts: 3278 Reg: Aug 16, 2012 Jerseyville, IL 42,880	05/25/13 03:49 PM (10 years ago) Awesome find! LA Comments Awesome find! LA

Militant Aspiring developer Posts: 55 Reg: Apr 22, 2013 Coimbatore 1,300	05/27/13 06:20 AM (10 years ago) That's interesting! Thanks! Bookmarked! Comments That's interesting! Thanks! Bookmarked!

shenry Aspiring developer Posts: 469 Reg: Jan 10, 2012 Orange County, ... 13,390	05/31/14 07:39 PM (9 years ago) Shazam, Is that ever a cool trick. Thanks Comments Shazam, Is that ever a cool trick. Thanks

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.