TUTORIAL: Image formats Family History Local History

Welcome, Guest. Please login or register for free.
Did you miss your activation email?
Thursday 21 August 08 17:26 BST (UK)

News: Please tell others about RootsChat - the bigger we make it the better it will become! Let your family history and local history society group know.

RootsChat.Com

General

The Common Room

Free RootsChat Webspace (Moderator: trystan)

TUTORIAL: Image formats

« previous next »

Pages: [1]

Author

Topic: TUTORIAL: Image formats (Read 244 times)

Zeb
RootsChat Senior

Offline

Posts: 431

TUTORIAL: Image formats
« on: Friday 14 October 05 18:43 BST (UK) »

You've got some pictures that you'd like to add to your website but there are a load of picture formats out there so which one do you use? The old rule was that each page shouldn't be more than around 50KB including text and images because those with dial-up internet don't really want to wait too long while a page loads but with broadband being more commonplace nowadays this rule is slowly becoming obsolete.

JPG/JPEG
This is best used for photographs as there isn't a limit on the number of colors a JPEG can contain. The big bonus with this format is that you can choose what quality setting to save the picture out as. The higher the quality setting the larger the file will be and the lower the quality setting the small the fle size but the image will be more like to look distorted and broken.

This is a lossy format which means that the lower the quality setting more of the image will be discarded. The challenge is to choose a quality setting that gives you the best quality over file size and the only real way is to save the picture, load it back up and resave it if necessary. The places you'll notice quality loss is around parts of the image where there is high contrast like for example, black text on a white background. The human eye can only distinguish so many colors - computers can display more. Shades close to each other are discarded and colors replaced with dithering (aka hatching). The lower the quality the more this takes place.

When I first started playing around with images I didn't know much about file formats and saved everything out at the highest setting which I later found out was a bad idea - the pages took a long time to load, visitors got bored waiting and went elsewhere.

GIF
Best used for images with levels of high detail (like maps, cartoons, titles) although these are limited to having only 255 colors (256 with transparency) which must be indexed. These have an advantage over JPEG in that they can be transparent - when viewing on a web page you can see the background through parts of the image.

Because the colors need to be indexed this can cause problems between Windows and Mac users. Windows machines will view GIFs that aren't indexed as normal but when viewed on a Mac they can display distorted. Before I knew about indexing most of my GIFs refused to display on my mother's Mac but on my PC they were fine and it was a long time before I found out why.

PNG
This has the best features of JPEG and GIF (unlimited colors with transparency) but not all browsers can display these properly as some colors have the tendency to look a bit "off" which is why I never use this format. This is a lossless format as the compression is far superior over JPEG.

Conclusion
Some are creating their sites with the idea of burning them onto CD, passing them to the family so they can view them from there and having them online so they can get advice and comments as they go - that's what I'm doing. Reading from a CD will almost always be faster than accessing from the internet. The disadvantage is that any special scripting (PHP, ASP, Perl/CGI etc.) won't work which will render guestbooks & email forms useless.

You could always make two copies of your site - one for the net and one for the family CD but this will more than likely be more hassle than its worth.

Its always worth remembering that there are more browsers out there than the one you're using. Some of the more common ones are Internet Explorer (aka IE), Mozilla Firefox, Opera, Netscape Navigator and Safari. Each browser has its own quirks. Its worth pointing out here that IE is a lot more relaxed about what it displays. A minor error may be ignored by IE whereas Firefox (which strictly follows the W3C web standards) would be more likely to produce an error.

If your site contains lots of photographs, like a photo gallery, you could consider using thumbnails linked to the full image. A thumbnail is a smaller copy of the original picture that can be clicked to open the larger picture. Because thumbnails are much smaller than their originals galleries load that much quicker. This allows the user to choose which images they want to spend time on waiting to display rather than forcing them to wait for all of them.


	Logged

Derby: WOODCOCK (Donnington)
Devon: HARRIS (Plymouth)
Lancashire: DERRICK
Lincolnshire: CROPPER, WOODCOCK (Boston)
London: BARKER, DUGGIN, HARRIS, HINTON, HULBERT, WHITE
Wales: HARRIS, PRITCHARD (Pembrokeshire)
Warwickshire: DERRICK, WOODCOCK
Desperate for my Woodcocks from Birmingham!

Zeb
RootsChat Senior

Offline

Posts: 431

Re: TUTORIAL: Image formats
« Reply #1 on: Friday 14 October 05 18:43 BST (UK) »

Here is an example JPEG. On the left we can see a reduction in quality and on the right we can see how it should be shown:

On closer inspection we can see the difference more clearly:

Any of you that have Sky TV might notice this effect taking place with the picture.

Now we have the problems a GIF can face:

Here you can see that the quality is terrible.

Photoshop has come a long way and with those of you who have it, load a copy of your picture and from the "Image" menu select "Mode" then "Indexed Color" to see how it affects your picture.

The only real way is trial and error but always remember when experimenting, make sure you have a backup of the original picture safe.

I've just tried saving mother's pond out as a GIF with more than 255 colors but Photoshop won't let me. I'm using Photoshop CS but earlier versions would let me and as for other programs, I don't know.


	Logged

Pages: [1]

« previous next »

[Copyright] [Free RootsChat Webspace] [Your Surname Interests] [Shrink Link] [About Us] [Terms of Use]

All Census Lookups are Crown Copyright, National Archives for academic and non-commercial research purposes only
RootsChat.com cannot be held responsible directly or indirectly for the messages or content posted by others. Inline images in messages are the copyright of the respective linked sites.
RootsChat.com, Europa House, Bury, Lancashire, BL9 5BT

0.222:22