what is the correct way to link image in website?

3
votes

As per my title, what is the correct way? I have seen both of these appearing in websites:

<img alt="My image" height="60" src="http://www.website.com/images/myimage.png" width="80">

And

<img src="images/myimage.png" width="60" height="80" alt="my image"/>

What is the good of each type? Does the 1st one aids in faster loading of image as compared to the 2nd one?

Thanks.

5
htmlcss
@SRN Why is the second one faster? - JJJ
I think it is not faster - Enve
You can read up on absolute vs relative URLS here stackoverflow.com/questions/2005079/absolute-vs-relative-urls - Dan
@schenker If an answer helped you, could you please mark it as correct? - Jezen Thomas

5 Answers

9
votes

The second example is a relative URL. In general, it's better for scalability when you don't hard-code things like URLs.

2
votes

The only difference is that if the image is not in the same domain you have to use the full URL. There is no difference in speed.

If you have relative URLs the images break if you move the HTML file somewhere else; if you have full URLs the images break if you move the website to another domain.

1
votes

i prefer the 2nd option. the link is relative to the path were your html file is located. if you copy your site to another subdirectory etc you don't need to update your html code which you have to when u choose the first option. if the image is on another domain, then the first option is the way to go.

1
votes

If you are following best practices, you should have multiple environments, say for development, testing, QA, pre-production and production. For this reason alone, the URLs should be relative. If you do all your development and testing in prod, well... this is a bad way to do business.

0
votes

It is defenitely better to use relative urls. Because when you change something in your structure of your code, you would have to change all the references to the images as well.

With relative paths you don't have to change anything at all.