Dave's Site - Millions Served.
Confused about getting a
.com? Answers are here.

Dave's Web Design 
Tutorial & Guide: Tips and Tutorials

Web Design Guide: Tips and Tutorials

Design Chapter 04

Using Images and Video


Images

Images are the photographs, digital artwork, charts, etc, that you will use on your web site. But you'd make a huge mistake placing an image directly from your digital camera onto your web site. Before I explain why, let me give you the super quick summary of the three image types found on the web:

Web
Design Basics Dave has a New Course for your iPad!
Download HTML and CSS Web Design Basics Right Now!
Or Search for "Web Design Basics" in AppStore!
Web-design-1d


So, imagine you have a photograph from your digital camera. It's probably saved in JPG format. But the level of clarity in that photograph is probably made for printing the picture, and holds too much detail for a web site, resulting in lengthy Internet transfer times.

If you ever plan to print this picture, you will want to keep the original JPG in a safe place. Many people have a folder on their hard drive for photograph originals, and back up that folder to an external hard disk, flash drive, burned CD or DVD, or an online backup site. This is a very good idea.

But for the version on your web site, you need to re-save it for web usage. In Photoshop, this is often labeled, cleverly, "Save for Web & Devices." You can also use other software to re-save your digital photographs.

Back to the photograph. I took a photograph with a 4 megapixel digital camera at the camera's medium quality. It came to about 1.6MB ( 1,710,436 bytes). [ Yes, 1.6MB is more than 1,600,000 bytes, this isn't relevant to most of you, but if you need to know everything, click here to learn why.]

I opened the photograph in Photoshop. It is 2272 pixels wide, and 1704 pixels high. If you multiply this together, you get 3,871,488, or about 4 million pixels. If you remember our discussion from Chapter One about screen resolutions, even regular HD is just 1920 x 1080 pixels, so this photograph would look perfectly crisp and clear, if it were just the picture on the screen, with no web page surrounding it! But remember, we're typically designing for just about 984 pixels of width, not 1704 pixels or more!

Okay, let's see what we can do with this 1.6MB megafile. Let's assume we want it to take the full width for a full page display on a 1024x768 screen's web page. Re-sizing the photograph to our 984 width (1024 minus 40 scrollbar space) and Saved for Web brings our file to a small, slender 292 KB ( 295,480 bytes). About one-sixth of its original size!

That means it not only takes one-sixth of the disk space, but also transfers in one-sixth the time. And that's at a quality level of 85 in Photoshop. We can decrease it more, costing our photograph a little bit of quality, but we can shrink it 120 KB at a quality level of 60 and 65 KB at a quality of 40, yet the file still looks great for our screen. Saving this photograph at a quality of 40 results in a file one-twenty-fifth the size! If it took 25 seconds to transfer prior to saving, it'd take just one second now!

You'd still want to use the original JPG files from the camera if you were planning to crop for printing, but you should really optimize your photographs before placing them on your web site.

Please note that the optimized JPG photograph would be the approximately the same file size when resized with the same pixel width and height whether taken on a 5 megapixel or 10 megapixel camera, although the 5 megapixel camera's originals would be smaller. The 10 megapixel camera would allow for more accurate cropping and larger prints (Say, poster prints instead of 8x10s ).

Video

Just as with photographs, the AVI file that your digital camera takes is probably not the best format for web usage. Here are some of the major players:

Video Compression

Videos should be compressed before placing them onto a web site. As of writing (2009), it's best to keep videos to under about five minutes in length.

A two-hour DVD can easily take up to 5GB (5,000+ MB) of disk space, but compressed to some advanced formats such as MPEG-4, it can fit into under 0.7GB (+/- 700 MB), allowing a two-hour DVD movie to fit on a single burned CD. These advanced formats are what make online movie rentals and downloads possible. The quality is great, but downloading the movie takes significantly less time (although still measured in minutes even on fast broadband connections, not the seconds most people dream of).

Before posting your videos online, please please please read how "bandwidth" on the Internet works in the next chapter, Understanding Bandwidth, Transfer Usage and Hosting. Ignoring your "transfer usage" could end up costing you a lot of money.

continue to next chapter >

davesite.com home ----- Copyright © 2009 dave kristula. all rights reserved.