If you’re reading this then you are probably interested in Graphic Design, or you wouldn’t have typed the term in to Google and stumbled across my Web Design Blog.

Many Designers will know the fundamentals of web design and the rules of thumb when it comes to designing for the online community, but many overlook the basics of Search Engine Optimisation (SEO) because they don’t understand it or it seems daunting. I remember picking books up when I started out in Web Design and thinking just that.

Yes, SEO takes time, and yes, SEO can be boring, but when you see positive results you just keep coming back for more. Lesson 1 of my strategic SEO plan includes optimising images for Google. This thread assumes that you have a reasonable understanding of SEO and a basic understanding of XHTML and design practices.

Google Hates Big
It’s preferable to the human eye to see crisp, clear imagery, especially on a computer screen. The problem is that you can’t always have high res on the Internet. Google has the job of keeping people informed. The last thing they want is your clunky website clogging up their results, which is why you MUST optimise your image size and use the right images where appropriate. Keep files sizes to a minimum while retaining quality. Google likes to crawl your site quickly. If it finds massive images with huge file sizes then your Google position could be jeopardised.

Web Design Tips
File Size Versus Quality
Image quality – this is a tough call that only you can judge. When you’ve finalised your web site design in your graphics program you will want to export it and start coding. During the export process you will be slicing images while choosing the most appropriate file type for the job (see below for more information). Your graphics program will have a slider which gives you the opportunity to select the image quality of your exported images. Don’t always go for maximum because it will slow your web site loading times down. I tend to go for a figure around 60 or 70 percent. What you choose is up to you, but remember, large images will have a detrimental effect on loading times, and Google isn’t a fan of slow loading site. Neither are your customers!

Image Formats Which Are Available

jpeg – Probably the most common image type at present, jpeg has great compression ratios and is ideal for many web images, especially pictures which include a lot of variation in tone and colour. Quality is reduced when you optimise jpeg, so keep the original high res copy backed up on your hard drive. By using Photoshop or Fireworks you can see the impact on image quality that optimising for the web has. The slider in Fireworks is especially good at giving you all the informtaion you need when optimising, including the percentage quality, the filesize after optimisation and the time it takes to load on a 56k modem.

jpeg does not support transparency. All jpeg images will appear square or rectangular in a browser.

gif – This type of image is great for solid areas of colour, for example logos, website backgrounds and images which do not have much variation in tone. Use gif if you want a transparent image to render in a browser. The images in the corner of my own web site (www.2spheres.co.uk) are in gif format, as they are mostly one colour and they are also fully transparent in places.

gif does not support partial-transparency, for example, drop shadows or outer glows at 50%.

png – This wonderful image format has changed the way we design for the web, but be warned, it can cause problems with certain browsers (IE6 being the usual culprit here). The png format is very high quality and has a reasonable file size as long as the image is kept small. It supports full and partial-transparency, so you can render a 50% outer glow on an image in any modern browser.

REMEMBER THIS – png WILL NOT render in some browsers (IE6 for example) which means that your semi-transparent png work could be wasted. Most browsers are being updated and the old ones being phased out, but you can bet your boots, someone somewhere is still using IE6 or Netscape Navigator. One other thing to keep an eye on with png is the file size. It can get very large if your image has lots of colours and tones in it.

Naming Your Images
Naming an image 177007.jpeg isn’t very search engine friendly, so to add weight to your SEO think of a descriptive name. By naming images relevant to your content, you could gain places in the search listings. Try to call images relevant names, including some keywords if you can. A couple of examples are images on 2Spheres which are named graphic_design_blog.jpeg and design_gallery.gif.

Adding ALT Tags
The original concept of ALT tags was to assist in accessibility for screen readers. They also provide weight to a good SEO plan. Google likes ALT tags because they show that your site is catered for screen readers, and they give Google a better idea about your site and it’s content. For those of you who are unfamiliar with ALT tags, you can add them to your XHTML very simple like this:

<img src=”image_name.jpeg” alt=”An image of a dog eating food” width=”157″ height=”110″ border=”0″/>

Simply add your image, then add alt=”tag goes here” within the code. If you use Dreamweaver then it asks you to add this tag when you insert an image. If you use a text editor you should know this anyway!

Keep Image Size Down with CSS
Users of your website want fast access and quick loading times. You have about 4 seconds to impress before the average will click back and go elsewhere, which is another reason why file size is so important. Keep your image size down by optimising correctly and using the correct file types, but use good markup wherever possible and try to cheat the system by repeating images whenever you can. CSS is great at doing this for you, but it has to be done in the correct way.

Go back to the 2Spheres Web Design Blog to learn more about CSS and web site optimisation.

Tags: google images, images for web design, optimise images, optimise pictures for web, optimising images, wen site images

This entry was posted on Monday, February 8th, 2010 at 11:15 am and is filed under Optimised 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.