CODEWITHSUNDEEP
javascripthtmlimagecss
Jakob Nielsen
Jakob Nielsen

Reputation: 5198

Making my background images load faster

http://www.leona-anderson.com

body {
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed;
background-size:100% auto;
}

I have a different Background images on each site an since they are 1080p they take a bit to load.

I use wordpress 4.0.5 with minamaze theme.

I have found out that my use a preload javascript function, but in my case on the frontpage I do not have information about the background image of the other sites so I am hoping someone could provide me with a different solution.

My images are .pngs with round about 1mb size, maybe I also could try to compress them some more?

Thanks in advance

Upvotes: 11

Views: 34989

Answers (6)

kantuni
kantuni

Reputation: 961

Prefer using WebP nowadays.

I took the optimized version from the accepted answer and converted it to WebP with lossless compression.

The new size is 40KB (-55%) with no visual difference.
Here is the new image.

Upvotes: 0

George Kormaris
George Kormaris

Reputation: 795

You shouldn't use .png for such an image. As a general rule, photographs should be .jpg and graphics (eg. logos) should be indexed .png

I reduced the file size by ~93% down to 89KB from 1.3MB and the visual difference is barely noticeable.

Here's the optimized image: Optimized

And here's yours: Original

Upvotes: 20

PraBhu
PraBhu

Reputation: 196

Compress your image using https://tinyjpg.com or https://tinypng.com. Always make sure your image is as losslessly compressed as possible, it will create a huge difference in loading time.

Upvotes: 1

Fahad Hasan
Fahad Hasan

Reputation: 10506

You can cut down the time which your website takes while loading by a huge margin if you use CSS3 background-gradients instead of the large background-images. Talking about your homepage background-image for instance, you can create a background=gradient like this and use the image of the lady as the background-image and position it to the right:

#content {
  display: block;
  height: 1500px;
}
body {
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -webkit-linear-gradient(left, #ba53a0, #fff);
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -o-linear-gradient(right, #ba53a0, #fff);
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -moz-linear-gradient(right, #ba53a0, #fff);
  background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, linear-gradient(to right, #ba53a0, #fff);
}
<body>
  <div id="content"></div>
</body>

Upvotes: 7

Matthias Seifert
Matthias Seifert

Reputation: 2073

Since you only use a gradient and the woman, you could realize the Color gradient with css3 and only load the woman as an image:

CSS:

body {
  background: -webkit-linear-gradient(left, #B200FF , white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #B200FF, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, #B200FF, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, #B200FF , white); /* Standard syntax */
}

Fiddle: http://jsfiddle.net/n4anrzk8/1/

Or you try to use https://tinypng.com/ to get smaller png files, if it has to be an image.

Another, pretty bad method, would be loading ALL images with width 0 at the first page. They are not visible, but the browser will save them in the Cache (if the visitor using the Cache of his browser). I don't recommend this method, it's just for completeness.

Upvotes: 2

Memophysic
Memophysic

Reputation: 157

I think the way to go is compress to JPEG files. You can choose the degree of compression in most software (I use GIMP). 1 Mb is by all practical means way too big for a background image.

Upvotes: 2

Related Questions