Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Help with graphics on my website

  1. #1
    Join Date
    Feb 2007
    Location
    Central Texas
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with graphics on my website

    Hello all, I'm new to this forum and new to website design. My website is www.txslipi.com

    I'm wondering if someone can help with my graphics. They seem to load very slowly. The largest graphics file (all are gif) is 47KB. All gif files have been compressed and were saved with a resolution of 96.

    Do I need to attach my default or index file so that you can help?

    Please help!
    Your TX SLI PI

  2. #2
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default Trouble

    Hi,

    Firstly, regarding your graphics, They seem only slightly slow to me. this may be your server (or my connection). You could try preloading the images, but....

    Secondly, your page is wriiten in VML (Vector Markup Language) a Microsoft only style of web page, which means your website cannot be viewed in any other browser and I don't know if preloading can be done on your pages.


  3. #3
    Join Date
    Feb 2007
    Location
    Central Texas
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Bob90,

    Sorry, but as a "newbie", how do I "preload"? I can take care of the VML issue. It is a simple click on my template.

    And, thanks for your reply!

  4. #4
    Join Date
    Feb 2007
    Location
    Central Texas
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    P.S. - Bob90

    My provider is OMNIS...any comments?

    Regards,
    TX SLI PI

  5. #5
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default Hi

    To preload an image first create a new (empty) image object
    Code:
    image1 = new Image();
    Then give that image a source file
    Code:
    image1.src = "image1.gif";
    That image will the be loaded int the browsers memory.

    To contiue with more images use different names
    Code:
    image2 = new Image();
    image2.src = "image2.gif";
    This is just a very simple image preloader, that requires you type out each image individually, but seeing as you have less than 10 images to preload it will be fine.

    As for your provider, I know nothing. Sorry, but I'm new.



  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Well, it does work -- it just looks rubbish It's also completely invalid.

    A simple preloading function:
    Code:
    function preloadImages() {
      for(var i = 0; i < arguments.length; ++i)
        (preloadImages.store[preloadImages.store.length] = new Image()).src = arguments[i];
    }
    preloadImages.store = [];
    
    preloadImages("image1.jpg", "image2.png", "image3.gif" /*, ... */);
    Bob90: The rest of Things of Beauty is interesting as well.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,156
    Thanks
    262
    Thanked 690 Times in 678 Posts

    Default

    Preloading won't speed it up... it'll just preload in the same time then show them. Not sure what the advantage is there.

    If you have images... yes, it'll take a little longer. But that's all you can do. If you save the .gifs with fewer colors or more compression, they'd be smaller, but also lower quality, which might or might not be noticable. Also, you could try .jpg and .png to see if either is better.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  8. #8
    Join Date
    Mar 2006
    Location
    Nashville, TN
    Posts
    600
    Thanks
    5
    Thanked 4 Times in 4 Posts

  9. #9
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    No Office there.
    But your <body> tag is a little off. You shouldn't have two, and since when do we put CSS right in the middle of a tag (not inside a style attribute, at least)?
    You also don't have a DOCTYPE.
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

  10. #10
    Join Date
    Apr 2007
    Location
    Down the road from the store
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Your largest image is 47KB?! That's insane! As a general rule of thumb, you should keep all of the graphics on each page of your site to a COMBINED MAXIMUM of 60KB (i.e. the index page can be 60KB, and each sub page can also be its own 60KB worth of images). This is with the exception of photo albums.

    I optimize my images using GIF format for images with text or lines, as JPEGs will put compression fractals around them. When using GIF, you can usually customize your color pallette - what I do is start with the default 256 colors, and try taking the pallette down to 200 colors. If it still looks good at 200 colors, I'll drop it to 150, if it's still good, I'll drop it again to 100. If it looks bad at 100, I'll up it to 120. If it's good at 120 colors, I'll try upping the loss level on it a bit. It's a process of trial and error until you find just the right number of colors, and just the right loss setting to minimize the filesize while keeping the quality nearly perfect. In many cases, I've been able to cut vertor images down to a color pallette of 5 or 6 colors, with absolutely no loss of quality whatsoever - but I've managed to shave 30KB off the image!

    Don't ever save a bitmap (photograph), or heavily shaded vector as a GIF though, it usually won't come out very good, as most of them require more than 256 colors. If it's text over a bitmap or shaded vector, save it as a JPEG without the text on it, set it as a DIV background image, and hard code the text on top of it. If it needs a special font, save the text as a separate image (GIF... many times text images can be a 3-4 color pallette) with a transparent background, set the JPEG as your DIV BG, and code your transparent text image on top of it.

    My aplologies if this sounds confusing, but I'm trying to explain the best I can. Image optimization can be somewhat of an advanced topic, especially if you're talking about using special techniques which may require at least intermediate CSS knowledge to properly implement in the actual website. The best way to learn is to experiment on your own for a while until you are comfortable. Hopefully this is at least enough info to get you started, and headed in the right direction to finding the info you need.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •