12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Load Web Images Faster!

by Steve Wells
10 replies
  • WEB DESIGN
    • |
I am looking for sometime of script or code or suggestions to have the images load faster on my web pages.

I know that reduces image file size works BUT that also reduces web page grpahics quality.

Any suggestions with some code or scripting that will work?

If I could just get the header to load first that would be probably the best ideal.
#faster #images #load #web
  • Profile picture of the author KirkMcD
    Have you tried breaking the header up into smaller pieces? A left, middle and right piece for example.
    {{ DiscussionBoard.errors[1511086].message }}
  • Profile picture of the author Richard Whyte
    Hi

    Images are important to any site in todays marking.... But knowing the best way to optimize them for speed is also important. How were the images made? What format are they in?

    When you talk about reducing size = reducing quality, that is true, but you can shave off some size and not see any difference with normal eyesight....

    I work with graphics and web design all day everyday. There are a lot of little tricks you can do to make images smaller. I would want to see your site or imagers before I could make any real comments on how they could be reduced...

    Right now it is kind of like you saying to someone can you fix my car.... But not really saying what type of car it is....

    Please include a link to your site so we can see what the issue is and then we can maybe offer some assistance...

    have a Great Day!
    {{ DiscussionBoard.errors[1511188].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by Richard Whyte View Post

      Hi

      Images are important to any site in todays marking.... But knowing the best way to optimize them for speed is also important. How were the images made? What format are they in?

      When you talk about reducing size = reducing quality, that is true, but you can shave off some size and not see any difference with normal eyesight....

      I work with graphics and web design all day everyday. There are a lot of little tricks you can do to make images smaller. I would want to see your site or imagers before I could make any real comments on how they could be reduced...

      Right now it is kind of like you saying to someone can you fix my car.... But not really saying what type of car it is....

      Please include a link to your site so we can see what the issue is and then we can maybe offer some assistance...

      have a Great Day!
      The links are in my signiture below...the second two links are the specific ones I am reffering to.

      They are jpg. images. Made in adobe photoshop. I looked into optimizing them but I lose quality even at 90%, since I am a graphics designer I am into image quality, so to lose image quality is not a choice, but if I can do something with javascript or html coding or css coding that will allow for the header to load first before anything else that would be optimal, or anyother suggestions.

      Someone at somepoint mentioned that injection_graph_func.js would help images load, but I have no clue about this at all, or even if they are telling the truth?

      P.S. I am not an expert at web development, more into simple minisite designs and things that can be done easily, as for programming in php or other complicated languages, I am not there YET !

      Steve
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[1511745].message }}
  • Profile picture of the author Aronya
    Personally, I don't see any problems with your graphics. If it takes too long for a 60k file to display, then there's some other problem in the mix.

    As far as making sure that the header loads first, I'm not aware of anything that will do that.

    KirkMcD's suggestion is probably as good an idea as you're likely to get. If you come up with something, though, I'm sure we'd all like to know about it.
    {{ DiscussionBoard.errors[1511203].message }}
  • Profile picture of the author Technista
    I found that your images loaded quickly. However, they will load and render even faster if you change them from img tags to background images in a CSS selector.

    T
    Signature
    Atlanta Website Design
    {{ DiscussionBoard.errors[1512313].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by Technista View Post

      I found that your images loaded quickly. However, they will load and render even faster if you change them from img tags to background images in a CSS selector.

      T
      Got any sample css code that I could implement?

      I am not to technical on css yet........
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[1512589].message }}
      • Profile picture of the author customertools
        if they are jpg, your average person will not notice a difference between 75% quality and 90% quality. Do you have an example image so I could look at to see if there is anything that could be done that would not be noticeable.

        -Brad
        {{ DiscussionBoard.errors[1520633].message }}
        • Profile picture of the author Steve Wells
          Originally Posted by customertools View Post

          if they are jpg, your average person will not notice a difference between 75% quality and 90% quality. Do you have an example image so I could look at to see if there is anything that could be done that would not be noticeable.

          -Brad
          The following images are 100%, 90%, 80%, 70% in jpg format. I honestly think that there has to be something that can be done with css or a script to load the header or images faster, I just haven't found the person with the knowledge to do that yet.

          I do appreciate all the help and suggestions I am getting though.

          The first two images show a diff, not much but more than I am willing to allow. So I will have to go with something different eventually. Someone mentioned PNG images, but as far as I know they are larger files than jpg. Gif's are not suitable for large images, PNG's seem to load slower.

          So I will have to do with what I have so far. The links are in my signature to the web sites in question.



          Signature
          Need Custom Graphics Work? - Message Me For A Design Quote!
          {{ DiscussionBoard.errors[1520749].message }}
          • Profile picture of the author customertools
            I'll look and see what I can do for figuring out how to compress the image without loosing quality. I use fireworks to compress images, but I was able to compress top set of images from 109.44k to 65.53k, using JPG (Better Quality setting). Without loosing to much quality. It does make the image a little darker.

            You can/should check to see if your server has compression enabled. Just ask your admin if you've got http compression on. Usually its setup not to try to compress images, but it will compress everything else and will speed up general page load times.

            The only other option I can think of is pre-loading images using JavaScript and having a web 2.0 style working image show while the website is loading. Here's a little how to guide
            Code:
            jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html
            You can design a pre-load image at
            Code:
            ajaxload.info/
            Just an example on file size and speeds:
            65K will take about 10 seconds to download on a 56K modem in perfect conditions. And that's not including anything else on the page.

            -Brad
            {{ DiscussionBoard.errors[1522183].message }}
  • Profile picture of the author customertools
    Oh, one more thing that might speed up loading, is valid XHTML.
    Code:
    validator.w3.org/check
    -Brad
    {{ DiscussionBoard.errors[1522196].message }}

Trending Topics