Is the usage of text embedded in an image a bad practice, for very controlled uses?

Question

What are your thoughts on writing your text in images?

I'm not saying throughout the whole website... But in certain key locations like image carousels. And I'm not talking about the special cases where you have font types that browsers can't render. I'm talking about text that uses standard fonts and is not too big (3/4 bullets).

Should I embed the text in the images that compose the carousel? Or should I apply the text to the images as "real text" HTML?

What are the advantages/ disadvantages of using text in an image?

Answer 1

Well, just off the top of my head (and some new ones added in based on comments against this post)...

Cons

• Text can't scale, so it doesn't get adjusted alongside standard browser font-scaling options
• No SEO benefit - search engines don't read images so they'll ignore any text in images.
• Screenreaders won't read it out so it'll only be of any use to sighted users. (Well, with some Alt text you may get that announced, but it'll be as descriptive text, not as actual paragraph / header text)
• Images aren't vectors (unlike text) so when zooming / pinch-to-zoom the text will become distorted. This wouldn't happen if it was actual text.
• 'Retina' browsers will not show text images as clearly as non-retina devices.
• Images are larger than text, so it's an increase in page load time and server requests.
• Page translators (such as Google Translate) won't be able to translate image text, and future localization / internationalisation will be made harder because of this.
• Saving the page to off-line browsers (such as Pocket) may ignore the image text altogether.
• Content won't be recognised in internal search, so people searching your website for terms mentioned in image text won't get found on the results page
• Maintainability - If you need to make changes to text, you just change the text! You cannot change text inside an image unless you have the original file that the image was created with as well as the program that created it. So if the image was created in Photoshop, you would need the original Photoshop file as well as the Photoshop application to change the text.
• Users will be unable to copy and paste from an image.

Pros

• It'll keeps your designer happy (until they see it on a device that isn't the same as the one they designed it on).

Unless it's something like a company logo, then there really isn't a need to have images as text.

With techniques such as using font-face you can deliver the actual font to the users browser.

Using images as text when that text actually needs to be read is not advised and is verging on laziness really.

Answer 2

That might be a good but ancient solution to add text to images to prevent users from copying data. You can prevent copying on sites altogether nowadays/ also you can make elements non selectable.

One other key thing to note, that by using text in images, eventually you are adding more work to change any element. I might sound as a supporter of angular.js but by using it, one can just dynamically achieve the same effect, by two way data binding, and this creates a better experience for the user!

Answer 3

Jakob Nielsen in his books "Eyetracking Web Usability," recommends against placing text on top of images or textured background in advertisements because only 35% of people will look at it.