Alrighty then… So last month we took a look at “Typography”, if you missed it, take a look at the link below.

1. Typography: how it relates to on site SEO.
2. Images: how to use them.
3. Color:  its not Pantone, its HEX.
4. Menus: what are they really for?
5. Layout: now there IS a reason.

So now we of course are on Images, more importantly, how to use images with a website and why to use them. Prior to the age of ‘web’ the purpose of an image was quite simple really, “show something”, if you were blind of course you had to have it described. Remember now, search engines are “blind users”, literally, they could care less if the image is well composed or even in focus.

This brings us to an example of the type of ‘template’ I often get presented with for new websites.

this not only bad image use, considering seo; is INSANITY!

• Yep, PURE INSANITY. Lets start with the top, thats the least insane part, but remember last week we discussed the REASON for typography, again here we should have a REASON for an image on a page.
• Lets move on to the background, sure it looks cool, but again, I ask you “why is it there?”, just because it ‘looks nice’ on the web is not good enough. More importantly, to do this in the background you have just bloated the page load time with a huge image for no apparent justification other than ‘it looks neat’. Yep, page load time is important, as a designer have you ever tried to download a 50mb PSD, JPG, or say video file online? Takes forever unless you have a T1-T3 line running into your home, in which case guess what? 99.9% of the rest of the world does not.
• Lets now look at the treatment of the silver gear to the right, again; that sleek designer in you wants to do something cool with the text, in this case you wrapped it around the gear so it seems like the gear is interacting with the text. Its a nice thought after all and everything on this page “could be done” if you want to get technical, (I will spare the CSS nightmare details) so lets say what a coder would have to go through to make this compliant is insane.

Q: what is good image use then?

A: purpose filled placement alongside text which describes that image.

Remember last month we discussed “header” tags? Well, we need to look at that again for a moment. We learned that “h1 through h5″ are levels of priority. Remember also that the web was originally intended to ONLY be text, the idea here is simple: it stands to reason that if an image is important enough to be on a web page it should be accompanied by text and that image should be relevant to the text.

So here are the golden rules for images:

1. If it has to be on the page, it had better be important!
2. If its important enough to be on the page, it had better be accompanied by text!
3. If its not an important image, see #1.

Lets look at a simple example with the above rules followed:

this is GOOD image use for graphic designers considering seo!

Amazing, but kinda ugly right? Well its simply beautiful to the SEO XHMTL Strict 1.0 coder web people. This is because the coder will be able to place the image AND a paragraph describing it together inside an h5 tag. It might look a bit like this:



Yep, we coders have to specify the not only the size, but also an ALT tag, which is a description of that image for the blind. To keep this short and sweet, know how the one guy on the block with a bazooka who decides to fire it off in a public school zone just ruins the opportunity for everyone to even have a bazooka anymore… (well, maybee thats a bad example).

Let me put it this way: some time not too long ago evil coders decided to start doing whats called “black hat seo” and like it sounds, its black magic. They began to ‘stuff’ worthless keywords inside ALT tags and hide them in other places on web pages, essentially, they ruined it for everyone. Now images to be used properly must have ALT text that actually describes the image and should be supported by text surrounding the image.

This is how things get into the Google image search you use to rip photos off the web. Just using a ALT tag is not enough, search engines actually READ the text around an image and decide “this must describe that image I can not see”: BAM, text association with an image, VIOLA your blind search engine fetches every image near the term “widget” when you do an image search using that word. Now of course, this is mucho-importante to on site SEO because it makes the page more relevant to “widgets” but also offers the opportunity to get images indexed in the search as well.

Q: what if I lie, and say that the “silver widget” is a “red womp” what then huh?

A: dumb. Why would you ask your coder to lie?

This is actually a good question because it brings up the “reason why” we are using the image in the first place. Lets look at this example:

bad image use, this is NOT a widget, its JOEY

Notice the TEXT, “Lets learn about JOEY”, well, there is no widget in the photo after all, so this is how a coder should render the text. Now you could always put a photo of a widget into Joey’s hand, and then try to write a paragraph around that instead… (I suppose I should also mention that once your website comes up for HUMAN review after the search engine flags you for lying and stuffing keywords into ‘joeys’ photo saying he is really a widget, you are likely to get blacklisted and removed from the search index altogether…)

Lets move on. By now I know you are saying “nope… thats all wrong, you can do MORE than that with images, I know.” … because you after all have years of web design experience… Well guess what, IMAGES and GRAPHICS are 2 totally different things. (whew)

Yep, you can use BG images and such in a way that is SANE and has no other reason other than to look cool. Here is how you do it.

1. If a graphic has to be on the page, keep it SMALL
2. If a graphic has to be on the page, try to use “patterns”

Really only one very important concept here: image size. Remember downloading that 50MB video? Same thing rings true with a 3MB image, it takes too long! We coders try to keep things under 2MB for the WHOLE page, images, text, scripts, all that stuff, 1MB or less would be perfect! Consider all the places a web page may be seen, mobile phones, slow modems, portable wifi. The goal is speed, and page speed is a factor in SEO now a days. 10 times out of 10 its images or some form of media like video which makes a page slow. To avoid this ‘image optimization’ is key. Repeating backgrounds (patterns) are an awesome way to add some ‘flare’ to a design and keep it compliant. I will assume you are familiar with this, but if not take a look at this article on repeating bg’s, patterns, and tiles.

Now, lets revisit the design with the above rules for GOOD image use, some graphic flare, and even a nice small background image:

GOOD image use, bg use, and graphic use for SEO

See, not so bad…

• Some neat little arrow graphics, used next to text that makes sense (rather than “read more”, who types ‘read more’ into google?)
• Real IMAGES used next to text that describes them.
• a few Repeating BG’s, namely the simple little shadow that can be done with CSS or a 1px wide repeated image
• and a tasteful main BG image, small, simple and easy to make.

To conclude, using images is important, whats more important is how they interact. The less “line crossing” the better. When images have to display under or over top of items and you what them to ‘flow’ the page can easily become difficult to manage! Transparency can sometimes be a problem, but lest just say that you should avoid it if possible. This brings me to the final and perhaps most important item for today, the “Box object model”. You an use the link at left to learn more, or take a look at the images below:

css-box-model

Simply put, everything on a web page MUST use the “box object model”. Thats why by default lots of pages tend to look quite square. It takes serious effort and professional planning to create a fully compliant website with “smooth swooping curves” and “non square designs”.

Sure, the technical definition of a website allows anyone with good’ol’Photoshop 7 to slice up an image hop to dreamweaver to give it an ALT tag and say ‘der… Im a web designer’… and by that same token you could also call balancing yourself on a yoga ball as it rolls down Mt Washington into ‘dan-tawn’ a form of transportation.

At any rate, keeping it simple is key, but giving purpose to imagery is the key to using images on the web, always ask yourself “why am I putting this image here, how would I describe this image to a blind person?”.

Next month is Color:  its not Pantone, its  HEX.

enjoi
-Ž