3

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.

schenker
  • 941
  • 3
  • 12
  • 25

6 Answers6

9

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

Jezen Thomas
  • 13,619
  • 6
  • 53
  • 91
  • 1
    I assume the person who posted the now-deleted heavily downvoted answer went on a revenge spree. – JJJ Jun 23 '12 at 13:25
  • 1
    Additionally, you don't necessarily need to specify width or height (though there are occasional advantages to doing so); and most likely get nothing from closing the element (…" /> vs …">) except in XHTML, which you most likely get nothing from using over HTML. – reisio Jun 23 '12 at 13:52
  • 1
    …aaannnddd of course purely stylistic images should be background images, and not included via img elements. – reisio Jun 24 '12 at 07:06
2

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.

JJJ
  • 32,902
  • 20
  • 89
  • 102
1

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.

micho
  • 119
  • 1
  • 1
  • 11
1

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.

GrayFox374
  • 1,742
  • 9
  • 13
  • +1 I moved a large web application the other week that was riddled with absolute links for no good reason and it was a nightmare! – Stecman Jun 23 '12 at 13:32
0

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.

Sebastian Oberste-Vorth
  • 979
  • 15
  • 31
  • ...except when you move the HTML file out from its original directory. – JJJ Jun 23 '12 at 13:24
  • @Juhana there is HTML `base` (granted it wouldn't suit a lot of situations) http://www.w3schools.com/tags/tag_base.asp – Stecman Jun 23 '12 at 13:30
  • Exactly you mustn't move around html files. But lets say you move your whole directory to another server oder directory you don't have to update the references – Sebastian Oberste-Vorth Jun 23 '12 at 13:34
0

The second example is not that correct to load the images.

Use Root-relative URL for good practice

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

These URLs are always relative to the root of the folder. These URLs are useful while moving between servers.

Rutvij07
  • 365
  • 2
  • 13