Load images faster?

Mp3Mage

BANNED
Joined
Sep 15, 2008
Messages
410
Reaction score
520
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:
 
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>
 
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:
 
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....
 
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
 
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:
 
Ahh ok that sounds good. Thing is, I want my customers to view the site faster as well


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
 
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.
 
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.
 
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>
 
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.
 
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
 
Faster loading website will also help you in terms of SEO.

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.
 
Back
Top