faster load time: background image or browser property?

Question

I have a messy background on my site and, to make it a little easier to read I use this background property:

p : background-color {rgba(250, 250, 250, 0.7)}

With the goal of site load time in mind, would it be better to use a background image with opacity?

You can see the issue here: http://tinyurl.com/7ywoqpf

Note I am already working on reducing the background PNG size, this question is about the paragraph background only

Should I keep current settings or use a background image?

Answer 1

Ok this is what the page load waterfall looks like - http://www.webpagetest.org/result/120505_MG_47R9V/1/details/

You already know you need to reduce the images but there's a few other things you can do..

Remove duplicate ga.js Use jquery.min.js instead of jquery.js Turn on gzip for html, css and js

If you're looking for an image compressor jpegmini.com does a fine job with jpegs, and there are plent of options for PNGs

Answer 2

Images have to be downloaded from the server then loaded to browser, Where as using CSS properties like rgba to create the effect, It relies on the browser alone. So without a doubt, rgba is better than images.

Answer 3

Images, no matter how well compressed, always have to be downloaded. There will always be some overhead to that thanks to ping. What's more, because many browsers insist on never making two simultaneous requests per hostname (behaviour defined in the HTTP spec), any images will always defer the loading of other resources.

I don't know about the implementation of RGBA, but I would be very surprised if it meant downloading another resource was faster.