Making my background images load faster

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


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.


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>

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.

Tags:

Javascript

Html

Css

Image

Recent Posts