Adding Text to an Image: The Right Way

Mistake #1: Applying text to a .gif that is not anti-aliased and/or not increasing the color depth of a .gif file.

Incorrect - text is jagged Correct

Correct Process: Whenever you are working with a .gif file remember that this file format's colors have been reduced considerably. To add text you must increase the data type (color depth) to "True Color" or "24-bit" (depending on how your graphics software references it). If you do not know what this option is referred to in your graphics software, search for "increase color depth" or "true color" in the Help section of your program. Also, and just as important, you must be sure that the text is set to "anti-aliased" before you apply it to the image. Anti-aliasing actually shades the pixels around the hard edges, causing the edges to look smoother. The "anti-alias" option should also be easy to find by doing a search on "anti-aliased" in the Help section of your graphics software. You do not have to increase the color depth of .jpg file formats. Note that on very small text, it is often best to uncheck anti-aliased or your text will appear fuzzy. Increasing the spacing between characters with small text sizes, also decreases the potential for fuzziness.

Mistake #2: Incorrect optimization of file format.

Incorrect - file should have been optimized as a .jpg Correct Incorrect - file should have been optimized as a .jpg Correct

Correct Process: It is a good rule of thumb to know that whenever you are working with a photograph or anything that has a gradient effect (gradual shading of color bands), the final web image will likely be a .jpg unless of course you want a banding effect. This is not 100% true, but should be the first file type you try as it could save you some time. Always try to optimize your graphics to the smallest file size (weight) for fast page loading without sacrificing necessary cosmetic appeal. The incorrect example above shows an image that contained a gradient color effect and was optimized as a .gif. Notice the fuzziness and speckling? The same but opposite effect can occur with certain colors (such as deep red colors) that are optimized as .jpg instead of .gif. So be careful and by all means experiment.

Mistake #3: Incorrect image dimensions within the HTML source code.

Incorrect - image dimensions are incorrect in the HTML source code Correct

Correct Process: The incorrect example appears distorted, why? The image size is actually 200x130; however, in the incorrect example the image dimensions within the HTML source code states 300x100 pixel. So yes, it is being stretched widthwise and compressed lengthwise. Correcting the image dimensions to exactly what it should be in the HTML source code will correct the problem. IMPORTANT NOTE: There are situations where you DO want to stretch the image! When, why and how? Read our related article, "Stretching Images". :)

Graphic software programs we recommend are Adobe PhotoShop, Jasc Paint Shop Pro and Ulead PhotoImpact. All of these companies offer trial versions, so if you cannot get comfortable with one user interface, try another before you buy. One of the most critical factors in web design and graphic design is to "know your software". It does not matter what you use really as long as you know the program inside-out. It is as equally important to be comfortable using it. If it doesn't "feel" right, move onto something that does.