Why to use HTML and CSS instead of images

Why to use HTML and CSS instead of images

So at some point as you’re struggling through
trying to figure out what the right HTML and CSS is to represent an HTML element, just
like you see it in the design, you’ll start to wonder if maybe you should use an image
instead. For example, couldn’t we just use this image
here, instead of an actual heading or text? Well any time that you have text in your interface
there are some distinct advantages to using text in your HTML instead of an image. The first is that you have a lot more control
over the styling. So if for example later you wanted to change the color of this text
to some other shade of grey you could do that very easily if this was actual text. But it
would be time consuming and painful if you had to create images for every heading that
had this color. Another reason is that text is always better
for search engines and screen readers. We can of course use an alt tag but we’re still
missing out on the point of what we’re trying to convey. So in this case for example we
want to convey a heading but it’s actually an image, so our HTML can’t really represent
what we want to say. A third reason is that it’s possible for users
to translate text in the interface but they can’t translate an image. So if somebody from
another country wants to translate your page they’ll be stuck with qualities because it’s
an image. A final reason is that when a user adjusts
their browser text size images like this won’t be adjusted, and so you may be making it harder
to read for people who are visually impaired. Okay, hopefully that convinces you to use
text whenever you can. But it means that we have a little bit more work to do at the beginning.
So let’s start that process.

1 Comment

Leave a Reply

Your email address will not be published.