Basics about using images for text

Images on websites are often used in place of text because in graphic programs you can do much more with decorating text when with plain text on a website as a result of:

web browsers support only certain font-families

depending on computers’ settings of different users web browsers can not to smooth edges of letters what makes text look rough:

Such elements as logo or slogan of company mostly are displayed as images in web.

Putting images on websites for text has its disadvantages:

search engines don’t see what’s written on an image, so they can miss some important information on website

size of image files is bigger than plain text and it increases time of loading page

These problems can be solved by:

using image replacement in HTML code of website

adjusting right settings for optimization when saving images.

Examples of optimization images for text when saving for web

In previous post I described formats to use for saving images for web and appropriate Photoshop settings. Let’s see what we get on practise. I decided to compare results of saving images which we use for text on websites because elements like this: logos, images for text and backgrounds make up design of website and need to be saved and displayed correctly to make website look nicer and load faster.

Let’s see what we get if save image with text as JPEG:

This is optimized title with Medium Quality of JPEG settings. Where are “noisy” dots around the title and on it. Size of the file – 4,84 Kb.

If to increase JPEG Quality to “High” it is less noisy though still not completely clean and size of the file increases to 8,72 Kb what’s a bit too much for a title like this*.

* plain text would be only 18 bytes – size of each letter or symbol or space displayed on web as plain text is 1 byte

If we need to save image with transparent background (“Transparency” field on GIF setting is ticked) if, for example, we want to use another background behind the text, and don’t adjust right settings, result can look like this:

This image doesn’t look good – edges are too rough, the title looks like pencilled with 1 pixel.

To make edges smoother we need to choose background colour at the “Matte” field of GIF settings – the same colour as on part of website where we going to put this image.

It added extra colours to “Colour Table” (what increased size of a file) but now edges look smooth and we still have transparent background.

Size of HTML and CSS code is 297 bytes. Remembering that 1 Kb is 1024 bytes we can summarize size of images and code:

6,69 Kb + 4,47 Kb + 297/1024 Kb = 11,45 Kb

Result of putting together images and code looks like this:

To get the same quality saving text and background as one file in JPEG format would be about 30 Kb and GIF just doesn’t have enough colours in palette to make saved image look like an original.

For comparing I saved image as JPEG file adjusting its settings to get the same size – 11,4 Kb. This image definetly looks worse.

Summation and advise:

to save in GIF format is better for text or any solid lines or elements which have 256 colours or less palette

size of code is always smaller than image so it’s not necessarily to put all elements on one image, better to split them up, choose right format and settings for each image and combine them using HTML and CSS