CODEWITHSUNDEEP
webpagespeed
Mal
Mal

Reputation: 525

Loading website Images faster

Is it possible to improve Website background image to load faster that it is. My website's background image size is 1258X441 and memory size is 656KB. Its taking too long to load complete background image while accessing my website. Is there anyway than Compressing (As the image is already compressed) to improve its loading speed.

Upvotes: 1

Views: 4054

Answers (3)

Rok Kralj
Rok Kralj

Reputation: 48715

Choose: (2. is my main solution, and 3.)

  1. Compress image even more, because image is background, it doesn't matter that much. Users do not focus at background as much as they do at content.
  2. Since background is partially covered by content, you can paint black (or any other solid color) the part of background that is not visible (is behind content). This will make the image compress more nicely, sparig some place.
  3. Save image in JPG progresive compression. That will make background display in gradually more quality as the image loads.
  4. Get rid of background image. (obvious) :)
  5. Today's web speeds are big, don't change anything.

ALSO: If your PNG image has any repeating parts, you can then slice your image in three parts and spare a lot of space.

Upvotes: 3

Lijo
Lijo

Reputation: 9

Load your image in Database and call them , when ever you required. The benefit of this is ? Database is loading once you initiate it and can able to retrieve the information when ever required. it is fast compare to any other technique

Upvotes: -2

Shahbaz
Shahbaz

Reputation: 47493

The speed of loading the background image is determined by (latency ignored) bandwidth of your connection and the size of the image. So if you have let's say 128 KB/s and an image of size 4096 KB, you at least need

4096/128 = 32s

for it to load.

Since you can't change the bandwidth, the only thing you can do is change the size of the picture. That is, if you can't compress it more, lower the resolution.

If you don't want to lose precision, you could put different layers of background in your website with different qualities, the better ones over the bad ones. Then when your page is loading, the low quality images load fast and you get some background. Then over time the better quality images load and the background is improved.

Upvotes: 1

Related Questions