Is it possible to create a HTML thumbnail with an "inline" image?

Question

Look at this:

<a href="https://asdf.com/asdf.jpg">
    <img src="https://asdf.com/asdf.jpg" width=100 height=100>
</a>

As you can see, the same image URL is used. The thumbnail one is obviously resized. And clicking on it, shows the image without size restrictions, as expected.

My question. Is it possible to do it by replacing the image link by its base64-encoded content, like this "data:image;base64,/9j/4AAQSk...BK//2Q==" ?

Reason: I am creating a self-contained single page with the content of a bunch of images.

But here are two problems.

href does not seem to work with this type of content.
even if it worked, repeating the content (in both href and src attributes) would mean a terrible waste of space.

Any ideas? Thanks =)

Edit (2023-03-17)

I've just got rid of the anchor, and added this to the img tag:

onclick='window.open("","_self").document.write("<img src=\""+src+"\" onclick=\"location.reload()\">")'

The reload() is necessary since I found no way of going back to the previous page (because there isn't any). But it's fine since the resources are local.

Opening the image in a new window is even simpler:

onclick='window.open().document.write("<img src=\""+src+"\">")'

href works fine. see [Is it safe to use to display images?](https://stackoverflow.com/questions/5889345/is-it-safe-to-use-a-href-data-to-display-images) That dupe also lists all the possible drawbacks (data duplication, lack of caching etc.) — pilchard, Mar 17 '23 at 14:16
Hi. It does not work well I think. Just tested it. Clicking over does not do anything. Opening the link in a new tab works, though. Anyway, I am (mostly) aware about the drawbacks and I can live with those. However, the repeated content is a NO-NO. — Alvein, Mar 17 '23 at 14:29
There's a good tip in Oded's answer: "_use [data URI scheme] in CSS to mitigate the download issue_". Instead of linking to an image, show it on the same page in a separate element, and use CSS to create the image data. — Teemu, Mar 17 '23 at 14:37
@Teemu How do I set an anchor href in CSS? Will I be repeating the image content also for the img src tag? — Alvein, Mar 17 '23 at 15:02
?? I said "_Instead of linking to an image, show it on the same page in a separate element,_". That is, no anchors or even images at all, just (div) elements with background image, differently styled for the full-size image and the thumbnail. — Teemu, Mar 17 '23 at 15:58
@Teemu Oh, I didn't get you were talking about divs. Will try that... — Alvein, Mar 17 '23 at 16:54
[This would be much easier with CSS](https://jsfiddle.net/6bkaduvt/) and a small piece of script. With CSS browser really need to create the image only once, and no issues with the browsing history. — Teemu, Mar 17 '23 at 17:56

Is it possible to create a HTML thumbnail with an "inline" image?

0 Answers0