Best way to display images/ Keeping file size down

[Oak]

How should one display images whilst keeping file size down?

If I were to use a basic CSS slide show would this give a larger total file size than if the images were just sitting on a page?

I am using lightbox slide show and even though there are more and larger images on this page than that of a page where the images sit alone, the file size is less?

When I use an image for the web I set the file size to 72px, is the anything else I can do to keep best quality without being an Photo shop expert?

Cheers

[Ed]

You haven't been very clear Oak.

Links to these pages would be great. The file size of the 'image' remains the same, regardless of how or where it is displayed.

I'm assuming that you're after confusing your page file size with your image file size. It's possible that you are linking to the lightbox JavaScript externally meaning there is less code in your file.

When you mention 'px' or 'pixels' we are not talking about the file size. These are the dimensions, or how big the image will appear.

The file size is a different matter and is usually measured in 'kb' for images on the web. This basically determines how long it will take for the image to display or load on the screen and is completely different to the dimension of an imahe.

To have good quality images, you generally have to have over the 85 quality mark in Photoshop. This, of course will result in a larger file size than if you were to set it at the 20 quality mark.

Hope this helps and gives you a better understanding.

Ed.

[Oak]

Sorry about the unclear post.

Can I still hide this thread and replies from Search Engines, before I put links?

[Ed]

Since the upgrade, no, but this feature is in the process again.

You can break the site up like this though:
[www][dot][yoursite][dot][com][slash][yourdirectory][filename]

And so on.

Ed.

[Oak]

The option was there when I first posted this thread.

[www][dot][capoeiracanal][dot][co.uk]

[www][dot][capoeiracanal][dot][co.uk][slash][capoeira-school-images.php]

[Ed]

Sorry, but I don't see what the problem is now?!

I'm a bit confused.

Ed.

[Oak]

you asked for the links

[CloudedVision]

i think by 72px he meant 72 pixels per inch. that is what your supposed to do oak, browsers won't display anything above that. Here's a couple of other tips:

• Use GIFs and JPEGs correctly - GIFs are for things with text and limited colors, JPEgs are for pictures
• use seperate images if a mixture of image types would work better - a picture with a caption in the image is better off a JPEG for the picture and a GIF for the text.
• cut up images and piece them together with CSS if necessary
• use CSS for any large areas of whitespace - /img/capoeira-canal.jpg you can delete all the whitespace and use CSS instead. actually, it would probably be best to cut that up into multiple images...

Not sure if thats what you wanted, but.....

[MikeHopley]

...and don't forget that PNGs are better than GIFs.

[CloudedVision]

but require a javascript hack for IE 6.......

[Ed]

Originally Posted by CloudedVision

[...]use seperate images if a mixture of image types would work better - a picture with a caption in the image is better off a JPEG for the picture and a GIF for the text. [break in quote...] actually, it would probably be best to cut that up into multiple images...[continues...]

I wouldn't recommend breaking up images.

This really complicates things, and brings most of us (me anyway) back to the days when if we wanted a nice layout with Tables, images would have to be broken up.

When I changed over, this was one of the benefits of CSS that I heard of a lot. 'No need to break up images anymore' (etc, etc).

It can be difficult for beginners right through to intermediate to piece an image back together, especially if it is a large image and it has been broken into more than three pieces.

However, if you are really that desperate,it is always an option.

Ed.

[CloudedVision]

well, i figure with an image that big it'll be benificial to break it up. Or at least merge it with the logo, its senseless to have seperate images that cover the same area.

[Oak]

well, i figure with an image that big it'll be benificial to break it up. Or at least merge it with the logo, its senseless to have seperate images that cover the same area.

I am a bit late getting back.. but thanks for the replies and tips!

The Logo is an image replacement.. would it be better to merge it with the banner and turn that into an image replacement?

[MikeHopley]

Originally Posted by CloudedVision

but require a javascript hack for IE 6.......

Only alpha-transparent PNGs require hacks.

Web designers seem to think that "PNG = good for transparency", but actually PNG is a superior image format to GIF even without the transparency.