Using an image as a banner, or code the text and CTA separately?

Question

I was wondering what is the better practice for a web platform selling employee benefits. We have a banner up top (not a carousel), and I'm not sure if it's better to keep it as an image, or code the text and button separately. I looked at websites like Amazon, ebay, and other e-commerce platforms, but it doesn't seem to be a "consensus".

What do you think? I lean towards coding the text and button separately, because it's better for responsive displays, and it will keep the design consistent in time (sometimes people from marketing make these images, not a designer)

Answer 1

It's not clear what you mean by banner vs text + CTA.

If you are referring to an image that contains both text and button, then there are a few things to keep in mind:

1. The text inside the image is not accessible by default, so you must add it also as description for the image. So if your designer changes the text, the code must also be updated, which is double work.

2. The text inside an image is not as user-friendly as normal text, due to not being able to scale it (for accessibility), recolor it (for dark mode) or select and copy it (for search).

3. The text inside an image is not available by default for SEO, unless you also add it as description (same as point 1).

4. The button inside an image has no interaction feedback, like hover, focus or mouse down. You can only add feedback for the whole banner, but this might be confusing for some people.

5. As you said, the text and button inside an image are not responsive, so you must use different images for different resolutions.

Overall, I think it's better to just keep images as background and add the text and buttons separately. It's less headache to deal with.