0

I have a function that can output base64 encode encoded image data to a tag. The following works:

echo '<img src="'.$base64.'">';

But if I try the following with same prepared data, it no longer works.

echo '<body background="'.$base64.'">';

Any solutions for this to work in tag directly?

EDIT: I wish to note that I was unable to manipulate the background attributes via Javascript after using the following method in the accepted solution:

echo '<body style="background: url(data:image/png;base64,'.$base64.')">';

However I fixed this by echoing the image-data with php directly to the style instead inside style tags:

<style>
body {
<?php
  echo 'background-image: url('.$base64.');' . "\n";
  echo 'background-size: 100% 100%;' . "\n";
?>
}
</style>

I am not sure why is behaves differently.

Mikko-Pentti Einari Eronen
  • 933
  • 1
  • 10
  • 30

1 Answers1

2
echo '<body style="background: url(data:image/png;base64,'.$base64.')">';

Replace image/png with image/jpeg if your base64 data represents a jpg image.

Manuel Otto
  • 6,410
  • 1
  • 18
  • 25
  • Thank you! This worked. Sorry for not making clear, I added the data:image/png within the $base64 data (adding it accordingly after detecting the image format/mime type. echo ''; – Mikko-Pentti Einari Eronen Sep 16 '17 at 14:18
  • By the way do I have to clear cache or free the memory somehow to make sure the photodata gets updated. Now the data does not change/update even if I edit or replace the source photo file. – Mikko-Pentti Einari Eronen Sep 16 '17 at 17:09
  • @Mikko-PenttiEinariEronen No, I dont think this data will get cached by the browser. Can you confirm the data is really different? You can also go into devtools and disable cache, then reload. – Manuel Otto Sep 16 '17 at 17:38
  • Well I resized an image for example but it still keeps reloading the same old data. Same happends if I replace the image completely. – Mikko-Pentti Einari Eronen Sep 16 '17 at 17:57
  • @Mikko-PenttiEinariEronen Maybe your whole HTML page is being cached. Does the background change when you clear cache? – Manuel Otto Sep 16 '17 at 18:10
  • The issue vanished now after began testing on a server via FTP, was running PHP locally and it was acting weirdly. Works now, no idea why it did that : ) – Mikko-Pentti Einari Eronen Sep 17 '17 at 02:37
  • 2
    Just remember that base64 encoding adds about 30% to the amount of data and can't be cached if it's in a dynamic page, which leads to a lot of unnecessary bandwidth consumption. There's a reason why people don't do this a lot. – jhilgeman Sep 17 '17 at 14:55
  • @jhilgeman That's true. But you know what's weird. Go to google shopping search, and check their preview images. They are all base64. I wonder why... – Manuel Otto Sep 17 '17 at 18:08
  • @ManuelOtto - Several reasons. An inline image reduces the amount of connections since the browser doesn't have to establish a separate server connection to download the image. If you don't have a lot of repeat requests for the same product image, there's little benefit to a browser cache. Finally, since a single shopping page could have dozens of SMALL product photos, it's far more efficient/faster to deliver the page by bundling it all into a single, large page and free up a dozen connections for more unique shoppers. I'm just saying it's USUALLY not a good idea for most pages. – jhilgeman Sep 17 '17 at 18:25