How to Find the Codes or URLs for Web Images

Two woman presenting web design
Maskot/Getty Images

A common scenario online is that you have an image on your website that you want to link to. Perhaps you are coding a page on your site and you want to add that image, or maybe you want to link to it from another site, like a social media account that you have. In either case, the first step in this process is to identity the URL (uniform resource locator) of that image. This is the unique address and file path to that specific image on the Web.

Let's take a look at how this is done.

Getting Started

To begin, go to the page with the image you want to use. Keep in mind, however, that you should use an image that you own. That's because pointing to other people's images is considered bandwidth theft and can get you in trouble - even legally. If you link to an image on your website, you are using your own image and your own bandwidth. That is fine, but if you link to someone else's website, you are sucking up their site bandwidth to display that image. If that site has monthly limits on their bandwidth usage, which many hosting companies do impose, then you are eating into their monthly limit without their consent. Additionally, copying another person's image to your website could be a copyright violation. If someone has licensed an image to use on their website, they have done so for their website alone. Linking to that image and drawing it into your site so it displays on your page goes outside of that license and could open you up to legal penalties and fines.

Bottom line, you can link to images that are outside of your own site/domain, but it considered rude at best and illegal at worst, so just avoid this practice all together. For the sake of this article, we will assume the images are legally hosted on your own domain.

Now that you understand the "gotchas" of image linking, we will want to identify which browser you'll use.

Different browsers do things differently, which makes sense since they are all unique software platforms created by different companies. For the most part, however, browsers all work somewhat similar these days. In Google Chrome, this is what I would do:

  1. Find the image you want
  2. Right click that image (Ctrl + click on a Mac)
  3. A menu will appear. From that menu I select "Copy Image Address"
  4. If you paste what is now on your clipboard, you will find that you have the full path to that image

Now, this is how it works in Google Chrome. Other browsers do have differences. In Internet Explorer, you right click on the image and choose “Properties.” From that dialog box you will see the path to this image. Copy the address of the image by selecting it and copying it to your clipboard.

In Firefox, you would right click on the image and choose “copy image location.”

Mobile devices are even trickier when it comes to finding a URL path, and since there are so many different devices on the market today, creating a definitive list of how to find an image URL on all platforms and devices would be a daunting task. In many cases, however, you touch and hold on an image to access a menu that will allow you to save the image or find its URL.

OK, so once you have your image URL, you can add it to an HTML document. Remember, this was the whole point of this exercise, to find the image's URL so we could add it to our page! Here’s how to add it with HTML. Note that you would write this code in whichever HTML editor you prefer:

Type:

<img src="" alt="">

Between the first set of double quotes you would paste the path to the image you want to include. The alt text's value should be descriptive content explaining what the image is for someone who may not actually see it on the page.

Upload your web page and test it in a web browser to see if your image is now in place!

 

Useful Tips

Width and height attributes are not required on images, and they should be excluded unless you always want that image to be rendered in that exact size. With responsive websites and images that reflow and resize based on screen size, this is rarely the case these days.

You are likely better off leaving the width and height off, especially since In the absence of any other sizing info or styles) the browser will display the image in its default size anyway.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 6/4/17