What is CSS Image Replacement?
CSS Image Replacement is when you replace text on your website, usually within a header tag (h1, h2, h3, etc.), with an image.

What’s the point?
Using text on your website in header tags will help with search engine optimization (SEO) and accessibility.

When should I use CSS Image Replacement?
CSS Image Replacement is beneficial for replacing company logo text with the logo image or when using images along with text for your headers on your web pages. Text in a header tag is more beneficial for SEO than images with an alt description. With the three methods listed below, you get the best of both worlds.

Before CSS:
Image Replacement Before

After CSS Image Replacement method 1, method 2, or method 3:
ImageReplacementAfter

Method 1 – Hiding the Text:

 

Method 2 – Indenting the Text:

Method 3 – Moving the Text

 

Like this post? Share it!