Why hero & slider images should not contain rasterized text
First of all, let me explain what I mean by ‘rasterized text’. I’m referring to images that have been edited with software such as Photoshop, where text is added to them and then saved as a JPEG or PNG etc.
Once text has been rasterized onto an image in this way, the text can no longer be manipulated or highlighted because it has been converted from a font to a group of flat pixels. This takes control away from developers and causes a range of problems, such as:
1. Search engines cannot read rasterized text
Text that has been rasterized or flattened onto an image cannot be read by search engines, so you lose all SEO value of those words. Therefore, you should overlay the words on top of the image correctly using CSS. You can usually tell if the text has been overlaid correctly if you can highlight it. Although that’s not always the case.
2. Rasterized Text is Bad for Design
Images that contain rasterized text look very out of date and they stand out so much since we are all so used to seeing crisp text on websites nowadays. Also, with image compression being more important than ever for site speed, rasterized text will inevitably appear blurred after compression, impacting the visual quality of the website.
3. Rasterized text causes responsive scaling issues
Rasterized text does not scale well on smaller screen sizes. This is because, as the image gets smaller, the text also gets smaller at the same ratio and becomes extremely difficult to read. Rasterized text will always appear jagged and pixelated the smaller it gets.
The opposite of this would be if you wanted the image to fill the screen on all devices, the text may get cropped off because you cannot make the text smaller with CSS as it’s flattened onto the image.
It’s also worth mentioning that hero/slider background images should be fairly abstract with larger focal points that aren’t affected by cropped edges.
Here is an example of a slider/hero image that has been made correctly and optimised for all screen sizes with CSS…
You can see above that the text and the image is being controlled separately with CSS to change the background position and the font-size correctly for different screen sizes. Which means you don’t end up with something like this…
I hope that explains why you should not use images that contain rasterized text for heroes and sliders. You will only make your website look out of date and people will not be impressed when they are struggling to read your call-to-action message because it is too small, pixelated or cropped half way through a word.
Remember, Cariad’s award winning web designers are here to help should you need to refresh your website or graphics. Simply get in touch today for a free consultation.
