hengecyche hengecyche - 3 months ago 5x
HTML Question

Image prefetching using <link> tag

I have seen sites using tag to load images eg;

<link href='images.jpg' rel='somthing' type='something'>

what relevance does this have while designing a website?
What aspect of website does it help optimize( i am thinking it's used for optimization. Right me if i am wrong). Can someone explain this to me?


Some people use this for image/css/page prefetching. You can read about it here.

Basically, once a page is finished loading the browser will see these link tags and if the rel attribute is "next" or "prefetch" then the browser will start downloading whatever the href attribute points to and store it in the cache so that it will load very fast if the user clicks on it.

This method can be used to prefetch anything including images, style sheets, different web pages, etc. As long as the url used in the <link> matches the url used to normally load the resource, it will load that resource from the cache.

For example, if your page had this link <a href="page2.html">Page 2</a> and you wanted to prefetch it, you would add this to your page <link rel="next" href="page2.html">.

Finally, this method of prefetching is preferred over the javascript methods because this type of prefetching is standards compliant, is handled by the browser, and can be disabled by the user if they have metered bandwidth or other connection limitations.