Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
add comment

3 Answers

up vote 47 down vote accepted

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.

share|improve this answer
11  
Another thing is that localization becomes a pain if you ever go for it. –  Mervin Johnsingh Jul 1 '13 at 15:04
7  
Another problem is 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." - source –  John Assymptoth Jul 1 '13 at 15:13
9  
+1 Very good list. Also, users can't copy/paste. –  Gaël Laurans Jul 1 '13 at 16:13
2  
Personally, I loathe web sites that have their addresses in image files. How am I supposed to copy and paste into Google Maps to find out where they are? –  Greenstone Walker Jul 1 '13 at 20:38
1  
I'm not really into font licenses, but is it possible for a font to be legally used in an image, while it would not be in a @font-face? –  Grimace of Despair Jul 1 '13 at 21:31
show 13 more comments

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!

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.