How to Find the Codes or URLs for Web 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:
- Find the image you want
- Right click that image (Ctrl + click on a Mac)
- A menu will appear. From that menu I select "Copy Image Address"
- If you paste what is now on your clipboard, you will find that you have the full path to that image
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
Posted By ZaptaiLo.BlogSpot.Com
Post a Comment