[DELETED]

Convert them to gif format. You will see great results.

Try .png.. you'll notice a great difference.
If you're using photoshop for your graphics, make sure you adjust your output quality.

Cheers
aLee

Reduce the file size of your images
as small as possible but pay attention to the quality of the image itself

Include the width and height attributes for all the images.

That way browsers will know how much space to allow for the image and carry on rendering the rest of the page rather than waitng for each image to load.

To the OP: it depends on a lot of factors:
- Do you absolutely need images where you have them presently e.g. for titles and navigation / menus, text is generally better for accessibility.
- If you're loading images, compress them in your editing software. Don't compress / lower the quality too much, though, otherwise they won't look as clear.
- You mention when images on the home page change - if you've got some sort of dynamic script that's loading in images on an interval, it's worth looking at that script to see if it can be more efficient, as well as again checking your images are optimised for the web.

Along with the advice above, you should be well on your way to solving the issue.

You're probably already doing this but are you setting the width and height attributes on the image tags?

Hey,

The first step is reducing the file size of your images... You can do this in photoshop. Instead of just 'Saving As..', you want to 'Save For Web & Devices' and from there you should be able to find a decent balance between image quality and file size.

For images that use a lot of gradients and shadow effects you should save them as .jpg. For images with mainly solid colours, I'd suggest .gif or .png

Hope this helps.

[DELETED]

[DELETED]

If ou need the graphic to be 150x150, make the actual images 150x150, and dont take a 250x250 image and force it to be 150x150. Making the images the actual size you want them to be displayed will significantly cut away excess data loading. Resolution can also be lowered.

If you want to increase site loading speed, there are some suggestions:

(1) --> Use CSS templates.

(2) --> Avoid using heavy background graphics or textures.

(3) --> Use "Free Online Image Optimizer" to optimize image size.

(4) --> Free check your website loading speed details on "Webpage Analyzer"

(5) --> Avoid using widgets with many images or which you really don't need.

(6) --> Don't use flags for translation, you can use "Google Translate Tool" instead.

(7) --> Reduce Java Scripts in your template and maximize the use of CSS.

(8) --> Make sure that all images have height and width tags.

(9) --> Consider hosting your images on an external site like flickr that has huge servers and can handle the load.

(10) --> Do not host videos on your server. Upload them to YouTube, Google Video, or any other video sharing site and let them handle the server load.

(11) --> Compress your Javascript, using a tool or by removing formatting (and potentially by shortening function and variable names). This can reduce file size by 60%. Add gzip compression to that as well and you're looking at a serious size reduction.

(12) --> Compress HTML and CSS by removing HTML formatting, white space (where you divide code among separate lines for easier readability), trimming class names, omitting unambiguous quotes around attributes, etc.

(13) --> Use external scripts - Instead of placing tons of code in your header.php file, use external scripts. This allows the browser to cache the script so it won't have to read it for every other page.

(14) --> Allow progressive rendering: Load CSS files at the top of the page, from within the head section; load JavaScript files at the bottom of the HTML.
Can you find anymore ways?

I got one more... Make sure your PHP is nice and efficient! Especially if you are running multiple mySQL queries - combine those into one wherever possible and keep loops as short and efficient as possible.

Robert addresses issues as the page loads into the browser - slow PHP affects your page as it is assembled at the server - just fyi.

If you have a heavy traffic load - consider creating cache pages on the server, such that your PHP is then only really working every few page loads, instead of recreating the page for each new visitor.

One more still.

If you have your hands on a server (as root), the big sites recommend serving static content (images, CSS files, javascript) with another process.

The common solution is to use a small and efficient web server like lighttpd instead of Apache. Don't compile in PHP to lighttpd because it isn't needed for stati files. You keep the Apache with PHP around to server your dynamic content. This way your machine will serve images and html and do processing of PHP files in parallel and a bit more efficiently.

I realize this may be a bit overkill for a small site, but if you have optimized your image file sizes and didn't get relief, this would be the next step to consider. There's no point having a 40M Apache process (80M with shared) serving a 50K image. Likewise there is no point having it serve 20 images each to 10 people per second. A small web server process serving static content speeds up wites with lots of images.