Which Graphic Format is Best?

  Pesala 07:35 02 May 03
Locked

I am reviving this old thread to update and summarise the keypoints.

Pesala Tue, 04.03.03 | 08:42

I have always thought that JPG images were the most efficient for file compression, but it seems that this is not always the case. Someone on the Serif forum suggested that GIF images are usually better for screenshots.

I tested his theory, and was surprised at the results. You can check out and compare the screenshots from the links below (hopefully). In IE ensure that your image are not resized to fit the window, or they will be blurrred.

GIF 48K: click here

JPG 48K: click here

PNG 25K: click here

The Font Thing is an excellent freeware font manager available from: click here

Originally Posted by ?dstow Tue, 04.03.03 | 09:41

The "best" graphics format depends to a large extent on what you are using the graphics for. There are compressed formats (JPEG is one of those) and uncompressed (eg TIFF). For my work, a compressed format approaches the totally useless as, during compression, information is necessarily lost, never to be retrieved. Each copy of a compressed image results in more loss and more deterioration. This doesn't happen with an uncompressed format and however many times it is copied, it remains the same. The downside of an uncompressed format is its very large size.

So, swings and roundabouts!

?d

Originally Posted by Aspman Tue, 04.03.03 | 13:26

I'm a Photoshop user, and to be honest I have to play around with the settings to get the best results. I find you get away with higher levels of compression and lower qualities in smaller images. Also if you have an image that has a lot of straight lines jpg compression tends to look worse - something to do with the way the compression works.

In Photoshop I tend to stick the with a couple of the predefined levels medium and high they roughly equate to 30 and 60

I've never used JPG2 and I don't think it is a well supported format yet. PNG I've tried to use but I find it hard to get a images with a small enough filesize for 56k users.

IMHO just learning when to choose between gif and jpg will get you out of most problems. If you need to put in a high quality image (say of a product or place) put in a thumbnail first and warn users that the full image is quite big and will take a bit to download. If you warn them first they don't get so annoyed.

Originally Posted by tbh72 Tue, 04.03.03 | 14:04

I have been using PNG for all my my static images for several month's now. I have yet to come across an image which is better quality or size other than the PNG format.

I have no idea why people seem reluctant to use PNG.

Gaz 25 Tue, 04.03.03 | 22:20

PNG for me.... Loads quick and looks just as good as a Gif.

LATEST UPDATE AND CORRECTION Pesala Fri 02.05.03

PNG is not as compact as I used to think. File size depends on the number of colours in the image. Sceenshots of dialogue boxes etc., tend to have few colours and so compress well with PNG, photographs have more colours, and so compress better with JPG

KEYPOINTS FOR WEBGRAPHICS

1. JPG for 24-bit colour photographs and high compression

2. PNG for screenshots or 24-bit colour photographs if you also want transparency (e.g. for cutouts) and the highest quality

3. GIF for clipart and where you want transparency or cutouts with 256 colours or less.

4. Resize your images in your graphics program, not your web program: click here

SAMPLES

The same 640 x 480 pixel image in different formats for comparison. (Cropped from an image at: click here

GuitarPlayer.png (501 K) click here

GuitarPlayer.gif (218 K)
click here

GuitarPlayer75.jpg (51 K) click here

GuitarPlayer50.jpg (31 K) click here

GuitarPlayer30.jpg (21 K) click here

GuitarPlayer20.jpg (15 K) click here

Any corrections and comments are very welcome.

  Pesala 07:45 02 May 03

Still having problems posting some Unicode characters.

  Jomi 10:09 02 May 03

Excuse me for being a bit thick but what are the differences between jpg 75, 50, 30, 21 and 15?

thanks.

  Pesala 11:51 02 May 03

In Photo-editing programs you can usually change the compression ratio for JPG images from the default. My figures are for Irfan View click here which uses a range from 1 lowest to 100 higest quality settings.

You will notice that the file size can be reduced quite dramatically by increasing the compression ratio and reducing the quality. Inevitably, there is some degredation in the image quality, but his is not too noticeable for webgraphics. Compare the 51K image with the 15K image and see if you can spot the difference. Image degradation is much worse when there are sharply contrasting colours, as in screenshots. Text gets very fuzzy when quality is reduced below 50. However, most people would not notice the difference between GuitarPlayer75.jpg and the PNG graphic, which is ten times the size.

This thread is now locked and can not be replied to.

What is Amazon Go and will it come to the UK? The store without checkouts or queues

1995-2015: How technology has changed the world in 20 years

Why ecommerce hasn't taken off on social media

New MacBook Pro 2016 review | MacBook Pro with Touch Bar review: Apple's expensive and powerful…