Software Development

Quit serving text with images already

In 2012, we shouldn't have much need to serve up what appears as text on a web page with an image.

There was a time on the internet when eye-hurting pages such as this one were the rule rather than the exception.

Nowadays, developers and designers are able to achieve stunning results using just text and CSS. One example is this poster on the three laws of robotics. Years ago, this would have been a terrible collection of spliced images, or just one big chunky image file needing to be downloaded and rendered.

There are myriad examples to see, once you type a positive adjective and the words "text css" into Google.

Yet, we still live in a world where text too often is served up as an image, and a poorly chosen, lossy image format is used. The format I am referring to is JPEG, and, due to its lossy nature, it will generally leave text with artefacts, or blurriness.

This case I saw this morning was from the website of Australia's federal Liberal party on the launch of a book by its leader.


(Screenshot by Chris Duckett/TechRepublic)

There is no reason that text such as this needs to be on an image, but if it had to be an image, then at the bare minimum it should use a lossless image format, such as PNG, that will render the text correctly.

Below is a comparison of a trio of screenshots taken of 50 years of tours by The Rolling Stones; on the left is a PNG, in the middle is a JPEG exported at 90 percent quality, and on the right is a JPEG exported at 100 percent quality. Below the images is the status bar of the image viewer, which shows the zoom level and size of the images.


To see artefacts properly, I recommend loading the full sized image and zooming in.
(Screenshots by Chris Duckett/TechRepublic)

The 90 percent JPEG has clear artefacts introduced, and the 100 percent JPEG is fine in quality, but clocks in at almost double the file size of the PNG: 200.4KB versus 96.7KB.

PNG is the obvious choice for images containing text, and it's a shame that blurry JPEGed text continues to be a hindrance to readability on today's internet.

Don't trust the first result returned, and do some testing

Back to the the page on the Stones tours, it's a good example of why a little domain knowledge can go a long way, and why you shouldn't necessarily trust the first result returned by a geo database.

Check out the path the Stones took that year: Sydney, Brisbane, Adelaide, St Kilda, Wellington, Auckland; and look at which Wellington has been mapped. I hope the fans in rural New South Wales loved it.

And before you think it's some regional mistake, even New York gets the treatment, too.

About

Some would say that it is a long way from software engineering to journalism, others would correctly argue that it is a mere 10 metres according to the floor plan.During his first five years with CBS Interactive, Chris started his journalistic advent...

4 comments
SKDTech
SKDTech

But all three comparison images look equally crappy to me. I agree that the best and lightest weight format should be whenever possible, but if you are going to throw up a side-by-side comparison, then use one that more readily demonstrates what you are trying to point out.

Deadly Ernest
Deadly Ernest

never the twain shall meet - except graphics artists insist on serving them up as one.

vlapsley
vlapsley

a Silverlight. MS have canned this yet continue to build new websites with it. WTF?

Editor's Picks