AJAX loading of background image

Ryan Kent

Well-known member
My site has a beautiful background image which I would like to keep. The problem is it's size @1.5mb is unreasonably large and causes slow page loads. Someone suggested that I could load a solid background image, then after the site is done loading use Ajax to load the background image.

Does anyone know how to do this or have any experience in this area?
 
I removed the background so the site loads better. Right now I have a solid background.

The background image is below. The image quality of the elf girl is amazing. It is being reworked a bit but it looks incredible on the forums. The forums cover the center and you just see the 2 characters and a bit of the background.

background_main.webp
 
The file is 1.63mb. I am not clear on what conversion process the file undergoes when I upload it to this site. The actual image is 2772 x 1080. You are seeing a shrunk version. You can't begin to appreciate the detail on the image you are viewing.
 

Attachments

  • background_main.webp
    background_main.webp
    85 KB · Views: 9
The file is 1.63mb. I am not clear on what conversion process the file undergoes when I upload it to this site. The actual image is 2772 x 1080. You are seeing a shrunk version. You can't begin to appreciate the detail on the image you are viewing.
Link it here
 
Uploaded files are resized to fit the maximum physical dimensions (pixels) set in the ACP.
In doing so of course, the file size (KB) is reduced.

It's explained in the FAQ :)
 
My site has a beautiful background image which I would like to keep. The problem is it's size @1.5mb is unreasonably large and causes slow page loads. Someone suggested that I could load a solid background image, then after the site is done loading use Ajax to load the background image.

Does anyone know how to do this or have any experience in this area?

1.5MB is large but it still doesn't take more than a few seconds to download on a broadband connection after which it becomes cached in the browser for subsequent page loads.

I don't have AJAX for this. FWIW, here is some basic javascript to set the body background for use in the page_container_js_body template. It's not asynchronous though:

Code:
<script type="text/javascript">
	document.body.style.backgroundImage = "url(http://www.blah.com/image.jpg)";
</script>
 
1.5 MB is definitely huge though. Link me and I'll see if I can optimize it a little with no noticeable quality loss :p

...As Vodkaholic was probably planning to too. :p
 
Ok here is a noob question. How can I link attach or link a file in XF? or do I need to host the file?

What I did for now is replace the image on the site I am building http://www.TeraPVP.com. You are welcome to see it and save it from there. I have a friend working on the image. Right now part of the background is mirrored, and the elf girl needs a bit of cleanup on the edges. You can clearly see the type of background involved.
 
Here you go. Quality should not be noticeably worse, but it's only about a third of the file size ;)

http://i.imgur.com/iIWNs.jpg

Note: if you wanted it, I could cut off some of the left side to make the image have a less gigantic size (and hence also filesize). A width of 1920 is as much as you need, technically speaking :p
 
omg TY SO MUCH! Wow! I tried and had a friend try and we couldn't reduce the size significantly without really messing with the quality. Plz tell me...what's the secret? How did you do it?
 
Top Bottom