How to embed base64 images in HTML?



To embed images encoded with Base64, use the img element. This prevents the page from loading slowly and saves the web browser from additional HTTP requests.

Set the base64 image in the src attribute of the <img>. Let’s say we have the following image −

Note − The bigger the image, the more will its bease64 code

For Base64, we will consider the Data URL of the image, which is placed in the src attribute. The Data URL has two parts −

  • The 1st part is the Base64 encoded image.
  • The 2nd part is the Base64 encoded string of the image.

Therefore, the Base64 of the above image is the following −

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAw MEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGB IUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUF BQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAuADUDASIAAhEBAxEB/8QAH wAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF 9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY 3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmq KjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAH wEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQ J3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJy gpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZ aXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb 3+Pn6/9oADAMBAAIRAxEAPwD9EKKKKACq+oXyadZy3Eiu6xjO2NdzHnAA/HueB1JAqxTZI1mj ZHUOjDaysMgg9QafqIzrHxHY30yweabe6LFPs1ypik3AZIAP3uOcrkEcgkc1p1i2ul2+p6XNYX0f2 uKNjBlySGCn5WHOQwBHzDB3DOeBTPD9xcWd5daNeztdS26rLb3Eh+eWBiQN3q6kFSe42se WIFuK1sQpPS5u0UUVmaBRXj/wn+IuoroeszeKtQF20enx+I7eXaoK2MqufLwoGSjRODx/EtHgf4 haz4d0fxBJ4zklvLmz1q2tpTCqAWaXSQMgPTKRtMATyeCea6Xh5ptdjkjiYNRff8PU9gorlNf8YTx 3Wv6RpFnNc6xp+mJfK2wNGWkMiogGclv3THGOmPWq+l67a6f4Z1PW7fXLrXYreB5XhuTGCki gkqQqBkPbaeB6V4mIx1PDV/Y1F9nmb02187vbWydtL7o9mhhJ4il7WD+1y213/JeV99exsxaPfQ +IPti33/EvSN0WyUYDtI4Z3f1ZSo246BnBzkEL4ksU8uPVBdS2U+nK8omijMuY8ZdGQDLqdoOB zlVxzXN6o2t+HfDqeIpdYmu7qERz3diyILZ4yRvRBt3KQCdrZJJAznNbmh6jc3XirxFbyTNJbW/2by IyBhN0ZLY78n1rGlm0Z1oUZ03GUrWTts4zkno3/JJNb38tTSplrjSlUhNSir9904prVL+ZNdLeZo6H qbatp6XLRGNW+4/G2VcAiReSQpB6HkfqSrNpY29grrbQpAjuZGWNdoLHknA7k8n1NFey7X0P MV7ankM/wh1e40b4eWyvDC1jZJpWuxswbzrPEbvGDj5vnhVOO0jH1zqa54Nj874nya/c2un6Br9t AkV3NMq7CtsyOxzjbtIUj6Zr1Gq19ptnqiRpeWsF2kciyos8YcI46MMjgjsa6Pbyb1/rW5y/V4Jaf1pY 8/8AhDb6xdeGb3xXqVkkev6+Ibj7LK5jCRRxLHErHBK7gGkxjIMpBHFX5vCd34m1e/u7ywi0SK50 6awl8uVZZbgvtw77RjCYOOSfm7V3VFeRjsHTzCadZvlX2dLeWtub7mvPqerg8TPAwapL3v5tb+f W33p+XQ891qPxBeeGYtI1PSc248qK+vLGXzjJEpBYxxYDEsFxjGV3cbsVqx2usaT4t1a6t9MS9s 79rfEouVjMYRArHaRz1J/CutorzllCU1U9tLmVrP3brlUlb4bNWm91e7vc73mTcHD2UbO9171ndxd 973vFdbeQyNnZnDoFAPBBzkUU+iveSsrXPHep/9k=

Example

Let us see the complete example −

<!DOCTYPE html> <html> <head> <title>Base64 Image</title> </head> <body> <div> <h1>MySQL</h1> <img src=" data:image/jpeg; data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQ gFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQM EBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFB QUFBQUFBQUFBT/wAARCAAuADUDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAw QFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS 0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXq DhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6er x8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBA cFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygp KjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoq OkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMB AAIRAxEAPwD9EKKKKACq+oXyadZy3Eiu6xjO2NdzHnAA/HueB1JAqxTZI1mjZHUOjDaysMgg9QafqIzrH xHY30yweabe6LFPs1ypik3AZIAP3uOcrkEcgkc1p1i2ul2+p6XNYX0f2uKNjBlySGCn5WHOQwBHzDB3DO eBTPD9xcWd5daNeztdS26rLb3Eh+eWBiQN3q6kFSe42seWIFuK1sQpPS5u0UUVmaBRXj/wn+Iuoroesz eKtQF20enx+I7eXaoK2MqufLwoGSjRODx/EtHgf4haz4d0fxBJ4zklvLmz1q2tpTCqAWaXSQMgPTKRtMA TyeCea6Xh5ptdjkjiYNRff8PU9gorlNf8YTx3Wv6RpFnNc6xp+mJfK2wNGWkMiogGclv3THGOmPWq+l67 a6f4Z1PW7fXLrXYreB5XhuTGCkigkqQqBkPbaeB6V4mIx1PDV/Y1F9nmb02187vbWydtL7o9mhhJ4il7W D+1y213/JeV99exsxaPfQ+IPti33/EvSN0WyUYDtI4Z3f1ZSo246BnBzkEL4ksU8uPVBdS2U+nK8omijMuY 8ZdGQDLqdoOBzlVxzXN6o2t+HfDqeIpdYmu7qERz3diyILZ4yRvRBt3KQCdrZJJAznNbmh6jc3XirxFbyTNJ bW/2byIyBhN0ZLY78n1rGlm0Z1oUZ03GUrWTts4zkno3/JJNb38tTSplrjSlUhNSir9904prVL+ZNdLeZo6H qbatp6XLRGNW+4/G2VcAiReSQpB6HkfqSrNpY29grrbQpAjuZGWNdoLHknA7k8n1NFey7X0PMV7ank M/wh1e40b4eWyvDC1jZJpWuxswbzrPEbvGDj5vnhVOO0jH1zqa54Nj874nya/c2un6Br9tAkV3NMq7Ct syOxzjbtIUj6Zr1Gq19ptnqiRpeWsF2kciyos8YcI46MMjgjsa6Pbyb1/rW5y/V4Jaf1pY8/8AhDb6xdeGb3x XqVkkev6+Ibj7LK5jCRRxLHErHBK7gGkxjIMpBHFX5vCd34m1e/u7ywi0SK506awl8uVZZbgvtw77RjCYO OSfm7V3VFeRjsHTzCadZvlX2dLeWtub7mvPqerg8TPAwapL3v5tb+fW33p+XQ891qPxBeeGYtI1PSc248 qK+vLGXzjJEpBYxxYDEsFxjGV3cbsVqx2usaT4t1a6t9MS9s79rfEouVjMYRArHaRz1J/CutorzllCU1U9tLm VrP3brlUlb4bNWm91e7vc73mTcHD2UbO9171ndxd973vFdbeQyNnZnDoFAPBBzkUU+iveSsrXPHep/9 k= " alt="MySQL" /> </div> </body> </html>

Output


Advertisements