Website Sample:  Navigation Bar on Top

Some experiments with Image Sizes

In this lesson we look at:

First get an overview of the issues involved here, then come back later and look at some of the details of how these pages are coded. By looking closely you'll learn tricks which will help you when coding your own pages.

Let's look at the overall website design starting with the Home Page. As you look at this page notice:

Now to see what we're taking about, take a look at a draft of this style website. Before going on and clicking on the buttons, come back to this page and read on.

Home Page Sample

This draft was created on September 30, 2003. Check out the Maine Photographics website to see how the final version looked.

Next let's look at the issue of what image size to use in photo pages. There's no simple answer to this question. It depends on the people viewing your website and the resolution of their computer screen, what their needs are, and what your goals are for your website. The larger the images, the more storage you need for your website and the longer it takes your viewer to download pages. This is not an issue for people with cable modems and DSL lines, but over a dial-up line it becomes a big issue. If it takes to long to load a page, your customer may abandon your site for another.

In this case, Maine Photographics wanted large images to make an impression. However, since their business is selling images they didn't want to make available high quality images people could steal. They assume that most of their clients have high resolution monitors so we only looked at three alternative sizes: 640x480, 600x450 and 560x420.

If you go Retail, Advertising and Commercial tabs you'll see an example of each. Look at each with a screen resolution of 800x600, you'll notice that even the larger landscape images (ones which are wider than they are high) have trouble fitting on the screen along with a caption in the space most browsers leave for viewing pictures. Even a screen running at a resolution of 1024x768 can't show much more than a 420x560 portrait image in its entirity. Different browsers have different tricks for making more of the screen available to view the page (in Internet Explorer, try F11).

In the end Maine Photographics decided to go with images which were 560 in the maximum dimension. In addition to screen size other factors in this decision were image download time and only making public smaller images.

Look at those three tabs of the Home Page Sample which may still be active in another window. We'll look at the Stock Tab later.

View them at different screen resolutions. View them in different browsers if you have more than one. (If you're going to be designing web pages, I recommend you install at least a second browser.)

Did you understand all the comments on these pages? They are important to you as a web page designer. Did you notice the experiments with type size and face on the "Commercial" page? You need to do experiments like that on your own pages to pick the best type for your page. As you saw a standard size type was hard to read on the gray background. I think Maine Photographics decided to use standard size type, but made everything bold.

Speaking of background. You want to be careful if you choose a color for the browser to generate. You want to choose what's know as a non-dittering color ...
(A Work in Progress) Resources

    For more information E-mail:
          wren AT

(E-mail addresses appear as graphics to help minimize spam.)
Visits since October 4, 2003: