The Big Fat Stupid Image Test
Friday, May 8th, 2009Does Your Website Pass the Test?
Your website has a stunning layout and eye-grabbing details. You are thrilled with the design. But, what if it is not providing meaningful content? Could it be filled with Big Fat Stupid Images instead? Let’s find out.
What is a Big Fat Stupid Image?
I coined this rather stupid but fitting term to describe website IMAGES that include TEXT which should’ve been coded as HTML instead. Basically, all the important website information is stuck in an image. (Note: The swan image on the right is just an image. It is not Big, Fat, or Stupid. It is just a pretty swan.)
What’s wrong with Big Fat Stupid Images?
If you see a website full of Big Fat Stupid Images, you might not even know it. You may be able to read the information just fine.
But what about people with visual impairments?
They may want to change the size of the text. But they can’t.
And what about the search engine spiders?
They know that there is an image there. But they can’t read the words in it. They will leave your website without much of an opinion at all. And they certainly won’t rank you well if your website doesn’t have much to say.
Take a look at these swan photo examples.
Which one is the Big Fat Stupid Image?
Image A
Image B
Among waterfowl, swans are the fastest, both swimming and flying.
Their graceful form has made them emblems of beauty for centuries.
See the CSS coding below taken from the linked cascading stylesheet:
.swanStyle {background: #010100 url(images/swans-on-black.jpg) bottom left no-repeat; padding: 15px 5px 170px 5px; color: white; width: 434px; margin: 15px 10px; text-align: center;}
This CSS code in my CSS styling sheet tells the web browser how to present the section of my web page with Image B in the background. I have added padding in the code to give space below my text. I don’t want my text to cover the swans. See the 170px number? That gives spacing on the bottom.
I also added the part that says: bottom left no-repeat. This tells the browser that I want my image to always stay at the bottom of this section of my web page and I do not wanted it to be repeated. If my visitor decides to enlarge the text, my image would keep moving downward to give it more space. Eventually, my text will be too big for the image, so I have a background color #010100 to make up for that.
The Great News about Image B
An easier way to find the real information in your web page is to use a Search Engine Spider Simulator. Try this one here:
You just type in your website address (URL) and it will give you the information that a search engine spider can read in your page.
Now it’s time for you to check your website pages.
Do they pass the Big Fat Stupid Image Test?
Can you click and drag with your mouse over the text and copy it?
Did you try the Search Engine Spider Simulator? Did it return many words?
If not, your website content may be stuck in Big, Fat, Stupid Images.
