Menu
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
507
Background images are usually used in places that have some text or content on top. It can be a slider, a featured image of the blog post (like below) or a hero image. Chances are they're loading slow and can affect user experience due to the increase in Largest Contentful Paint (LCP) if they're in the above fold.
While <img> tags are the most common way of using images on web pages, images can also be invoked via the CSS background-image property (and other properties). Browser-level lazy-loading does not apply to CSS background images, so you need to consider other methods if you have background images to lazy-load.
You should always use lazy loading for the images below the fold. As we explained, lazy loading will reduce the real and perceived loading time. User experience will benefit from it — and you users will thank you.
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
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
