Quick Tips 💡: Referencing of Images in Your Blog

With all the recent action regarding copyrighted pictures and referencing external images on Steemit, if we were to link every image we use, the posts can become cluttered with URLs. I think it's annoying to show links for every image used. Here are a few tricks to embed an image with a reference to its source.

This is kitten begging to be cuddled (really, look at it):

If you wish to add its URL without cluttering, use the subscript <sub> or superscript <sup> tag, like this:
<sub>h<i></i>ttps://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg</sub>

Notice that I added the <i></i> tags to split the "http" word. It's a quick and dirty hack to prevent autolinking (showing the image) instead of the URL text.

Result:
_{https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg}

To add a clickable URL, use this template:
<sub><a href="http://example.com">http://example.com or any text you wish</a></sub>

So in our case, we write:
<sub><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg">https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg</a></sub>

Which gives us this result with the full clickable URL:

Or something shorter like this:
_{click here for the source}

Another alternative, which I prefer, is to use a clickable image with a link to its source, like this:
[![](https://some.image.url)](https://some.image.url)
or
[![some picture description](https://some.image.url)](https://some.image.url)

So back to our cute kitten we write:
[![](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg)](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Cute-kittens-12929201-1600-1200.jpg/320px-Cute-kittens-12929201-1600-1200.jpg)

And we get this nice and tidy clickable image:

I hope you found this post useful 🙂

---

Proud member and delegator of the @minnowsupport project.
Join us on https://discord.gg/GpHEEhV

---

If you like this post, upvote and comment.
If you really like it, resteem.
If you love it, follow.
_{Don't be shy, click that banner and enjoy my blog (gif animation by @justcallmemyth)}