Always a URL

The src attribute identifies an image by a URL. The image defined by the URL is retrieved by the browser and inserted into the document when the page loads.

There are three different kinds of URLs that can be used in the src attribute:

Absolute URLs

This is the most straightforward, and is the only way to go if you want to link to an external image (an image hosted on another site).

<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">

A Note on Hotlinking

Including an image from another website like this is sometimes called “hotlinking.” Not all external-URL images are “hotlinks” — only when you link to an image that is already on another sight so that you don’t have to download it yourself.

Hotlinking is sometimes just fine. For instance, in the above example we hotlinked an image from Wikimedia Commons. This is a Public Domain image hosted by a media provider. No problem. However, it can be a problem in certain circumstances.

First of all, if the image in question is under copyright, and you do not have permission to use it, you may be in violation of copyright laws by hotlinking. Because you aren’t actually putting the image on your site, there is a bit of a legal gray area here, but it is at least potentially a problem.

Related to that, even if isn’t illegal, it may be immoral or unethical if you know that the image owner does not want you to hotlink their pictures. While you aren’t exactly “stealing” the image, you are using up their bandwidth and creating ill will.

Finally, if you don’t control the hotlinked image, it might change. Sometimes this just happens because sites go down or get rearranged. However, sometimes a perturbed site owner will deliberately change an image in response to hotlinking.

Hotlinking to an image hosting service is just fine, and it’s also reasonable to hotlink an image in a casual conversation on a forum or blog comment. But if an image is an integral part of your content (even if the content is a link to the image’s original source), you really should save the image to your own server.

Relative URLs

A relative URL does not include the domain name, and is relative to either the current page, or the current domain. If you begin the URL without a slash ( / ), it will be relative to the current page. If you begin with a slash, it will be relative to the domain.

It is almost always the best idea to use source URLs which are relative to the domain, not the page. They will not break if the page content is moved or copied.

Additionally, when linking to images on your own site, it is almost always best to use relative URLs rather than absolute URLs. This way, the URLs won’t break when you change domains (which will happen automatically if you use a development or staging server in addition to your production one).

<img src="/wp-content/uploads/flamingo.jpg">

Data URIs

It is possible to encode content into a URI string. You then use the string as if it were a URL, and then the browser simply interprets it as if it were a file