July 21, 2013 asvignesh 0Comment

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,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);

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

Software developer experience in building storage management and Data protection software for the Private and public cloud.

Disclaimer :

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. my thoughts and opinions change from time to timeā€¦ This weblog is intended to provide a semi-permanent point in time snapshot and manifestation of the various memes running around my brain, and as such any thoughts and opinions expressed within out-of-date posts may not the same, nor even similar, to those I may hold today.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *