One of the most important tools you’ll need if you’re maintaining your own website is a good WYSIWYG (What You See Is What You Get) website editor. The big dogs in the website editor world are Dreamweaver and Expression Web…but they are by no means the only game in town.

Smashing Magazine has posted a review of 25 WYSIWYG Website Editors for Windows and Mac. In addition to the popular editors, the reviews also include free editors if you have a limited budget. Check it out here.

Here’s another question that I got about websites from my Ask A Question feature. John is asking about why his website looks different on different browsers…

Hey heres my question. I finished building my website and it looks fine on my computer, but when my friend looks at it the top is all messed up. He’s looking at on using IE6, but it looks fine when I look at it on my computer. I use IE7 and Firefox. What’s going on? Does it look like this when everyone sees it. Any help would be great.

Ahh…browser differences…the bane of every web designer’s existence. Here was my reply.

Hi John,

This is is not unusual at all, in fact it’s pretty common. If you look at the same web page on two different browsers, say Internet Explorer (IE) and Firefox, it’s not usual to see differences in how the web page looks. You can even find differences in different versions of the same browser. Older versions of Internet Explorer can display the same web page very differently than the newer version. You can even see some differences if you’re using Internet Explorer for PC and Internet Explorer for Mac. Which explains why when someone is looking at your website using Internet Explorer 6 they see the messed up header as opposed to someone using Firefox who will see your website perfectly.

Internet Explorer in particular seems to be especially bad about this issue. Most of the newer browsers like Firefox, Opera, Mozilla, and Safari all follow a set of standards in how they display web pages, which makes them fairly consistent when in comes to viewing and designing web pages. Unfortunately, Internet Explorer doesn’t always follow these standards, which is one reason why you get these differences.

What makes this even more difficult is that Internet Explorer is also the most popular browser in use on the Internet, so you can’t really ignore it. Fortunately, more standards compliant browsers like Firefox like are becoming more popular and supposedly the newest version of Internet Explorer, which is version 7, is more standards compliant than the older versions of IE. But there’s still a lot of people that use older versions of IE, so you or your designer needs to be especially careful about looking at your website using different browsers, on different computers, and looking at your website using different version of of the same browser.

One easy way to check to see what your website looks like on different browsers is to go to a website called Browsershots. There you can enter in your website address and then you’ll get screenshots of your website in different web browsers. It’s a free service and you can check it out at: http://www.browsershots.org

As for your website, if you had a designer build your site for you, drop them a line and tell them that your site needs to be fixed for IE6. Most designers should be familiar with these issues already. If you’re building your own website, here are a few articles that can help you:

• Explorer Exposed!
• Designing for IE - Design for Firefox First
Designing for Every Browser: How to Make Your Site Fully Cross Browser Compatible

These links might be a bit geeky but they should help you if you’re already familiar with web design.

Good Luck!

Do you have a burning question about websites or promoting yourself online? Click on the “Ask a Question” tab at the top of the page and send me your question. I’ll send you an answer to your question personally.

This is second in a series of posts about digital images. The topic of this post is about resolution and file size

In the last post of this series talked about the different types of image formats that you can use on the web. In this post, I’ll explain the concept of image resolution and file size and what it means for your images.

Simply put, image resolution refers to the amount detail a digital image has. There are several very technical ways to measure resolution, but the way that’s most useful for you to remember is known as “pixel resolution”.

All digital images are made of little squares called “pixels”. You can see individual pixels by zooming in close to an image like this one below…

Here’s what the image looks like at normal view:

Each pixel helps makes up the whole image. Resolution is measured by how many pixels there are in an inch of the image. So if there are 100 pixels in every inch, that image has a resolution of 100 pixels per inch or 100 ppi. (You may also see the abbreviation for resolution as dpi or dots per inch…no matter the abbreviation…for our purposes it’s pretty much the same principle) The sharpness or the detail of an image depends on its resolution. The more pixels you have in an image, the sharper and more detailed your image will be. So an image at 300 ppi will be much sharper and more detailed than an image at 72 ppi because when you’re lowering your resolution, you’re essentially getting rid of pixels. The less pixels you have, less detailed your images are.

So! This means that the higher the resolution the better for your website, right? Not so fast! When it comes web images higher resolution is not always better. Why? This has to do with “file size”. File size is basically how big in kilobytes, megabytes, or gigabytes an image file is. Don’t mistake image size (which are the actual size dimensions in height and width of an image) with file size. They are two different things. The file size of your image is affected by a number of things, the file format (JPG, GIF, or PNG) the dimensions of your image (the bigger the dimension of an image, the larger the file size), and the resolution. Those images with higher resolution are as a rule larger than the same image, in the same file format as those with lower resolution.

Okay, so what difference does that make? Actually, quite a bit as far as your website is concerned. This has to do with how information is transmitted on the web.

Imagine that the Internet is a series of pipes from one your website to your computer and your image file is like water traveling through those pipes. In order to see your image on your computer screen, it has to travel those series of pipes from your website to your computer.

How fast water travels through a pipe is mostly dependent on two things: 1) the size of the pipe, and 2) the amount of water traveling those pipes. If you have a big pipe, that water zips right through because the water has more room to travel. If you have a small pipe, the water takes a lot longer to travel through because there’s not as much room in the pipe. That’s kind of how it works on the Internet too. This is a concept called bandwidth, which is the amount of data that can travel along a connection. Dial-up connections are like small pipes, data comes through slower because it can’t handle a lot of data at once. The bigger pipe is like your cable modem or DSL line. It’s faster because it can handle a lot more data at once than a dial-up connection can. So how fast a person can load up your image on their computer depends on their “pipe” or on what Internet connection they’re using.

But wait! There’s another part of the equation isn’t there? That part is the amount of water going through the pipe. Image that the amount of water traveling through the pipes represents how big your image file is. An image with a large file size has a lot more water that has to get through those pipes than an image with a smaller file size. That means if your image has a high resolution, it will have a higher file size…which means that it’s going to take a lot longer for that image to load up on your website.

Plus, you must take in account more than just one image. How fast a web page loads up depend on all of the elements on the page…that is the file size all of the graphics on that page and the file size of the HTML page itself.

Now, you can’t control the size of the “pipe”. Rather, you can’t control whether your visitors use dial-up or high speed Internet to surf your website. But you can control the “water” or the file size of your images. One of the ways of doing so is by picking the right resolution for your images. The optimal resolution for the Internet is 72 ppi. Anything lower can decrease the quality of your image. Anything higher won’t increase the quality of what you see, but will increase the file size. So stick to 72 ppi.

By the way, if you are planning on using some of your images for print purposes, say you want to create print catalog or brochure, or you want to have some digital images on hand for PR purposes, you’ll need to have two versions of that image. A resolution of 72 ppi is great for the web and terrible for print because at 72 ppi you eliminate a great amount of detail and results in a fuzzy printed image. This also explains why web graphics looks so lousy when you print them out. At minimum, your images should be about 300 ppi for print…at minimum. If your images are going to be used in a glossy magazine or for high quality prints, they’ll need to be at an even higher resolution than 300 ppi.

You should also remember that you always size your images down, not up. Don’t attempt to take an 72 ppi image and change the resolution to 300 ppi. Once you save an image at a lower resolution…all of that detail you got at a higher resolution is gone forever. Raising the resolution won’t bring the detail back and it will just result in a fuzzy image. The same thing goes for changing the size dimensions of your image. Don’t take a 100 by 200 pixel image or a 2 inch by 3 inch image and convert it to a 500 by 600 pixel image. Again, the detail is gone once you save the image at the smaller size.

Remember…always down…never up.

Next week: Changing the resolution isn’t the only way you can control the file size of your image. Next time we’ll dive into the wild and woolly world of compression.

Digital images come in a number of different formats and each are good for different purposes. There are special formats for printing, special formats just for the computer screen, and special formats good for the web. For the web, there are three different formats that you need to be familiar with; JPG, GIF, and PNG
Image Formats for the Web

JPG- (pronounced, “jay-peg”) this image format is short for Joint Photographic Experts Group. All images that are in a JPG format end with .jpg or .jpeg. As you might have guessed from the name, the JPG format is used for displaying photographic or “true color” images. So any image that’s scanned from a photo or slides must be in JPG format. If you are taking pictures with a digital camera those images will be in JPG format.

GIF- (pronounced “Gif”) this image format is short for Graphics Interchange Format. All images that are in a GIF format ends with .gif. Unlike JPGs, which can display millions of different GIFs can only display a range of 256 colors. Because GIFs only display 256 colors, GIF files tend to be smaller than JPG files and will load up faster on your web page. So GIF are best used to display images that have a limited range of colors, like non-photographic logos, animations, buttons, and icons. GIFs can also be used when you need part of your image to be transparent (I’ll discuss transparency in later posts).

PNG - this image format is short for Portable Network Graphics. All PNG images ends with .png. The PNG format was specifically created for the web with the purpose of replacing the GIF format. Unlike the GIF format, PNGs can display a much deeper range of colors and PNGs can also handle transparency better than GIFs can. Unfortunately, not all web browsers can display PNGs and all of it’s features properly.

What to use
When it comes to picking the right format for your images use these simple guidelines:

• Use JPGs for photographic images
• Use GIF for images with simple colors like buttons and logos
• Use PNG for simple non photographic images that have elements like color gradients, drop shadows, and transparency

One of the biggest mistakes I see in those just becoming familiar with designing for the web is using the wrong image format for the type of image.

Here’s an example of using the GIF format on a photographic image….

Not pretty huh? Remember that GIFs can only display 256 colors. If the image contains a color that the GIF format can’t display, it will replace it with the closest color available, which results in these bands of color throughout your image.

Here’s the same image in JPG format.

…much better.

You don’t see such a dramatic difference when you save what’s supposed to be a GIF type image as a JPG, but there are still problems.

Here is the blog’s logo in JPG format…

Here’s the blog’s logo in GIF format…

When you look closely at the JPG image, notice that there appears to be some fuzziness that you don’t see in the GIF format. These are known as “compression artifacts” and it’s a result of how JPG formats saves images. I’ll explain the process of compression in later posts on this series, but bottom line is, when you’re saving images in JPG format, you’ll always have to be aware of these compression artifacts.

Next time:
I’ll discuss image resolution and file size and why you should care.

All experienced artists knows that it’s absolutely essential to have good images of their work. We need good images to jury into shows and exhibitions. We need good images to get into stores and galleries, and we need good images to make marketing materials like press kits, brochures, and catalogs.

So it should be not surprise that the one element that’s essential for an artist’s web site are the images of his or hers work. Unfortunately, a lot of artists don’t really understand how to format their images properly for their web sites. As a web designer, I get a lot of questions about digital images and formatting images for the web. Every Thursday for the next few weeks, I’ll be blogging a guide to digital images for absolute beginners, about the different image formats, about resolution, and how to optimize your images for your web to show them in the best possible light.