How to make fast loading images?

I intend to publish about 20 images (.jpg) in one Wordpress blog post. I'm scared these images won't load on many slow computers, so, how can I "optimaze" them? Images are quite detailed, so I can't just shrink them.

 

Its really a problem whenever issues come about publishing high resolution pictures and compressing them, javascript preloaders for images can help but if the image size are good then it will take time to load anyhow

 

The time to load an image depends on two factors
- File size
- Internet speed

So, because you can't increase the user's internet speed, you must reduce the file size of your images.
- By applying a compression factor to your images with an image processor program. This will reduce the file sizes, but quality too.
- Using thumbnails. When an user clicks on a thumbnail they will get another window with the full size picture.

 

Yes, I guess thumbnails will do. Does anyone know the code for "click here to see a large image"?

 

On this page you can find many different Image Galleries and Viewers
Are free, and come with source code ready to use.

 

I've checked the scripts quickly. I haven't found one, which would enlarge image on mouse hover. Is it possible to set up this hover function in HTML? Anyway, the click should do the job.

 

If it were me, I would definately go with thumbs, and a picture gallery off the main post..

 

try out a JS script called lightbox. works nicely.

 

This JS lightbox can be embeded into HTML then? Some good link?

 

Here is that link: Lightbox JS

 

If you have photoshop cs then you can jump over to image ready and even make the high res images lower so that you do not have any trouble with any of the images loading.

These can also be resized for thumbnails is you end up doing it manually.

If you need more info let me know.

 

You don't even need imageready, in photoshop just "Save for web" and fool around with the settings, file formats, quality, etc ... until you get the optimal file size.

 

also save images as different file types to compress e.g gif but beware of gif as the quality can go bad but usually ok and very small files

 

The advantage with imageready (which is inclided with photoshop since v6, I think!) is that you have live previews and can really tweak your images to get the smallest possible file size.

Save for we is great if you know what you need or have time to save in lots of ways and keep reopening and checking to find the best one.

 

Photoshop CS3

1. file > save for web
2. select .gif
3. quality 60-80 (notice file size in lower left)
4. save

 

If you want faster loading time, just either save as .gif or save as lower quality jpg..