If the browser is viewing an page in SSL through HTTPS, then it'll request that asset with the https protocol, otherwise it'll request it with HTTP.

This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in browsers, keeping all your asset requests within the same protocol.

Let's understand this with an example -

Example 1 -

For Website URL - http://RajeshKumarYadav.com

<img src="http://RajeshKumarYadav.com/img/logo.png"/>

will be fine but

<img src="https://RajeshKumarYadav.com/img/logo.png"/>

will through error.

Example 2 -

For Website URL - https://RajeshKumarYadav.com

<img src="https://RajeshKumarYadav.com/img/logo.png"/>

will be fine but

<img src="http://RajeshKumarYadav.com/img/logo.png"/>

will through error.

What's the fix then?

To fix the error, we should avoid writing protocol as http or https and we can call the assets as mentioned below -

<img src="//domain.com/img/logo.png"/>

Here you can see we are using // only and if your website has http then image will also have http automatically, if your website has https in the URL then image will automatically have https.

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.