Image vs. Text-Based Website Design

Google and Bing recently announced new “visual search” tools for their respective search engines. We did a blog post about this. And it got me to thinking about the growing trend I am seeing in the use of  images in Website design.

I have started to see a shift in trends in design, layout and styles of website design where things seem to be moving towards more imaged-based design. When I first started in this business, over 10 years ago, having a website with multiple images on every page was something that only the “high-tech” companies were capable of. It seems to me that this trend was inevitable due to the overall speed of the Internet now, the storage space available on servers for these large files and today’s connectivity speeds (does anyone remember when DSL came out? OHHHHHHHH WOW this is so fast!, LOL).

So considering image-based vs. text-based oriented site design, and what IS the best practice? Here are my opinions on each and what I feel is the correct mix of images vs. text for website design.

Pros & Cons – Image Based Websites (more then a 60/40 ratio of image to text):

Here is what I see as the Pros of having a website that is more image based then text based:

  1. Ease of use: As our overall population gets older (Baby Boomers) one of the first things to go is eyesight. Having more images that communicate what that website wants to communicate is easier to view.
  2. Education Level of Audience: In my opinion our viewing population is becoming less and less literate as the years go by. If you don’t believe me look at the educational standards of today vs. 50 years ago! (Why that might be is another subject entirely.) Americans want it NOW and FAST reading only “slows them down.” Images can convey a better representation of your product and/or service then paragraphs of written information describing it.
  3. Monitor Sizes & Resolutions: As the cost of larger, higher-resolution monitors goes down people are migrating away from CRT (Cathode Ray Tubs) monitors to LCD (Liquid Crystal Display) flat screen monitors. Therefore one can put more high-resolution graphics/images on a screen and have them look nice. In years past owning a high-res monitor was cost prohibitive.

Here are the Cons of having a website that is more imaged based then text based:

  1. Load Time: Like it or not the majority of the American population is STILL on dial-up (I know, I know, you don’t believe me and can’t even think that it’s possible, but statistically its true. If your website is overloaded with images and not enough text it can take a long time for your pages to load. This becomes frustrating for users and they will leave the site.
  2. Information Overload: There is a point where too much visual stimulus can be overwhelming. Ever looked at a website that has tons of images, music playing in the background, and lots of videos? Too many visual elements can actually put off the site visitor and they will “run for cover” to another website that doesn’t make them feel like they are at a used car lot.
  3. SEO Implications: The majority of Search Engines have a hard time organically ranking websites that are mostly imaged based. This includes Flash-based sites, which are more or less black holes to the search engines. I’ve seen some information to the contrary saying that this Flash issue is being resolved, but I haven’t seen any Flash-heavy websites (unless you’re Mercedes, Microsoft, or some other large corporation) organically rank well and until I do I won’t believe it.

So there you have it. These are the Pro’s and Con’s of a imaged-based vs. text-based website design. I think that we will continue to move towards more image based websites, as I perceive the trend to continue this way, but the written word is still valuable. If you want to create a “good” website don’t just think image, image, image: remember to put some attention on the written content in the site as well.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>