Web Design - Web Site Creation
All about graphics and multimedia
First, about graphic images. Graphic images are perfectly fine for a web site. In fact, when used appropriately they can provide significantly excellent improvements on an otherwise bland page. That is, if they are used appropriately. I’m first going to go over the technical aspects of each image formats. Don’t worry! I won’t write extensively long verbose paragraphs of the bits and bytes of the image formats (even though I will provide them). Then, I’m going to go over some pitfalls to avoid if you plan on including extensive images on your site. Graphics and flash animations are great additions to a web site, but can be very bad for Search Engine Optimization purposes.
While not every format is going to be gone over in explicit detail, I will go over the formats you are going to want to know about when you’re dealing with the web and how they are used.
Photoshop (.PSD) – These are original Photoshop files. Adobe Photoshop is the software that is used most frequently by web designers to edit photos and create mockups of web site graphics. Most web site mockups will be saved in this format. However, if you’re creating logos or other print objects such as business cards, you will want to use .PSD. The reason why is that the .PSD file will contain all of the color, channel, and layer information in an uncompressed format. The process of compression gets rid of the color, channel, and layer information and compacts the file into a format that’s ready for web download.
JPEG (Joint Photographic Experts Group) – This format was developed by, you guessed it, the Joint Photographic Experts Group. They are a group that develops quality standards for digital images. The JPEG format was one of the first formats to be developed to provide high quality, high color (16.4 million colors) images. They are used most frequently for photos and other images with high color saturation and rendition.
GIF (Graphical Interchange Format) – The GIF format is another compressed format. While it contains significantly less color information than JPEG (only 256 colors compared to the JPEG’s 16.4 million colors), it will render the images almost perfectly. The major thing that you want to be aware of when your designer is developing these images is to use a compression process that prevents lower quality on lower resolution monitors. Simply have them use the following GIF saving method in photoshop and you’ll be fine: GIF Options > Row Order > Normal (default for most all other options).
PNG (Portable Network Graphics) – The PNG format (pronounced PING) is known as the Portable Network Graphics format. This format is superior to GIF in that it includes alpha channels (variable transparency), gamma correction (cross-platform control of image brightness), and two-dimensional interlacing (a method of progressive displays) – at least it does according to the official PNG web site. PNG supports up to 48-bit TrueColor (superior to JPEG in that there is fully lossless compression resulting in no image degradation when compressed).
So when should you use these image formats?
PSD formats should be used when saving large image files and other web site mockups within Photoshop. This is especially so when working with files from your designer.
JPEG formats are great for photos, and should be the format of choice when you’re compressing a file from PSD to something smaller.
GIF formats are used when absolutely small file sizes are needed (such as in user interfaces and other graphics on a web site). This will provide for the best possible download speed for your web site visitors when optimized correctly.
PNG – basically the same as the reasons for using GIF above, just using a different file extension.
Should you include Flash multimedia presentations on a web site? Yes and no. While Flash can be an awesome thing and many of my past clients have wanted some Flash animations done, it is really bad for Search Engine Optimization purposes. The reason why is that search engines do not read the Flash files (or image files) and all they will see is a blank space. This is disastrous for those web sites that are attempting to provide value to the search engines, but the search engines won’t see it because of the fact there may be a bunch of blank space on the page. So what do you do?
For Flash, make sure that the Flash is located in a position on the web site that is read AFTER the content. If you recall from before, I mentioned that search engines read from left-to-right, top-to-bottom. So, create a table that provides the content in the left most table cell, with the Flash on the right most table cell. This will allow search engines to read the specific content FIRST (an absolute must) and they will index you accordingly.
Now, as far as images are concerned, if images are read as a blank space, how are search engines going to read what’s in the empty content? Easy. It’s called alternate text. Have you seen the beige text box that pops up when you move your mouse over an image? That’s called alternate text. Alternate text is the key to making sure that search engines know that an image is there. The best thing that you can do to help make your site more readable by the search engines is to include alternate text.in your images! Use keywords to describe the images. Such as: “image of product…selling for $2,000.00” instead of saying “Click here for product.” Using click here text, while it’s not inherently bad for the search engines, will be the bane of your potential client’s existence. Just make sure that you include keywords to describe the image, and you’ll be fine.
Top of Page
| 
