tips on making your own pet home page

home

search

site map

Introduction

Scan your pictures at 75dpi

Resize your pictures to 4-5 inches

Save your pictures as j-pegs

If many pictures create a photo gallery or use thumbnails

Avoid resizing pictures with HTML or HTML editors

Crop your photos for better appearance and faster download

Download time calculator

Recommended software

Recommended links


Introduction

Most homepages have a picture of their beloved pet along with an introduction.  For example, visit Sandy & Pokey's Page.  You can see pictures of both Sandy and Pokey along with a short introduction for each including their favorite foods.  Sandy & Pokey's Page also has links to more pictures of each dog as well as links to other sites of interest.

How to make your web pages load fast:

Be polite, don't make a web page that will take unusually long for your visitors to see.  Visitors will surf elsewhere if your page takes a long time to show up on their monitor.  Pictures are the major culprit for slowing down a web page.  In addition, animations, music files and banner ads slow down your web page.  Most persons surfing the internet have dial-up connections (more than 90%) and are limited to slow download speeds.  Keep all this in mind when making your web page.

Tip 1

Make sure and scan your pictures for your web page at 75 dots/inch (dpi). Why? Most computer monitors only have a resolution of 75dpi. If your pictures are scanned at greater than 75 dpi, the pictures will not appear any sharper to your visitors but you will make them wait longer while it downloads because the file size is so much bigger.

Tip 2

Make your photo a reasonable size.  Since most of your visitors will have monitors set at 800 x 600 pixel resolution, make your photos no larger than 4 to 5 inches.  Making photos larger than this may make your visitor scroll up and down, left to right to see the whole picture.

Tip 3

Make your picture web compatible.  Save your picture as a .jpeg or .jpg. The j-peg format automatically compresses the file size of your picture for internet use.  It's still possible to have large file sizes with j-pegs. To learn more about j-pegs and how to optimize them click here.

Tip 4

I'm Gabby! Click my picture!
thumbnail example

Does your web page have lots of pictures?  Having lots of pictures will really slow down your page. Consider placing only one or two pictures on your home page.  If you have more, consider making a picture gallery page like the one on Sandy & Pokey's Page.  Another option is the use of thumbnails.  Thumbnails are small versions of your actual photo (both in viewing size and file size).  Thumbnails give your visitors just enough information of what the picture is about.  Clicking on the thumbnail takes your visitor to the full-sized picture.  You can have a web page filled with thumbnails and still have your homepage load fast.  For examples of pages using thumbnails see Gabby's New Picture Page.

Here is a web page that could have benefited from both picture galleries and thumbnails:  Jumping Spiders.  There are 60 pictures on this page which causes the page to load over several minutes.  In fact their are so many pictures that it would be a good idea to create several galleries perhaps by classifying the spiders by size, region, or characteristics.

Tip 5

picture as appeared on web siteIt's best to size and save your pictures just as you intend them to appear on your home page.  Have you ever come to a web page and waited forever for its pictures to download?  Take for instance this picture I came across on the web.  It seems like a small picture and should download rather quickly.  But it didn't because this picture was actually 119K.  Programming language called HTML made this large picture appear small.  This is how the pup's picture actually looks (click here) without any HTML.  Programs used to make web pages, called HTML editors (i.e. FrontPage), will let you resize a picture's appearance on a web page without changing the actual file size.  In FrontPage, use the resample button after you resize a picture otherwise the picture will not be optimized.  Save your visitors the wait by using pictures that are already saved into their intended size.  Don't make them download an over-sized file.  This picture's file size was 10 times larger than necessary.  Additionally, you needlessly waste valuable space on your web server if your pictures are not optimized.

For example, here is a web page I created by improperly sizing pictures with FrontPage.  Be forwarned, it takes over 5 minutes to download with a 56K modem:  The Wrong Way.

Also notice how resizing a picture may change its proportions.  Look at the picture below (actual proportions) and you'll notice the picture above is distorted making this pup look very thin.  For your convenience, the above picture was optimized on this web page.

Tip 6

Coby's picture is courtesy Linda Lathrop.Cropping.  You'll notice in this picture that I trimmed the edges.  Although this picture is the same height as the one above it, the pup appears larger because the space around him has been trimmed.  We're not really interested in the background anyways (unless it was part of a scenic vista).  Cropping also creates a smaller file size.  This picture will take 3 seconds to download on a modem running at 46.6K.  I also took the "red eye" out using Paint Shop Pro.

Coby's picture courtesy of Linda Lathrop.

Download time calculator

file sizeK
time*secs

Use this calculator to estimate how long it will take to download a picture, animation, or music file.  For example, enter 100 as the file size then click compute.  The answer will be displayed in seconds, in this case 18 seconds.

You could also add up all your files (pictures, etc.) to estimate how long it will take your home page to download.  There is no set standard but some authors recommend your web page should take no longer than 30 seconds to download.  

Recommended Software

FrontPage (trial version)--FrontPage is perfect for beginners creating web pages.  I used FrontPage to create this very page.  Includes features for customizing photos and creating thumbnails.  FrontPage will automatically tell you how long it will take for your pages to download.

Paint Shop Pro (evaluation version)--An excellent program for editing pictures.  Beginners may experience some difficulty at first using this program but the program includes a thick manual and a tutorial on the CD.  Even if you scanned a picture at 150 dpi or used a digital camera, this program will let you change the picture to 75 dpi or change it's dimensions.  This program includes a built-in j-peg optimizer which lets you vary the compression level, preview how the picture will look, and tell you how fast it will download.  Once you get the hang of it you'll want to use it on all your pictures.  I recommend Paint Shop Pro because it gives you the most flexibility to edit your photos at a price of $110.00 dollars.  Compare this to PhotoShop which also edits photos but costs $610.00 dollars.  List of features.

Recommended Links

Web Design Basics--Get an overall view of how web pages are designed.

J-pegs--A web page with information on j-pegs.  Learn how to increase and decrease j-pegs file sizes.

OptiView--Here's a web site that lets you type in your home page URL then tells you how long your home page takes to load.  Also lets you know which pictures are over-sized and automatically compresses them for you.  All this is free but offers more for $20/month.  If your new to photo editing, this might be a "quick fix" for your home page.

FrontPage Tutorial--An excellent website for learning FrontPage features.

Paint Shop Pro Tutorials--Get photo editing tips for Paint Shop Pro software.

*This calculator is based on the typical connection speed of 46.6K on a 56K modem. For various reasons 56K modems don't actually connect at their maximum speed.

This web page is best viewed at a 800 x 600 screen setting.  Last modified 5/1/02

 manuelsweb.com

home ] my cocker spaniel ] cocker home finder ] pc & web for beginners ] nursing ] site map ] links ] guestbook ] e-mail me ] [ cocker spaniel ring ]