When speaking with people at the early stage of their design education one of the most frequent questions I get is “What is with all the file formats, how do you choose between .gif, .jpg, .png and and .psd”  This is essential knowledge for any designer, the quality of your work and the end result rides on choosing the right format.  If you choose the wrong format your overall presentation will be greatly affected.  You are compromise file size, pixilization and loss of quality. There are many files that Photoshop can output but we really are only concerned with these four.

Quality vs. Size

When designing for the web we want the smallest size possible, making your site load faster. You also want your images to look good. So… you need to find a balance between having a clean professional image and having a small enough file size.

Bitmap Images (General term for raster images)

Bitmap graphics are the most common graphic format (and the above mentioned formats fall into this category) used in web development.

Bitmap graphics are composed of pixels, each of which contains specific color information. A pixel is small; a single image may be composed of hundreds of thousands of individual pixels.  Much like being in high school science and looking at a piece of cork under a microscope, these pixels are only clearly and individually visible when the image is magnified.

Magnification

As we discussed in a previous posting, A graphic composed entirely of pixels each with its own color properties is ideal for photographic images where there are thousands, even millions of different colors.  Solid colors, shading and gradient effects can easily be rendered.

In Bitmap graphics, there is a connection between pixels and the image they compose. When a Bitmap graphic is saved, the computer is really saving an exact visual picture of the image: this pixel goes here and is this color; this pixel goes there and is that color until it creates an image

When attempting to enlarge these images… the computer must add in extra pixels to the original image to allow it to fill the new larger area.  Since there is no real source for this information, it must be generated and expanded based on what is currently available in the image. Because of this Bitmap images that have been scaled larger are frequently blurry. After extreme size increases, individual pixels “blocks” are more pronounced, pixilating the image.  Once the image is enlarged it will never be as clear as the original.

Image Resizing

GIF - Graphics Interchange Format – Images using a fixed color palette (limited to only 256 colors – not the  full spectrum of colors available to your monitor). The GIF format uses compression for smaller files and faster downloads.  This format is best for images with solid uniform areas of colors like illustrations and logos.

JPEG - Joint Photographic Experts Group – Used for photographic images, gradients and complex color patterns. JPEG images make use of the full spectrum of colors available to your monitor including all the shades and subtleties inherent in it. This format uses a built in compression to create smaller files resulting in faster downloads.  However, unlike the compression method used in GIF files, the JPEG compression is “lossy” which means it discards data in the process. Once a file is saved in JPEG format the data is permanently lost.  IF you plan on using the images at different sizes and compressions it is best to set it to “lossless compression”.

PNG - PNG is one of the newest web graphic technologies. PNG is great for quality and file size. You have the best of both worlds in a PNG.  The biggest bonus is that PNG supports transparent backgrounds. The only downside to a PNG file is that the previous generation of web browsers don’t support it.

PSD – Photoshop’s native format, stores an image with support for most imaging options available in Photoshop. These include layers, masks, transparencies, text, channels, etc.  It is an uncompressed file format, this is in contrast to many other file formats (e.g. .EPS or .GIF) that restrict content to provide streamlined, predictable functionality.

We have all been there, just starting out and trying to figure out what makes the best site.  All too often the answer that we come up with is, “throw everything in..they will love it !”

In 2009 there can be nothing further from the truth.  True, many of the mistakes that are made today are the same as 5 years ago…the difference is that its 5 years later and the same mistakes are being made!    The sad truth is that these mistakes are not only the folly of rookie designers, but also many experienced, seasoned designers as well.

Flash Intros
There are those who refuse to Flash at all, that it is the bane of the webs existence, I don’t necessarily agree.  I think Flash has its place, and if done elegantly the added value can be huge.  The one place NOT to use Flash is for an intro/splash screen.  The hey day of this fad is about 3 years ago and the backlash has been immense by many traditionalists.  The reason most developers throw it in to the package because they can make extra money with it, plain and simple.  It ruins SEO, it slows down load time (even on broadband) and causes the casual viewer to bolt, never bothering to see the rest of the site.  Don’t be one of those people.

Too Many Ads
In one word, tacky.  It says to the user that all they are to you is a revenue stream, with no other value. When you’re trying to make money from your website, it’s all too easy to try to fit in more ads than you really should, or start using ad formats that are in the way of the overall message.  If a user can’t find your content or message, he may click on the ad once, but he won’t be coming back to do it again.  Sometimes less is more

Scrolling Text and Animations
This is where the beginner goes on overload.   The novice client thinks this is what they want and the designer goes overboard.  Too much movement on a website is a horrible idea.  If its bad for the eyes then it is horrible for your message.  Everything gets lost because you are too busy looking at the dancing babies and rotating pictures.  A web page should never look like Times Square.  Give the user the chance to actually read the content!

Out of Date Content
It is sort of like your neighbor who has their Christmas lights up in July.  When you go to a site that has content that is clearly out of date, you know they have totally forgotten about their website and its audience.  Time sensitive content that has not been updated for a long time is the quickest way to lose a potential customer.  It is almost  certain that there won’t be repeat visitors.  If the site isnt important to you, then why should it be to them?

Jumbled Layout and Navigation
Way too many websites have yet to learn this important lesson, but strangely enough it  is one of the simplest  to achieve.   Rule to live by : You should be able to get to every page within two clicks, from any other page on your site.   If the user can’t find what they are looking for, they are not going to stick around.  I am not saying don’t have a unique navigation; that is fine.  Be as unique as you want, but don’t make it a struggle to find everything.  Links need to be worded clearly.  It is not worthwhile to be cute and give off the wall names for standard links.  It just annoys the visitor and makes it harder for them to find what they are looking for.  Content should be seperated and given ample space.  If content is too close together and the same size/color it will be too  hard to read.

Most sites should not need a search function.  For the really important things put them on the front page and showcase them.

Jumbled Layout

Broken Links
Perhaps the most annoying thing is to click on a link and have it take you to an error page.  It is probably the quickest way to have interest lost in your message and content.   You’ve got to check your links regularly to make sure that they still work.  It would be a shame to find a site that you think is useful, only to find that it hasn’t been updated in years and none of the links work any more.

Bad Color Pallete
The color pallete you choose for your website is very important. It is well known that colors do effect a person psychologically, so you should choose your palette with that in mind. It is best to avoid using very large areas of bright colors like red, yellow, orange, and bright pink because they tend to be hard on the eyes.

As I discussed in this posting , spend some time and find the right color pallete for your website.

Busy patterns in your backgrounds
Busy backgrounds are very distracting to the eye and scream of the early days of the webt.  Just about antyhing you put on this loud background will get lost…especially if it’s text. Stick to solid colors, soft gradients, or subtly patterned backgrounds.  It will do the same thing to your eyes as the scrolling text and animations.

Obscure Fonts
Its advisable to stick with the most common web fonts :  Arial, Georgia, Tahoma and Verdana.  Anything else and the visitor most likely won’t have it loaded and therefore won’t be able to see it properly.  Additionally, these are the usually the cleanest and clearest to read on screen.  If you want to be creative, then you can use non-standard fonts is in your logo or in headings, if they are displayed as an image.

Page Consistency
It is vital that each of the inside pages run off of a similar design template and they in turn reflect the homepage.  It doesn’t help when you click from one page to the next and you are not sure if you are still on the same website or not.  If your design isnt consistent how can your message be?

Like many people,  my first experience with an “image editing” program was Microsoft Paint.  It was with that program I learned what a pixel was and what happens when you put 100′s of those little guys together.  As we all know, it makes a picture.   Any type of picture actually, from a person to an exquisite sunset over the Grand Canyon, your only limit is your creativity.    But how does that technical fact translate into the world of high end graphics, with images that make you wonder if they are photographs or digital renderings of events that never took place.   Lets take a closer look…

Pixels
Pixels are measured per inch, or “ppi.” The resolution or sharpness of the picture increases as the number of pixels increase. Seventy-two ppi is fine for an image to be viewed only on a screen, but if the piece is to be printed, a minimum of 300 ppi is required. Increase in resolution means that each pixel is much smaller in size.

Raster
pixel based graphics – most images, photographs…Photoshop created files, jpgs, gifs…when you drastically change the size of these images, they start to become blurry and “pixilized”   This happens because you are expanding each 1×1 pixel beyond its intended size

Vector
Graphics created in programs like Illustrator that are mathematically based drawings (points, lines, curves, and shapes or polygon) that can expand and contract without losing quality.  These files are best used in print and in Flash.  Both formats rely on expansion of dimensions.

When designing for the web,  you will on occasion use vector graphics but the majority of your work will be done in photoshop and therefore be using raster graphics.