1. Basics about using images for text
2. Examples of optimization images for text when saving for web

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

JPEG high quality image 8,72 Kb

Now try to save this title in GIF format (choose GIF in “Save for Web” “Optimized file format” menu)

What we see - perfect clean image and size 2,25 Kb.

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.

If background is colourful I usually use this solution:

• expand selection (photoshop menu “Select” - “Modify” - “Expand”) of text on 1px or couple of pixels and copy merged (menu “Edit” – “Copy Merged”) text and background
• paste an image into new file with transparent background
• save image for web as GIF with Matte settings “None”

Text saved as GIF – 4,47 Kb

Math of this solution is simple:

1) we’ve got text on image saved as GIF with size 4,47 Kb
2) save only background as JPEG - adjust settings when you get maximum quality and less size:

Size of this background I saved is 6,69 Kb

3 ) HTML and CSS to display the title and background can be next:

<style>
.imagesTextInWeb {
background:url(save-image-in-web-background.jpg) no-repeat;
width:253px;
height:186px;
}
.imagesTextInWeb img {
margin:22px 0px 0px 46px;
}
</style>
<div class="imagesTextInWeb">
<img src="text-image-in-web-color-background.gif" width="163" height="144"/>
</div>

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

&copy Sunnieweb.com 2009