The Big Fat Stupid Image Test

Does Your Website Pass the Test?

swan beauty 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

graceful swans

Image B

Among waterfowl, swans are the fastest, both swimming and flying.

Their graceful form has made them emblems of beauty for centuries.

If you guessed Image A, you are correct.

Image A has the text in the image. It is a Big Fat Stupid Image created in Photoshop, saved as a JPEG image, and then added to the web page.

I gave the image an Alt Attribute that says graceful swans but that doesn’t help the search engines much. And if I tried to put all the text from the image into the Alt Attribute, I might get penalized by the search engines for keyword stuffing.

Image B, on the other hand, has text written as HTML. The swan image is the background. It was created with CSS. The only real drawback to this method is that I am limited in the fonts I should use for the text.

In Image A, I used any fancy font I wanted because it will stay looking nice inside my image. But in Image B, I have to be more careful. I have to use simpler, cleaner-looking fonts to show up well on the web page. It is also not the best idea to use a light-colored font on a dark background. I tend to avoid doing that with a large section of text.

The website visitor can enlarge the font in Image B through the web browser. That is good. But if the font is enlarged a lot, the text could run right over the swans and be even harder to read. So I did two things to prevent this.

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

You can tell that Image B has real text in it because you can click and drag your mouse over it and copy the text. You can’t do that with Image A.

Go ahead and TEST the Image Examples above.

You can also read the information about Image B in the source code of the page.

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.

This entry was posted on Friday, May 8th, 2009 at 10:56 amand is filed under HTML and CSS, Search Engines, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Sachi Infotech Says:
September 25th, 2009 at 3:03 am

Very very Interesting Test. Thanks sharing with thing blog.

Website Designing India Says:
October 14th, 2009 at 2:05 am

Very funny test. Nice sharing with IQ Related information blog.

Dubai Interior Designers Says:
January 5th, 2010 at 6:47 am

Nice Test. Basically i like this type of Test.

Abrasive Grinding Wheels Says:
January 6th, 2010 at 6:42 am

What a Wonderful Test it is?. Very Interesting.

Randy Tambe Says:
March 5th, 2010 at 9:51 am

[..] A bit unrelated, but I absolutely liked this website post [..]

NH Web Design Blog