Using Base64 encoded images in website
Encode the image to base64 in php
<?php
$image = file_get_contents("https://www.facebook.com/images/fb_icon_325x325.png");
$base64 = base64_encode($image);
echo $base64; // This will echo the encoded base64 image
?>
Load images in website using php:
<?php
$image = file_get_contents("https://www.facebook.com/images/fb_icon_325x325.png");
$base64 = base64_encode($image);
echo $base64; // This will echo the encoded base64 image
?>
<img src= "data:image/png;base64,<?php echo $base64; ?>" >
Using css background:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUUAAAFFEAYAAAAr5CMeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA+3UAAITUAAB6swAA/2cAADBbAAAQhVDPV6EAABJcSURBVHja7N1/dNX1fcfxd0KI4TdECFiCAioERKER/EWk0lpEB5Ra6wSROeuPqBymlnlcZzsPc5Yq/uJQpa6lHkXKOudRjvO0mbNWA6KzqKttkSq1/AgQUtQkhJCEZH/ce5slhForP5Lcx+OfzzEnDfEVT336vbnfb8bEolmzlz0ch9mIEYlz6tTEOXFi4hyZ/PjxxyfOXr0TZ1ZWAACkpYaGxFlVmTg3b06c72xMnKVrEmdJSfLjGw7Xd3KIg6xrduKcMydx3nh94jx9vB86AMCflWfJPuuX2/IcOy5xXnppy89fvz5xLv1u4lyxInHW133a7yTz0PwNzZiRODf8JnEu/4FABAA4EgoLW/bXb36VOKfPOEqh2LNnslgfT5zPPJM4hw/3wwIAOJpOPClxrn6mZa+l+u2wheLg/MT5yiuJ8/I5fhgAAO1ZqtfWrGnZc4csFPOTX3DNy4lzzBijAwB0JKed1rLn8j82GD8mFFOXKJ/7z8R5wlAjAwB0ZKmeS/XdwV+S/phQTN0459TTjAoA0Jmk+u7gN0o8SCim3sXsdxABADq3VO8d+C7pVqGYug/i/fcbDQAgnTxwf8sePCAUUzfKdpsbAID0kuq/OXMOEoqpJ6kAAJCebri+VSgWFCROT1IBAEhv45M9OLIgGYpfnGIUAACaTZmSDMVzJxoDAIBmE89OhuLIAmMAANBs1OhkKA7JNwYAAM2G5CdDsVdvYwAA0Kxnz2QoZmUZAwCAZl2zM40AAEBbhCIAAEIRAAChCACAUAQAQCgCACAUAQAQigAACEUAAIQiAABCEQAAoQgAgFAEAEAoAgCAUAQAQCgCACAUAQAQigAACEUAAIQiAABCEQAAoQgAgFAEAEAoAgAgFAEAEIoAACAUAQAQigAACEUAAIQiAACHVZYJAEgnXfIyl2c+GjGoYsDney6JyF838F/6LIsYvGbQot6PRPTv26+xx+KIAb/ut6JHZUTui31yul0S0bewd0m3OyN6Lu2+Prt/RM/Z3Rdkfyui2+0547reGpFd2XVzl5Wf/vvbX954VdOVETW1exfWlzR/vPHpxu6Nr0XsKdy7sf7ilp/feFVETU3i82svqru1oTKi/pH6+fsLIqrn1RTWVUQ0zG3ov/+BiJq62oX1z0fUTt2X+LxlDfP2F0RUz68ZX1cRUX9lQ//GByJqamrvqCuJqKnfu7D++Yia5J9bPa+mcF95RPX8mgl1FRF75tWMqyuPqMzfM2nfsxF7X6gtqB/un7POImNi0azZyx5uajIFAB36yse7XaZk5kQUbD3xsbzbI0b/+4kX5pVFnNz9hLnH3hZxcvehc4+9NWJY8eBb+uVEdEl+PodWw9z9/RuXRFQeX120b3VEZX71pNpnI3af91HN3icjKkbvnrOnd8QHOZWP7u0fUX717mf3rIj4IPuj5XvzIkpeXfOd3w6yo1AEgE/yL6zFGTMy3owomD3s0gFPRZx577heQwojxq8+Zd3gMRGjnzzporyyQ3dlj6Oj6NzZl39vmR3azX+AmQCA9iTz4syajLMiPnvV6F9+pjri/BPO2njSlIhzu0yYOvSWiL7v9frrnPKIiKiOiIiZyf/h8thsPRCKAHQiJ2z6zEl9z4qYPnLyrFH3RVzwTNHQk/tH9Ls58buB8WFE1ERERIm1QCgC0AmlrhROKhl/wbCbIi457oKiMeMjxu0fdedxEREvREE8ZicQigB0eql3F184/XMDRtwVccWyGfM++1DE4HUDi3u/2OJTV1kLhCIAnVjqzSZfGH72b0+cGnH1ty95Z/zaiPwrB1X2yYyIKyPi83YCoQhA2hj14xMvyiuLuPlHV14z8aKI0WeeWJk3IyLusw0IRQDSSo+l3ddn50XM63r5N88ujZh273k9C16IyFicURkL7QNCEYC0c+Z9Y3sNKYy47bvX3PO5dyMGPJI7rcd9EbHYNiAUAUgrXYuzlnbZEDGv65xvnl0a8ZUJU5ae8npETIiIM+wDQhGAtHPcbQOW9Loq4p9PuWnAFz+MKBg6rGFAnl0gHWWaAICIiLG5Be8d93zE99+7M+PicoEICEWAtHfh9EkDRt4V8WCff3x32qSIPvN75ebk2wXw0jNA2rr0xgs/e9oNEfOXXPH62Q9FxNqoiGK7AEIRIG39zX98uVvh1Ihr8r66YEJjRFxmE6BtXnoGSBOzL5j29+Nuibgm76vfnzDUHoBQBEh7Mz93/t7RYyJueG72ojM9LQUQigAUjTt939DHIm4p/NufFGVFxNpY5XcQAaEIkMaGlwy5Ife8iG823bBp8tMRmRdn1GScZRdAKAKkrZ6XdV9wzO0R33lwwb9NXRvRY2m39dnugwgIRYD0lbE2Y1UUR3xjZ/Hk83Kbn6wC8Gm5PQ5AB3fx/V/cNebqiEnzx+cO3WgPQCgCpL3BmQPf710Ycf2HszafWRkREblWAYQiQBrLWJwxI+PNiG+cXPwPk5+MyMk9ZlzW83YBDj2/owjQwUz7wXk9Cl6IGJs7ctMggQgIRQBS72q+7trLlpxxqT2Aw89LzwAdxNdevuRHp++I6Htjr5Ic/+8NHAGuKAK0c4Mq+n++15KImeedX3PKGHsAQhGApKv2f6Xp9DsiuhZnLc3cYA9AKAKkvfx1A+/q80jEBaXnrh3xnD0AoQhA0lefuPCeUzMjuuRlLs941B6AUARIe33m98rNyY+YfvXk1QUj7AEIRQCSpo+aPGvUfRHZlV03d1lpD0AoAqS9jLUZq6I4YvrVk58tOMkewNHnTlwA7UTh7lOGDS6NGNxn4F29H7EHcPS5ogjQTkz9eZF3NwNCEYBmXYuzlnbZEDGpZMLUoTfZA2g/vPQMcJSddd/YXkMKI3r8otv67Dx7AO2HK4oAR9mkf5qwe5gnrgBCEYCU1Lucz3xt7LVDXrMH0P546RngKDl5/dCs/psicsf2ebrb8/YA2h9XFAGOkjO6nPqzIVfbARCKALQydtrIMwZdYgdAKAKQlLE4Y0bGmxFjXhqxY9Cd9gDaL7+jCHCEDSvOX9AvJ6LXGz22ZJfZI13sm1p3W0NlxHtTtjy0+8WI9xb+/sPdl0Vs6rl10u7RETsf/0Pv6kkRuyd9tG/vjyMqKj/I3HNrxJ55NYV1Fc1fp2rznq37PmNPhCJApzRy1rCvDHgq+RcP2KOzKSstX1d1RsSL1a+9tOmyiFe//lbllvURbz37zhs7fhzRMLdh+v4lEXFqXBH3RUTECRER8a3/90Vub/Elt4YwRCgCpIeTzj/huWP7ysTO4hfTfnXGtrcjVoxdXfTmixGvL3r7wa2vRTSd03RZLIuI3Igoioi50T+K7IVQBOBPOLn7CXOPvdUOHVXqiuG9x/zw0ZeXRrz60Vsnb1kfES/FzsiKiHMiEYggFAH4pIYVD17QLyciXrRFR/Lfg1751nszI75z6r9e8fNVETW1tVX1JXZBKAJwCPRY321E9lMR/fb0yekmMDqMJ4f+9Pi3r454cNdj29Y8HdFU2/SeK4akC7fHAThCBq8ddFdvgdFhPFfx0vkbcyMe3PLYtjXf/3+/cwhCEYBDLX/dwG/3ecQO7d2m5O1r7v3C8n0vjxGICEUAjoABv8pd2aPSDu1V04Km1TEu4s5XHv6fn/0kYl/vuuMbZtsFoQjAEdC/b7/G7ovt0F79NKv0/Y2rIzaOe7+uYqg9QCgCHEHHXtT30h7D7dDuJG9n8/jjz/zhjd3mAKEIcBTkvtgnp9sldmhv3nr2ndd2PBnx++Fl7364zh4gFAGOgtTtcWhfnr9kzYZ3d9gBhCLA0QzFJd1fz+5vh/Zm3dffqtq83g7QFjfcBjhCei7tvj47LyLutEV7sHPjH66t/nXE9kW79lS9ZA9oiyuKAEfIMR9mb+6y0g7txcZ5v7u4whNyQCgCtAcZizNmZLxph/ZiU88tk3YX2AGEIkA70D0n546uU+zQXpQt2nVT1XI7gFAEgFZ2DKx4oWq+HUAoAkArHz1Q9UHtVjuAUASAVqpX7bm7bqEdQCgCQCtVq2oW73OrIhCKAAAIRQD4s9S9Xbd2vxttg1AEgNbqlzXM2+8+iiAUAQAQigAACEUAAIQiAABCEQAAoQgAgFAEAEAoAgAgFAEAEIoAAAhFAAAQigAACEUAAIQiAABCEQAAoQgAgFAEAEAoAgAgFAEAEIoAAAhFAACEIgAAQhEAAKEIAABCEQAAoQgAgFAEAEAoAgAgFAEAEIoAALQzGROLZs1e9nBTkymAlNKXVz5xXbEdgMPnrYINt29/N+LGAQt/t/p5e7RXrigCAEfc9pm78qqy7SAUAQBa2da4c2jlejsIRQCAVrbPcEVRKAIAtBWK9+y6qWq5HYQiAEArZYvK/65SKApFAICUhrn7+zcuiaio/CCz5lZ7CEUAgKTUu52bFjStbhpnD6EIAJAKxUXlfjdRKAIAtBGK7p8oFAEA2lJWWr6u8gw7CEUAgFa2f8kVRaEIANBWKN5dfrPfURSKAAAH2Oal5w4lywQAwOFWU1t7R31JROWl1b+tnWaPjsIVRQDgsNt+t9viCEUAgLZCcdGu+R7ZJxQBAA4MxRm7Bnm3s1AEADjAttg5tPJNOwhFAIBW3D9RKAIAtB2KM3cdJxSFIgDAAcpKy9dWuX9ih+M+igDAYfPh61VTam+PqF24b0D93fboaFxRBAAOm7KXPIlFKAIAtMGNtoUiAEDboTjTu52FIgBAG8pKy9dVnmUHoQgA0Ir7JwpFAIA2lZWWv+rNLEIRAOCPGp9q6t60LmLnxoprq39tD6EIAJC0a8zuOXt6RzSctL+ksdYeQhEAIGn7ovL5bosjFAEADlB29y73TxSKAAAH2n53+fxKoSgUAQBaKyv16D6hCADQBvdPFIoAAG2H4oxdA4WiUAQA+KP6ZQ3zGgsiKsZ8MGdPb3sIRQCApO0zEy85N53TdFkss4dQBABIheLd5TdVPmoHoQgA0ErZol1utC0UAQAOtGPmrkHexCIUAQAOUHZPuSeyCEUAgDZCsbT8FTfaFooAAAfYPsNLz51JlgkAgE9rz7y9hXXlEZVvVY+qnWaPzsIVRQDgU0vdPxGhCADQwo4ZQlEoAgC0YVvsHF75ph06m4yJRbNmL3u4qckUAIdX6csrn7iu2A7tRdG5sy//nkfMwZ/kiiIAAEIRAAChCACAUAQAQCgCACAUAQAQigAACEUAAIQiAABCEQAAoQgAgFAEAEAoAgCAUAQAQCgCACAUAQAQigAACEUAAIQiAABCEQAAoQgAgFAEAEAoAgAgFAEAEIoAACAUAQAQigAACEUAAIQiAABCEQAAoQgAgFAEAEAoAgAgFAEAEIoAAAhFAACEIgAACEUAAIQiAABCEQAAoQgAgFAEAEAoAgAgFAEAEIoAAAhFAACEIgAAQhEAAKEIAIBQBAAAoQgAgFAEAEAoAgAgFAEAEIoAAAhFAACEIgAAQhEAAKEIAIBQBABAKAIAIBQBAEAoAgAgFAEAEIoAAAhFAACEIgAAQhEAAKEIAIBQBABAKAIAIBQBABCKAAAIRQAAEIoAAAhFAACEIgAAQhEAAKEIAIBQBABAKAIAIBQBABCKAAAIRQAAhCIAAEIRAACEIgAAQhEAAKEIAIBQBABAKAIAIBQBABCKAAAIRQAAhCIAAEIRAAChCACAUAQAQCgCAIBQBABAKAIAIBQBABCKAAAIRQAAhCIAAEIRAAChCABAxw7FhgZTAADQrL4uGYpVlcYAAKBZdXUyFLdsNQYAAM22bE2G4jsbjAEAQLMNG5Kh+PIaYwAA0Kx0TTIU/6vEGAAANCspSYbihuRLz7943SgAAOns9WQPvrOh1X0UH3rYOAAA6ay5B1uF4uMrEufvNhkJACCdbEr234oVBwnF+rrEedPNxgIASCc339yyBw/6CL/VqxPnypVGAwDozFK9l+q/Zh/zrOfi6xPnL//XiAAAnUmq76677mCf8TGhmHq030V/lTh//75RAQA6slTPpfquuvovDMWUrclH/E08N3G+/baRAQA6klS/pXpu68c+wjnzk/0B25Jf8JyJifOJFUYHAGjPUr129tkte+7jZf5lf2DqJek5VyTOmV9OnO+/74cBAHA0pW5z86Uvtey1g7/EfIhDsbVnnk6cI0Ymzqu+ljg96QUA4PB6Y33L/ioYlTgPfBfzJ5V1aL/R1H13fri85VlQkDinTEmcRcmXrkcmPz4kP3H26p38trL80AGA9NTQkDhTr+Bu3pw4N25MnKVrEmdJSeJMPYr50Pu/AQBZWmLMHTSOWQAAAABJRU5ErkJggg==);
Advantage of using base64:
The advantage lies in not having to open another connection and make a HTTP request to the server for the image. advantage for large numbers of very tiny individual images.
Disadvantages :
The actual length of MIME-compliant Base64-encoded binary data is usually about 137% of the original data length, Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers).
In other words, the size of the decoded data can be approximated with this formula:
<?php
$imagedata = file_get_contents("https://www.facebook.com/images/fb_icon_325x325.png");
$base64 = base64_encode($imagedata);
echo $bytes = (strlen($base64) -814 ) / 1.37;
?>
Source: http://en.wikipedia.org/wiki/Base64#MIME
If you do the base64 encoding from the source files with each request, you’ll be using up more CPU, thrashing your data caches, etc, which might hurt your servers response time.
Doing this will of course prevent most forms of caching, which could hurt a lot if the image is viewed often – say, a logo that is displayed on every page, which could normally be cached by the browser (or a proxy cache like squid or whatever) and requested once a month. It will also prevent the many many optimizations web servers have for serving static files using kernel APIs like sendfile
