PHOTOS & GRAPHICS

Home Up Attached Files&Email Converting to HTML ZipFiles Exchanging files PHOTOS & GRAPHICS PCSupportTips

PHOTOS AND GRAPHICS FOR THE WEB

Although graphics can add interest and color to a web site, if improperly used they will annoy surfers and dramatically cut down traffic and results.  Many people need tutoring on using graphics, let alone in using them on the Internet.   Photos that people typically take with cameras, have much more information, or resolution, than is needed to see them properly on the Computer Monitor.  Since all the information on the Computer is "Digital" we have to send a lot of information which we do not really need if we use all the information in the photo itself.

For Example a 3x5 photo scanned in at high resolution could be 4 megabytes (4,000,000 bytes) or more.  To send this photo like that would take 20 minutes or more!   Imagine waiting 20 minutes just to see a page with a photo on it!

Even photos highly compressed can be were 126,000 and 184,000 bytes. It would take the average browser over 3 minutes just to load these photos.

Size for photos in inches is irrelevant for the Internet. They need to be judged by Pixels and Resolution. Pixels are the dots on your screen and DPI or Dots Per Inch x Inches gives Pixels. Since most screens are set to show 640 Pixels wide x 480 Pixels high, or 800 x 600, no photo should be larger.

Thus total photo size should be judged in pixels and should be only about 400 x 500 pixels or less. They will still look very nice on the screen.  If you want to display several on one page they should be smaller in order for the page to load in a reasonable time.

Another important thing is the resolution that is used. For printing resolution is often set at 300 or 600 dots per inch, or even higher. For the Internet People see their photos on their monitors, not printers and printer monitors require settings no higher than 72 (or 75)DPI (dots per inch).

If you are scanning in your graphics make sure you set up your scanner for these "Low Settings", or redo them before sending them to the web. There are also several programs which allow you to "Resample", which means it will shrink them in size. Resample down to 72 DPI and pick either the length or width so that the maximum is 500 pixels wide or 400 high. You may have to change the units to Pixels instead of inches. Whoever makes your graphics needs to scale them down accordingly.

One other thing is how you save them. You should save color photos as a jpg, which is a particular type of graphic which can compress a lot of photo in a small package. Usually when saving you have an option of how much to compress. Usually you can keep the setting above 30, and often as high as 60 without significantly impacting the image noticeably on the screen. You would see the difference if you printed it out and magnified it, but you are not doing that!  Once you are done look at the photo on your screen.  You can get a program called PaintShop Pro on the Internet free for a month trial.  This program is very good for resizing photos and doing other graphics.  You can also buy programs like Corel Photo Paint, or Adobe Photoshop to reduce the size of photos and to touch them up.  If you do not want to spend the time, just get a friend or a store like Kinkos to Scan the photo in for you, one at high resolution for printing if you like, and another low resolution with high compression for the web!  If it is right is should be less than 60K, and ideally 30K or less!  Then it will load in seconds and look good too!

Also remember when using graphics files in HTML documents, HTML only links to a graphic file, they are not included in the HTML as part of the file.  When transporting HTML files any referenced graphics must also be moved.

Sample of a jpg file, Fog in the Colorado Rockies, the first file is only 1 kb, but is tiny,

 this file is 61 kb, and loads rapidly but still looks nice.  Both are jpg files.  Note windows normally hides extensions for you, but if you enable viewing extensions for known file types you can differentiate between different types of graphic files.   The upper file is enclosed in a table, which can have a colored frame, etc.  The latter is not.

Ray Merry

 

Home Attached Files&Email Converting to HTML ZipFiles Exchanging files PHOTOS & GRAPHICS PCSupportTips