I have a background image 2MB in all pages

I have a background image 2MB (2200KB)in all pages
Size 1920 x 1300 width x height

A background image how much KBs should be at most…? Needed optimization my bkgd Img, to be around size… what?

That is a very large file for a single image, and it needs to be able to re-size and adapt to different size viewports, but the bigger question is how many http-requests the page makes in its code. I read that 200k is an optimal maximum size for the page, but I found a website that has a tool for page optimization and spits out a free analysis tool (look for the tool called Web Page Analyzer). It seems to be very handy. You can always test the page download time on different connections and different computers / browsers to see how quick it is.

Hope this helps.

The image I refer is background for body tag… and is there the same for 8 Web Pages in this Site.

So I have to reduce below 0.5MB…?

The last I tested in the few browsers I have, they cached images pulled in from CSS files.

So the problem isn’t so much how many pages the same image is used, but more the first time hit.

For those with fast connection speeds a large image might not be a big problem.
But for those with slower connections it could be a show stopper for them and IMHO it’s a bit rude to impose it on them.

Of course a lot depends on your target audience. If you have an “image themed” site and the majority of visitors have faster connections, then you could probably get away with it to a larger extent under the assumption that visitors will expect there to be larger weight files.
.
But if you are wanting a broad world-wide range of visitors and the site is not an “image” site, you could be risking alienation of a lot of visitors, many who will not stay long and will not return to it.

I don’t think there is such a thing as a one-size-fits-all maximum file weight.
Personally I think as small as can be got without sacrificing quality too much is always a good idea.

5 Likes

Give the image appropriate compression for the image type to get the size down as far as you can before the quality gets too low.
You can also have smaller versions of the image and only show the largest to displays that would require it.
I use something like this query:-

body { background-image: url(../image/background-small.jpg); }

@media screen and (min-width: 1000px), 
 screen and (min-device-width: 500px) and (min-resolution: 2dppx) {
    body { background-image: url(../image/background-large.jpg); }
}
1 Like

excellent inputs from the community.
However, since its a background image, I understand that it not a very important thing.
So consider these two things

  1. Does it aid in conversion rate enhancement? Does it make you sell more? If the answer is NO, reduce the quality of the image to less than 500 kb. If the answer is yes, then may be try to reduce it to 1mb. Larger files will load and render in pieces on a slower connection and that is not a good user experience.
  2. Why do you have the same image background on all pages? Try using relevant images and see if they give better results. If not, the first time one of your pages open, the image is chached and the browser will most probably not ask for it again. So irrespective of the number of pages opened you get fast experience.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.