1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Load images faster?

Discussion in 'White Hat SEO' started by Mp3Mage, Dec 2, 2008.

  1. Mp3Mage

    Mp3Mage BANNED BANNED

    Joined:
    Sep 15, 2008
    Messages:
    411
    Likes Received:
    509
    Hey guys, I was just wondering. What tools/methods do you guys use to load images on a website faster.

    Say if you have a nice website, but it has a ton of images, and you need them to load faster. How would you go about decreasing the size of the image without diluting the image.

    Graphics pro anyone?

    Thanks

    :usa:
     
  2. *zap*

    *zap* Regular Member

    Joined:
    Apr 7, 2008
    Messages:
    349
    Likes Received:
    98
    Occupation:
    none
    Location:
    Uk
    Could give this a try in your htaccess

    Adjust it to your needs


    Code:
    Code:
    # Caching Rules to help ease server load
    #
    # Cache images and Flash for 3 Months
    <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$">
        Header set Cache-Control "max-age=2419200"
    </FilesMatch>
    # Cache Javascript, CSS, PDF and Text for 1 Week
    <FilesMatch ".(js|css|pdf|txt)$">
        Header set Cache-Control "max-age=604800"
    </FilesMatch>
    # Cache HTML for 10 Minutes
    <FilesMatch ".(html|htm)$">
        Header set Cache-Control "max-age=600"
    </FilesMatch>
    # Don't cache Perl, PHP or CGI
    <FilesMatch ".(pl|php|cgi|spl)$">
        Header unset Cache-Control
        Header unset Expires
        Header unset Last-Modified
        FileETag None
        Header unset Pragma
    </FilesMatch>
     
  3. Mp3Mage

    Mp3Mage BANNED BANNED

    Joined:
    Sep 15, 2008
    Messages:
    411
    Likes Received:
    509
    Could you elaborate on this a little more? So this just sets the cache age so that the images can load faster?

    I'm completely lost lol sorry.

    :usa:
     
  4. lewi

    lewi Jr. VIP Jr. VIP Premium Member

    Joined:
    Aug 5, 2008
    Messages:
    2,309
    Likes Received:
    818
    urrrm when you save the images using an editor you can save them for the web... and decresease their file size that way....

    also change the quality of the image so low medium or high... and also the file type as png is very big and jpeg and gif are alot smaller...

    finnally join some images up or split others up if they are very big....
     
  5. *zap*

    *zap* Regular Member

    Joined:
    Apr 7, 2008
    Messages:
    349
    Likes Received:
    98
    Occupation:
    none
    Location:
    Uk
    If your host let you do it all that happening is the image files ect are being stored in the server cache

    If you use this when you up date your server files you will not see them untill the server cache is updated

    And we are working in seconds here
     
  6. Mp3Mage

    Mp3Mage BANNED BANNED

    Joined:
    Sep 15, 2008
    Messages:
    411
    Likes Received:
    509
    Ahh ok that sounds good. Thing is, I want my customers to view the site faster as well. So if they just visit the site for the first time, and it loads like a mofo.

    Lewi, by doing that I usually find myself with crappy choppy images lol.

    Thanks for support guys!

    :usa:
     
  7. *zap*

    *zap* Regular Member

    Joined:
    Apr 7, 2008
    Messages:
    349
    Likes Received:
    98
    Occupation:
    none
    Location:
    Uk

    If the files are in the sever cache then where is the limitations?
    Internet connection there pc
    If you find a way around that you will be the next billionaire

    PS don't forget me then
     
    • Thanks Thanks x 1
  8. Bacanze

    Bacanze Junior Member

    Joined:
    Nov 12, 2008
    Messages:
    150
    Likes Received:
    49
    Occupation:
    Uni student
    Location:
    UK
    Use an application to create mass thumbnails of your images if its appropriate, I saw a huge bandwidth decrease and much faster page speeds after doing this.
     
  9. ipopbb

    ipopbb Power Member

    Joined:
    Feb 24, 2008
    Messages:
    626
    Likes Received:
    844
    Occupation:
    SEO & Innovative Programming
    Location:
    Seattle
    Home Page:
    If you are using photoshop then save a jpeg and uncheck "store the color profile" and slide the compression level to a quality that is acceptable. If it is something like a product photo delete the background around the item and fill with a solid color. Use as few colors as possible.

    Use javascript to preload the images to give the illusion of them all loading at the same time. Provide the image width and height to eliminate dynamic re-rendering as the images load.

    Check your access logs make sure people aren't leaching your bandwidth displaying your images on other sites.

    Create actual thumbnails... don't show large images with smaller width & height values in the tags.

    Definitely enable caching in your web server.
     
  10. WickednDivine

    WickednDivine Executive VIP Premium Member

    Joined:
    Jul 29, 2008
    Messages:
    468
    Likes Received:
    344
    could also try preloading the images. It technically wont make it faster, but it will make your page load smoother.

    Javascript:
    Code:
    <script type="text/javascript">
    image1 = new Image();
    image1.src = "image1.gif";
    
    image2 = new Image();
    image2.src = "image2.gif";
    </script>
    
     
  11. uma4guma

    uma4guma Newbie Premium Member

    Joined:
    Oct 5, 2008
    Messages:
    48
    Likes Received:
    213
    Occupation:
    Internet Marketing
    Location:
    Honolulu, Hawaii
    Typically I use Photoshop's save for web feature, then save images with minimal colors as .gif files. More complex images could be saved as jpg files. When saving jpg files, using a little blur can help reduce the file size.
     
  12. macmastermike

    macmastermike Junior Member

    Joined:
    Apr 2, 2008
    Messages:
    116
    Likes Received:
    33
    Location:
    Grand Duchy of Bavaria
    i spent some time optimizing loading times for websites for my clients. what works best is:

    1) use photoshop to export the images for web (file -> export for web). play with the settings, also try gif/jpg. if you have only a few colors in the image gif might be better. for images use jpg and move the slider until the quality is fine and the filesize decreased

    2) try to reduce the amount of images. like when you use menus with mouseover you can put all the states into one image file and then change the image position with css (eg. a, a:visited {background-position: 0% 0px} / a:hover { background-position:0% -40px; } )

    3) use different subdomains for the images. like www1.yourdomain.com/img1.jpg, www2.yourdomain.com/img2.jpg. browsers load images faster when there are different domains as the default settings only support downloading a few items at the same. theres a patch for ie and ff. i think it's called pipelining and maxconnections for ff, ie you need to change registry settings

    4) use transfer compression. i insert a little php script into all my css/js/html files so the server compresses all the text and sends it zip-compressed to the browser. this also increases the pageload dramatically. i share my code with you:

    Code:
    <?php
    function output($output, $gzip=1) {
      $_gziplevel = 6;
      $_usercache = 1;
    
      if($gzip) {
        $compress = 0;
        if(strpos(' '.$_SERVER['HTTP_ACCEPT_ENCODING'], 'x-gzip') !== false) {
          @header('Content-Encoding: x-gzip');
          $compress = 1;
        } elseif(strpos(' '.$_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') !== false) {
          @header('Content-Encoding: gzip');
          $compress = 1;
        }
        if($compress == 1) $output = "x1fx8bx08x00x00x00x00x00".substr(gzcompress($output, $_gziplevel), 0, -4).pack('V', strlen($output));
      }
      @header('Content-length: '.strlen($output));
      if(!$_usercache) {
        @header('Cache-Control: pre-check=0, post-check=0, max-age=0');
        @header('Pragma: no-cache');
      }
    
      echo $output;
      flush();
    }
    
    ob_start();
    ?>
    
    website goes here...
    
    <?php
    $content = ob_get_contents();
    ob_end_clean();
    output($content);
    ?>
    
    5) if you have access to the apache configuration you can also tweak some settings there to get another speed increase. but first follow the steps above.

    after applying step 1-4 your site will load muuuuch faster than before. in my project i had loading time increases from 200-500% depending on the type of content and the image/content ratio
     
    • Thanks Thanks x 2
  13. mightybh

    mightybh Jr. VIP Jr. VIP Premium Member

    Joined:
    Feb 27, 2008
    Messages:
    1,029
    Likes Received:
    1,714
    Occupation:
    CEO
    Location:
    UK
    Faster loading website will also help you in terms of SEO.
     
    • Thanks Thanks x 1
  14. Mp3Mage

    Mp3Mage BANNED BANNED

    Joined:
    Sep 15, 2008
    Messages:
    411
    Likes Received:
    509
    Yeah, it's even better when the customer will see that your page loads quick.

    I was thinking the whole time. I probably lose customers when they load the page and it takes over 10 seconds to fully load for them. They might think it's a scam site or something.

    In reality, it's just those stupid images that make the little differences of keeping a customer on your site.

    BTW thanks for the code macmastermike. I will try this later today.