Reducing load time of background images

Discussion in 'Web Design' started by Rumpleteazer, Oct 14, 2010.

to remove all ads.
  1. Rumpleteazer

    Rumpleteazer New Member

    Messages:
    11
    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.
     
  2. OrangeDevDesign

    OrangeDevDesign New Member

    Messages:
    4
    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).
     

    Attached Files:

  3. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Holy cow 1.5mb?! yeah way too large. That reduced size should make a huge difference.
     
  4. Rumpleteazer

    Rumpleteazer New Member

    Messages:
    11
    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.
     
  5. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    You can always get a trial of Photoshop, so at least you can use it free for 30-days.
     
  6. OrangeDevDesign

    OrangeDevDesign New Member

    Messages:
    4
    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.
     
  7. Rumpleteazer

    Rumpleteazer New Member

    Messages:
    11
    Think I have sorted this now - can save in a lower resolution in Gimp which cuts the file size considerably.
     
  8. d a v e

    d a v e New Member

    Messages:
    671
    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 )
    [​IMG]
    [​IMG]

    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: Oct 15, 2010
  9. bcee

    bcee New Member

    Messages:
    367
    Wow, 1.5 MB header image. Must be 1000% times faster with that image from OrangeDev.

    You have other rooms for improvement as well. The background image ( http://www.fenlandtextilestudio.co.uk/images/bodybackground.jpg ) is 146.73 KB (150,248 bytes). I cut the size down to around 50KB without much noticeable different, it's very faint anyway.
     

    Attached Files:

    • bg.jpg
      bg.jpg
      File size:
      49.9 KB
      Views:
      309
  10. Amenda

    Amenda New Member

    Messages:
    2
    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.
     
  11. d a v e

    d a v e New Member

    Messages:
    671
    what a ****ing genius. why didn't we think of that?
     
  12. Rumpleteazer

    Rumpleteazer New Member

    Messages:
    11
    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.
     
  13. d a v e

    d a v e New Member

    Messages:
    671
    no it won't. the resolution makes no difference to file size for screen
    http://www.scantips.com/no72dpi.html

    optimisation makes a difference in file size
     
  14. kintek

    kintek New Member

    Messages:
    2
    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.
     

Share This Page