Base64 for images a look

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

Default image
Vignesh A Sathiyanantham
AWS Certified developer with 8 years of extensive experience working for Cloud and Datacenter solutions and leading a small team in a lean startup based on Bangalore, India
Leave a Reply

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