By Lee Sykes
September 2005
This video tutorial is a beginner’s guide to preparing images for a web page.
Adding images to a web page makes the page more interesting, visually attractive and appealing to the eye.
If you do not prepare an image correctly before uploading it to your website however, you are likely to lose visitors because the page will take too long to download.
I have come across several DotNetNuke® users who do not understand how to prepare an image before they upload it to their website, so I am going to give you a quick overview of the processes involved.
Image Formats
There are two main image file types that are used across the internet. They are JPEGs and GIFs.
These formats compress the file size of an image down into a reasonable size.
- JPEG (“.jpg”) format is suitable for photographic images as it keeps smooth transitions between different tones
- GIF (“.gif”) format works well with cartoons and other vector based images – they allow you to select how many colours to use – the less colours the smaller the file size
You can covert your images and save these file types using programmes such as Adobe Photoshop or Adobe Fireworks.
When using images on a web page consider:
- The dimensions of the image
- The file size of the image – keep as small as possible
- Number of images on the page
- Ensure the total file size of images on a page is kept to a minimum
"If you do not prepare an image correctly you are likely to lose visitors because the page will take too long to download."
This will ensure that a web page downloads in the quickest time. Remember, not all internet users have high speed connections, most web users are impatient, and if the page takes more than 30 seconds to download, they will leave your site!
The smaller you make your image file sizes, the faster they will download and display.
Image Dimensions
Many people have problems determining what size their images should be. The dimensions of your new image should be determined by its use, where you are going to put it, and how much screen you want it to occupy.
For example, if someone is looking at a web page using a monitor set to 1024 pixels wide and 768 pixels high - then a graphic that was 500 pixels by 500 pixels would take up half the width and two-thirds of the height of the screen. If this graphic was showing a corporate logo – it would be far too large. If the image is for example, a location map, where small features have to be legible, then this may be suitable.
One of the techniques I use if I am unsure about a suitable size is to create multiple copies of the image, each one using different dimensions, which I then add to a web page and see which is most suitable.
DotNetNuke Technique
A further technique which you can employ in DotNetNuke is as follows:
- Upload the image to your DotNetNuke portal
- Using the Text / HTML module, add an image.
- Click on the image and re-size the image to fit the design (if you click and drag diagonally on one of the corners, the image will re-size and keep all of the proportions to scale)
- Click on update
- Right click on the image and select properties
- Make a note of the dimensions: (width) x (height) values for the image
- Go back into your image editor (ie. Adobe Photoshop) and save the image at this size
- Upload the new re-sized and compressed image and delete the old image from your portal
Note: If you re-size a large image in the Text / HTML module to a smaller image, this does not make the file size smaller, it just changes the dimensions of the image. Make sure that you compress your image in an image editor, such as Adobe Photoshop or Macromedia Fireworks.
Remember, we need to keep the image file size as small as possible – the larger the size, the longer it will take to load. If you are creating a site with lots of images it may be best to have a page with thumbnail images (small postage stamp size images) which link to a larger version of the final image.
There are several DotNetNuke® modules available which automate this process and can create slide shows, photo albums, etc. from one large image.
Monitor Resolution
Not all Internet users have high resolution computer monitors. If your images are too large, they will be difficult for some users to view. Common display screen resolutions are:
- VGA 640 x 480 pixels
- Super VGA 800 x 600 pixels
- XGA 1024 x 768 pixels
For practical purposes, VGA is the lowest display resolution still in use. So to assure that your images are easy to view, try to keep your image sizes less than 640 x 480 pixels.
Compressing and Optimising an Image for the web
Once you have decided on the dimensions for your image, you need to compress the image to a suitable file size using an image editor, and save the image as a JPEG or GIF.
I suggest you play around with the different image format types and you will soon find what works best. I personally use Adobe Fireworks to compress my images as you can preview the image while adjusting the compression settings; it displays the file size and tells you how long it will take to download it, this means you can create the best optimized image possible. Once you have found the settings that work best, all you have to do is click on 'save'.
Adobe Photoshop is a very similar programme and has a save for web facility, which also allows you to preview and change the settings before saving it. Adobe Photoshop Elements is a cheaper version of the programme and it does include the 'save for web tools'.
Saving your images
This is an overview of how to compress your images. I use Adobe Fireworks, but all image editing programmes work on a similar basis.
- Crop, scale, colour balance your image first
- Experiment with the compression settings
- Find the best balance between the quality of the image and the smallest file size
- Save the compressed image as a JPEG or GIF
Download the video below:
Video
- Optimizing Images in Macromedia Fireworks
- This is a demonstration of how to use the compression tools
Time Length: 3min 18secs
Where Next?
Once you have created your image, all that you have to do is upload it to your DotNetNuke portal and insert it into a page!
Over the next issues, we will go into further details for working with images in DotNetNuke. Covering how to add them to your portal and looking at the modules available for managing images in your portal, such as slide viewers and photo albums.
Click here to view further image resources, such as websites that provide free images for your website.