Images Containing Text Not Resizing Properly
Why you should not include words (text) within the image of your banner images
Instead you should use the text input areas in your Dashboard to overlay text on top of your image. By doing this you will be using established website best practice and your text and images will resize properly across different screen sizes -mobile, desktop and tablet.
What does the web say?
Here’s what the web says about adding words (text) inside your images:
Including words (text) inside a website image is generally discouraged, especially when designing for both desktop and mobile views, because of several key resizing and accessibility issues:
🔄 1. Responsive Design Problems
Images scale differently across screen sizes (e.g., desktop vs. mobile).
When an image with embedded text is resized:
The text may become too small to read on mobile devices.
Or it may appear awkwardly large on desktops, breaking layout balance.
You can’t control how readable the text will be across screen widths.
🛠️ 2. Lack of Flexibility in Styling
Text inside an image can’t be styled with CSS (e.g., font size, color, weight).
You lose the ability to dynamically adjust typography for different screen sizes or themes (light/dark mode, accessibility settings).
♿ 3. Accessibility Issues
Screen readers cannot read text that is baked into an image.
This creates barriers for visually impaired users and violates web accessibility guidelines (WCAG).
Users can’t select, copy, or translate text that’s part of an image.
🔍 4. Poor SEO Performance
Search engines cannot index text inside images as effectively.
Important information embedded in images is ignored by crawlers, reducing your SEO potential.
✅ Best Practice
Use real HTML text overlaid on images when needed. This way, the text remains:
Scalable and responsive
Accessible to screen readers
SEO-friendly
Stylable via CSS
So what should you do?
Upload an image to your Homepage or your Featured Playlists or any other area without including text or words.
Use your Tunebud Dashboard Text Input Area to add text. Here’s an example of what your Text Input Area looks like for your Homepage Banner Area.
In the above image you will see where you can upload your image. Also highlighted are the areas where you can add and style your text which will overlay the image.
By doing this your text and image will:
- Display and re-size properly for all different display sizes (mobile, tablet and desktop).
- Follow Google SEO best practice so that search engines can find and index your most important title text.