0

Is it possible to have an HTML img tag with a URL source, and a low-res Base-64 encoded version?

My use case is a push message sent to an application, which might have poor internet connection. The push message contains HTML text that needs to be shown on the mobile device within an app webview.

The payload size of a push message is limited to 4k. The metadata and HTML take about 1.5k, so I have about 2.k free.

If I could send a minified version of the image, I can reduce the image size to 2.5k and send it as an inline src:

enter image description here

Which seems like a pretty good placeholder when stretched to fool size:

enter image description here

And then, the user can wait a few seconds before the full image loads:

enter image description here

Is there a standard way to send an inline low-res of an HTML image, and send a link to the high-res version to be loaded if the connection allows it?

Community
  • 1
  • 1
Adam Matan
  • 128,757
  • 147
  • 397
  • 562
  • Couldn't one use two images, overlayed on top of each other with CSS, with the lower z-index one image loading a base64 string, and the other loading a hi-res version via URI? – Drakes May 16 '16 at 02:06

2 Answers2

3

I have a partial solution (works in browser, but not so good in email client). I set the base64 version to be the background of the div and inside the div I put the link to the hi-res file. I also put some inline code to hide the broken image if the file is not available.

<div width="500" height="375" style="width: 500px; height: 375px; background-size: 100% 100%; background-repeat: no-repeat; background-image: url('data:image/jpeg;base64,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');">
    <img width="500" height="375" style="width: 500px; height: 375px;" src="https://i.stack.imgur.com/VRBmC.jpg" onerror="this.style.display='none'; this.onerror = null;">
</div>

The email client support is very limited, though. Many of them strips the base64 image, so no fallback image if the linked image doesn`t load. You can find out more HERE. Javascript support is even worse (I read that Outlook & OE might support it), so the broken image shows in front of the fallback pic after all.

I've only tested on Gmail (no fallback pic) and on Thunderbird (no javascript), but you might have better luck.

My solution is based on THIS and THIS answer, please upvote them, too.

Alternatively, you could use javascript to load image only if it is available, so there would be no broken image, but with as bad js support as we have, the hi-res pic would very rarely load.

I'd really like to see a fully working solution, or an improvement over mine.

Community
  • 1
  • 1
robotik
  • 1,837
  • 1
  • 20
  • 26
1

There is a nice example that use jquery or pure javascript to load 2 photos, (parallel loading) may it will help you, not sure about it :|

take a look on it here. They dont use special html tag to do it... only javascript. Hope it helps.

Community
  • 1
  • 1
Adi Azarya
  • 4,015
  • 3
  • 18
  • 26
  • Thanks for the answer. I'm looking for a native HTML/CSS solution, but if it does not work I will fallback to this one. – Adam Matan May 15 '16 at 10:24