Question

Is it a good idea to use a jquery function that replaces each character from a text to custom character images?

For example: when calling the function, you must pass as argument which element you want to have the characters replaced, and jquery will do (if the given element contains “hello world”)

<img src="h.png"> 
<img src="e.png">
<img src="l.png"> 
<img src="l.png"> 
<img src="o.png"> 
<img src="space.png"> 
<img src="w.png"> 
<img src="o.png"> 
<img src="r.png"> 
<img src="l.png"> 
<img src="d.png"> 

Will this trick slow down my page too much?

ps: I want to use a png image for each character rather than a font file because there is going to be some special effects applied in these images that would be impossible to do with simple font.

Answer 1

The main problem—as mu mentioned—is that this will affect accessibility: vision impaired people can use readers that parse web pages and read the content back to them.

And yes, this will slow down page load times immensely—now your browser has to request a new image for each character in your page.