Images For The Web – A Quick Primer

PNG
JPEG Saved at 35%
JPEG Saved at 5%
JPEG Saved at 5%

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.

JPEG Saved at 5%

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 Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s