Search code examples
csspngweb-optimization

Is it feasible to use 1kb .png image as background-image (On Repeat)?

I have created one png image from http://bg.siteorigin.com/. The size of that image is 1kb which I am using as background-image on body tag.

I want to know --- If I use another image of 500kb(1,920px * 1,080px) it will take more time to load and 500kb data consumption also. So if I use this .png image(1kb) on repeat how much data it will consume.

body {
   background-image:url("../path/imgName.png") ;
}

Does it make any difference for the same display size(1,920px * 1,080px)???

Solution

  • Your 1 kilobyte image will consume 1 kilobyte of data. Browsers generally only load resources once no matter how many times you use them on the same page.

    Example in practice:

    Example image Example image Example image Example image

    Despite being shown four times on this page, if you'll look in the network tab of your browser's developer tools you will see that it only loaded once.