Reducing load time of background images

Rumpleteazer

New Member
I am working on a site for my wife's business, but I am quite new to web design. The site needs a number of tweaks, but the main issue for me at the moment is the header image - it takes way too long to load. I have done it as a background image with CSS, but for it to look right the image is a large file and this obviously slows down the page load time. I think I am going to change the header picture anyway, but you can find the site at www.fenlandtextilestudio.co.uk to give you an idea of what I am talking about.
 

OrangeDevDesign

New Member
Hey, your image was indeed kinda BIG (1.47 Mb)

I reduced it for you do 75.2 Kb, that should make things faster.

I did this with Photoshop. With Photoshop you can save images for the web. on 70% (Still good enough for the web).
 

Attachments

  • header3.jpg
    header3.jpg
    75.2 KB · Views: 179

Rumpleteazer

New Member
Thanks OrangeDevDesign for that! I don't have Photoshop - budget won't stretch to that at the moment. Just trying to get head around Gimp - there must be a way of reducing file size with that but haven't figured out how yet.
 

OrangeDevDesign

New Member
No problem, was glad to help out. And allso PixlePusher said it, you can download a trial.
Or you can reduce your images with an online tool, Google for it there are plenty out there.
 

d a v e

New Member
this is pretty good too
http://www.smushit.com/ysmush.it/

and don't forget to resize and optimise your gallery images

in GIMP:
keep a backup somewhere of your original photographs!

IMAGE > SCALE IMAGE
make sure the little chain links are together (i.e. not broken) put 260 into the width box and press return and you will see the height automatically update to 266 (at the moment you have 330px which results in a distorted image which i'm sure isn't what your wife wants ;)

then press the SCALE button then on the FILE menu
go across to FILTERS drop down and choose ENHANCE and UNSHARP MASK
something like RADIUS 3 (pixels) AMOUNT 0.7 and THRESHOLD 0 are good
- if it looks too sharp simply reduce the AMOUNT value

then file save as press the save button (assuming you have jpg as the file extension) and in the SAVE AS JPEG dialog (see screenhsot) check "show preview in image window" and pick play with the slider until the image looks too poor then go back to the right by about 10.

somewhere between 60-85 (depending on the picture) is good and the file-size should be around 20-40kb (check the value as seen in the screenshot window)
check the "advanced options" check the "progressive" button (so users can see the image loading rather than it just popping into place when it's finished)
uncheck "save exif data" (that's extra camera data you don't need for the web)
uncheck "save thumbnail" (also not needed for web images
uncheck "use quality settings from original image"
and then click the "save defaults" button at the bottom and finally SAVE

screenshot and example images (my example is a little too sharp - after all quilting should 'feel' soft )
gimp1.jpg

samplerquilt.jpg


if you're stuck i can resize the images for you but it would be better for you to learn so you can do them yourself. give us a shout if you need help in any way ;)

edit: i just noticed the quilt isn't quite straight - you could rotate to straighten it (using the original image)
 
Last edited:

Amenda

New Member
Your background picture is very heavy, that’s why it’s getting lots of time to load. What I suggest is replace it’s with light weight picture.
 

Rumpleteazer

New Member
I am going through the process of changing the resolution of all the pics on the site so I expect that once I have done this it will be sorted.
 

kintek

New Member
You can also use Microsoft Picture Office Manager to convert your photos or even re size them to lower the size of the file. I would also recommend that using a thumbnail can greatly reduces your sites loading time instead of posting the original Image size.
 
Top