The first image is a PNG image – a portable network graphics image. The PNG format is a lossless format. When images are saved they do not lose any information.
The second image is a JPEG. JPEGs are a lossy format.
That means they cleverly decompose and compress images by reading what color is next to what color, and then they reconstitute the images when they display them.
The thing is that it’s not quite as simple as ‘reading what color is next to what color’. That’s because you have a choice of compression when you save a JPEG image.
You can save all the way from 100% (no compression) right down to 1% (huge compression). More compression means that the ‘colors’ that are read are really an amalgam of a big block of colors.
The more compression, the smaller the file size – and that’s good.
But the more compression, the worse the image will look – and that’s bad.
The Bit That You Don’t Usually Read About
Everything you have read above is pretty standard stuff. But this next bit is not.
Look at the last two JPEGs. See how black words against a white background saved at 5% still looks pretty good.
But black against red saved at 5% looks terrible.
That’s because the colors are ‘fighting’ one another. There is not a lot of contrast and the compression makes the image look bad.
Compare that with this one where the type is blue against a pale yellow background. There is plenty of contrast and 5% compression doesn’t look too bad.
The Take-Away Lesson
If you are making a header image with type against a color background and you want it to look good, load quickly and not drag your site down, choose two colors with a lot of contrast between them.
Leave a comment