Image prefetching using <link> tag

Question

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?

Answer 1

While a page loads, blocking scripts can interrupt, forcing other scripts to wait. rel=preload in a link element becomes a declarative fetch primitive that initiates an early fetch and separates fetching from resource execution.

<link rel="preload" href="/style/other.css" as="style">

<link rel="preload" href="/assets/font.woff2" as="font">

<link rel="preload" href="/img/header.png" as="image">

ref. https://w3c.github.io/preload/

take note that preload is PREliminary

Answer 2

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.