Web design questions answered
How do I make an attractive page that downloads quickly?
How do I make an attractive page?
How do I reduce download times?
Which graphic format should I use?
How do I allow visitors to upload an image to my web site's database?
Can you provide ASP (.NET) code to do...?
Is there another question you wanted to ask, that isn't listed above? If so, please check the other FAQ pages if appropriate:
Otherwise, please enter it in the box below. If you require a personal answer then please include contact details. Thanks.
Chris Cheers
How do I make an attractive page that downloads quickly?
To do this question justice I've broken it into three parts: How do I make an attractive page?, How do I reduce download times? and Which graphic format should I use?.
How do I make an attractive page?
This requires some kind of artistic appreciation, which of course is different for every individual... As an engineer I like to believe that beauty is function, and so aim to design functional pages in the hope that they also prove attractive (judge for yourself). Ask yourself: What is the aim of this site / page? Does this feature contribute to that aim? This helps to remove unnecessary clutter, which also helps download times. Example: until this update there were no graphics at all in the main conent of this page - now there are just the five images below, added to demonstrate the use of different image formats.
How do I reduce download times?
Try these three suggestions:
- Reduce the number of files required - Consider which elements of the page are really needed (as above). Also, do you have graphics that show only text? This allows you to use special fonts and other effects, but if you can replace them with HTML and CSS you will save a lot of download time.
- Reduce the size of each file - This applies particularly to graphics and other multimedia files, which are usually much larger than the text files that go to make up the page. Start by choosing the optimum size for each image - generally as small as possible while showing enough detail. Choosing the right format can make a huge difference to image file sizes too - see next question.
- Use the browser's cache - After an image or other file has been downloaded for one page it will normally be stored on the local hard disk, so if the same image is used on another page it can be retrieved much faster. If you have two images used on different pages which are almost identical, consider using one common image and two (much smaller) ones containing the differences. Or use a single image in the background of a table on both pages and superimpose different text on it (even better).
Which graphic format should I use?
Graphics on the Web are always a compromise between file size and image quality, but by correct choice of file format you can make a big difference. You will need a graphics program capable of converting between different formats and manipulating the images to best effect, such as Paint Shop Pro (shareware version available from Jasc or any magazine cover disk) or Adobe's Photoshop (also available as shareware). Alternatively upgrade to Linux and get the wonderful Gimp for free!
For images with subtle variations of colour, generally photographs, "Jpeg" is the only format to use. This is a compressed format which dramatically reduces file size, and you can adjust the degree of compression to achieve the best compromise between file size and image quality. One word of warning - this format is lossy ie. when saving your image you lose some detail for ever. Always keep a backup copy of the image in a loss-free format (such as a bitmap) and when you want a new version of the image, work from the backup and save as "jpg". The image right shows correct use of a Jpeg image (25% compression). File size is 3785 bytes.
These images show incorrect use of a palleted (gif) format for a photographic image. Left, using the web-safe pallet, only 39 of the available 215 colours are in use. File size is similar to Jpeg (4655 bytes) but for most viewers quality is poor. Right, using an optimum pallet (256 colours) file size is over 10k!
Images with just a few distinct colours, and large areas of identical colour (eg. company logos) will benefit from a palletted format. One of the colours may be transparent, allowing the background to show through, which allows the shape of the image to appear rounded or irregular (all Web images are really rectangular). There is a maximum number (normally 256) of colours that can be used but file size will be greatly reduced by using a smaller pallette. Ideally the 215 colour "web-safe" pallet should be used, although the need for this is diminishing as most computers now use at least 16 bit colour depth. The traditional palletted format is Compuserve's "gif" but "png" (a technically-superior open source format) is gradually replacing it.
| Correct use of a palleted (gif) image - note the clear colours. File size is 806 bytes. |
|
|
Incorrect use of a Jpeg image - note how the colours bleed. Despite 50% compression, file is 1531 bytes, almost twice the size. |
Animations traditionally used Compuserve's "animated gif" format, which is raster-based, like a movie - each frame is an individual image, so file size can get very large. File compression helps by saving only the differences between successive frames, but even so this format is only useful for short animations of relatively small images. It is typically used for clip-art images such as animated mailboxes and spinning globes - pretty (in some cases) but not useful and very much an outdated cliche...
The modern standard for animation is Macromedia's Flash format and its successor Shockwave. This is so much the standard that it has been distributed with browser updates since both Microsoft's and Netscape's version 4 browsers, in different versions. For maximum compatibility you should provide a non-Flash alternative and if you don't need the latest facilities, try using the earlier Flash 3 or 4 formats. Flash is sadly abused by many web designers who seem to be trying to demonstrate their own cleverness rather than their client's products, but it can be a very efficient method of communicating complex information - see the Dyson web site for some superb examples. Here's one we did for International Magnetic solutions:
How do I allow visitors to upload an image to my web site's database?
Uploading files (images or any other type) is a part of the CGI (common gateway interface) standard, so is supported by most programming languages that process web forms. We use Perl and its built-in module Perl::CGI. A Perl program to upload an image file and save it in a file on the server would look something like this (modified from the Perl documentation):
#!usr/bin/perl
use CGI;
$q = new CGI;
print $q->header;
print $q->start_html('File Upload Example');
print $q->start_multipart_form;
print "Choose a file: ";
print $q->filefield( -name=>'uploaded_file');
print $q->submit;
print $q->end_form;
if (param('uploaded_file')) {
open (OUTFILE,">>/usr/local/web/users/upload");
$size=0;
while ($bytesread=read($filename,$buffer,1024)) {
print OUTFILE $buffer;
$size+=$bytesread;
}
print "Your file has been uploaded ($size bytes)";
}
print $q->end_html;
If you're interested in using Perl it's available on nearly all web servers - check with your hosting provider. You may also want to install a copy on your own computer for development and testing - Activestate provides convenient binary distributions for most computers including those running Windoze. You should also check out perl.org and CPAN.
Alternatively, some content management systems can simplify this job. For example in our 'Building Site' system you can use special tags in your HTML, as follows:
<!--#contact:start-->
<!--#contact:prompt Choose a file:#Your
file was uploaded.-->
<!--#contact:upload name='uploaded_file'
extensions='png,jpg,jpeg,gif' max_size=60000-->
<!--#contact:uploadbutton-->
<!--#contact:end required_params='uploaded_file'-->
The system will also ensure that only files of the correct type can be uploaded, and if the file size exceeds a set limit (60k in this case) it will automatically reduce the image size accordingly. This is particularly useful for modern digital camera image files - with image sizes of 1024 x 768 or more and minimal jpeg compression each photo can be 1Mb or more!
Having uploaded the image file to your server, you can then put it into your database. Exactly how you do this depends on the database you're using and what you want to do with the image after it's added. You can store the binary data itself in the database (hint: use a data type BLOB in a SQL database), but this will result in large database files with no searchable information in them, so it may be more efficient to save the files in a specific location on the hard disk and keep a record of their filenames in the database.
One important warning - we strongly advise you NOT TO ALLOW uploads into a publicly-available directory on your server, or otherwise to publish uploaded content without first checking it yourself. You are responsible for the content available to the public from your server. If illegal (eg. pornographic or defamatory) material is published then you, not the anonymous person who uploaded it, will be held liable.
Can you provide ASP (.NET) code to do...?
No, sorry. We don't use Microsoft servers or ASP. Google is your friend!
