0

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)???

Sudhir Dehade
  • 109
  • 1
  • 11

1 Answers1

1

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.

MMM
  • 307
  • 8
  • 18
  • So that means it will only load 1kb of data from server for that image, so it will not affect the website loading time. – Sudhir Dehade Aug 23 '19 at 08:53
  • It will affect the loading time (albeit minimally) for only _one_ image. When the image gets re-used the browser will grab its existing copy from its cache. – MMM Aug 23 '19 at 09:03