READ: Logo Feedback Needed

  • Thread starter Thread starter TAFJonathan
  • 52 comments
  • 1,086 views
f-15
 

Attachments

  • f15.jpg
    f15.jpg
    4.5 KB · Views: 36
Originally posted by Stealth Viper


Its not the original images that are gran., just when its in gif format. But when its in jpeg the text is crappy. :(

Stealth, a quick set of hints on how image compression works:
GIF images are LZW compressed. This means that the compression algorithm looks for patterns, which it can then encode. This is a lossless method, because all of the data is preserved. Also, GIF images are limited to 256 colours, which means that each pixel takes only 1 byte to render, before compression.

JPEG images are compressed using a sine-wave algorithm. The idea is that the human eye can only perceive a certain amount of colour variance (it translates roughly to 65,000 colours). However, JPEG images can contain up to 16.7m colours, which requires 3 bytes to render. But the key is in the sine wave compression. Photographs, which use the full colour palette, are particularly useful for sine wave compression, because the idea is to map each pixel as far as possible to a regular sine wave. It makes use of the eye's relative insensitivity, and strips information from the image in order to better fit it to the sine wave, reasoning that the difference will be invisible. In a photo, adjacent pixels tend not to be too different in colour, and there tends to be relatively few areas of solid, unvarying colour. So the JPEG compression method is quite successful at compressing this.

You will see that your image program allows you to control a quality/compression balance, which basically varies the strength of the information-stripping.

That's the theory bit, anyway.

How this applies to your image is thus:
If you wish to save a photo as a gif file, the image program will have to reduce the number of colours, and it will tend to do this by creating a palette and mapping the deleted colour to the closest one in the palette. This will introduce a certain granularity to the image as the correct colour is replaced. Also, if there are variances in colour right across the image, the compression will not really be able to find many patterns, and so will not compress well.

However, since the compression is lossless, and there is no attempt to 'fit' the image to a fixed mathematical form, it can handle massive colour variances between adjacent pixels without issue, which makes it ideal for rendering black text on a white background, for example.

Whereas, the JPEG compression method will allow the greater number of colours to remain, so that your granularity disappears. But the tradeoff is that black/white does not fit a smooth curve, and so the edges of the text will appear fuzzy.

If you want to see this in action, do the following:
Open a bog-standard application, like MS Word. Take a screenshot of the whole window. Save as GIF and as JPEG. Then reopen the saved files. You will see that the GIF file is smaller, and looks identical to the actual window. The JPEG will be larger (even though the algorithm is superior, you have not given it an image it can work with), and it will contain all kinds of artefacts around areas of solid colour, and areas of large adjacent pixel colour variance.

Now, to see the reverse, scan a photo (or obtain anywhere) a photo of a typical scene. Try to make it one including people, as JPEG is VERY good at skin tones. Again, save as GIF and JPEG. Reopen the files. You will see that the GIF file is much larger than the JPEG, and that there is significant granularity, as well as poor overall colour preservation. The JPEG image should look exactly the same as the original.

I hope you find this post useful!
 
Wow! That's a lot of info. I understood the basics of compression, but not the consequencs of different kinds. That helps a bit...but is there anyway to have nice text AND photos? It seems other websites can, such as GTP, for example. The Porsche AND the text look good...how can I find the perfect medium?


Originally posted by GilesGuthrie


Stealth, a quick set of hints on how image compression works:
GIF images are LZW compressed. This means that the compression algorithm looks for patterns, which it can then encode. This is a lossless method, because all of the data is preserved. Also, GIF images are limited to 256 colours, which means that each pixel takes only 1 byte to render, before compression.

JPEG images are compressed using a sine-wave algorithm. The idea is that the human eye can only perceive a certain amount of colour variance (it translates roughly to 65,000 colours). However, JPEG images can contain up to 16.7m colours, which requires 3 bytes to render. But the key is in the sine wave compression. Photographs, which use the full colour palette, are particularly useful for sine wave compression, because the idea is to map each pixel as far as possible to a regular sine wave. It makes use of the eye's relative insensitivity, and strips information from the image in order to better fit it to the sine wave, reasoning that the difference will be invisible. In a photo, adjacent pixels tend not to be too different in colour, and there tends to be relatively few areas of solid, unvarying colour. So the JPEG compression method is quite successful at compressing this.

You will see that your image program allows you to control a quality/compression balance, which basically varies the strength of the information-stripping.

That's the theory bit, anyway.

How this applies to your image is thus:
If you wish to save a photo as a gif file, the image program will have to reduce the number of colours, and it will tend to do this by creating a palette and mapping the deleted colour to the closest one in the palette. This will introduce a certain granularity to the image as the correct colour is replaced. Also, if there are variances in colour right across the image, the compression will not really be able to find many patterns, and so will not compress well.

However, since the compression is lossless, and there is no attempt to 'fit' the image to a fixed mathematical form, it can handle massive colour variances between adjacent pixels without issue, which makes it ideal for rendering black text on a white background, for example.

Whereas, the JPEG compression method will allow the greater number of colours to remain, so that your granularity disappears. But the tradeoff is that black/white does not fit a smooth curve, and so the edges of the text will appear fuzzy.

If you want to see this in action, do the following:
Open a bog-standard application, like MS Word. Take a screenshot of the whole window. Save as GIF and as JPEG. Then reopen the saved files. You will see that the GIF file is smaller, and looks identical to the actual window. The JPEG will be larger (even though the algorithm is superior, you have not given it an image it can work with), and it will contain all kinds of artefacts around areas of solid colour, and areas of large adjacent pixel colour variance.

Now, to see the reverse, scan a photo (or obtain anywhere) a photo of a typical scene. Try to make it one including people, as JPEG is VERY good at skin tones. Again, save as GIF and JPEG. Reopen the files. You will see that the GIF file is much larger than the JPEG, and that there is significant granularity, as well as poor overall colour preservation. The JPEG image should look exactly the same as the original.

I hope you find this post useful!
 
Originally posted by Klostrophobic
Without scanlines and borders:

I tried to keep them to your format.

Now blur the images together so they transition smoothly, like I did, put the border just around the bottom bit, like I did, and make the text bold Verdana.
 
Originally posted by Stealth Viper
Wow! That's a lot of info. I understood the basics of compression, but not the consequencs of different kinds. That helps a bit...but is there anyway to have nice text AND photos? It seems other websites can, such as GTP, for example. The Porsche AND the text look good...how can I find the perfect medium?

Well Klos has done a fine job if you ask me, but here's the answer to your question re the Porsche and the words FORUMS.GTPLANET.net. I wouldn't want to blow my own trumpet (see my earlier post about using 2 images), but here's the source code:

<td background="images/custom/bg.jpg"><a href="https://www.gtplanet.net/index.htm"><img src="images/custom/logo.jpg" width="249" height="86" border="0"></a></td>
<td align="right" valign="bottom" background="images/custom/bg.jpg"><a href="index.php"><img src="images/custom/forumsgtp.gif" width="400" height="47" border="0"></a><br>


So you can see the Porsche is a JPEG image (logo.jpg), and the Forums text is a GIF image (forumsgtp.gif).
 

Latest Posts

Back