|
|
 |
Contents of this page: Working with images | File size | File type | Image size | Optimizing images for the web | Adding images to QwikZite | Replacing images | Default images | Extra images | Background images | Favicon
Working with images
File size
Images heavily influence the size of a webpage in kB, and consequently also heavily influence the time that it takes to view a page on the screen. For common use on the web, it is therefore necessary to restrain the use of many and particularly of large images.
The 'download time' of a page is dependent, amongst others, on the quality of the internet connection, and on the speed of the modem and computer of the visitor. Visitors with a common phone line or a poor cable connection often do not have a download speed of over 6 kB per second at their disposal. We'll leave you to guess how long it would take to view an image with a size of 120 kB.
Fortunately, many 'image editors' exist: programmes capable of limiting the file size of images or optimizing images for the web otherwise. Unless you publish photographs or so for special purposes, such images of 'web quality' will do on the screen.
File type
In general, the file type JPG (Joint Photographic Experts Group Image File, also indicated with JPEG) is the best type for photographs and GIF (Graphics Interchange Format Image File) the best type for other kinds of images such as drawn pictures and logos.
It is advised no to use other file types such as PNG (Portable Network Graphic Image File), as they can only be viewed in the most modern browser versions.
Never include images of the file type BMP (BitMap Picture): these files are often as much as 300 times larger in size than the above file types and can make a website inaccessible for most of the visitors!
Image size
The size of the image also heavily influences the file size and the time it takes to download.
In illustration:
A common JPG image from a digital camera with a width of 1600 and a height of 1200 pixels has a file size of about 425 kB.
Resized to a width of 200 pixels, a sufficient size for default images in QwikZite, the file size of the image is reduced to 4 kB.
Optimizing images for the web
Optimizing images for the web has all to do with optimizing the file size.
Enormous reductions of file size can be made by adjusting the quality of the image, converting the image to the most efficient file type, and giving the image a size not larger than necessary.
For this purpose many 'image editors' are available:
- Most suitable of course are professional programmes like Adobe Photoshop and Macromedia Fireworks, capable of anything and everything, but very expensive.
- Much cheaper, and nearly of same quality, is the presently very popular programme Paint Shop Pro.
- Another excellent professional image editor, available for fréé but not particularly user-friendly, is The Gimp.
- If you want a simple programme to start with, various free programmes are available, such as Irfan View that can perform all above mentioned optimize actions.
Adding images to QwikZite
- The menus 'Page', 'News' and 'Link' have the option to add one default image.
- To the same elements, also extra images can be added.
- In the 'Sitestyle' menu, options are available to add logos, a title image and background images.
- Finally, a favicon can be added to the site.
The import fields for all these types of images are identical:
Browse at your local computer to the file to be imported. The location of the file will be indicated in the input field.
After pushing the button 'submit changes' at the top or bottom of the screen, the image will be displayed with details of file type, file size and file name.
For practical reasons, images are not displayed at the backend in true size, but are resized to 200x200 pixels. The image proportions may therefore not be constrained. You don't need to worry about this. An option to view the image in real size is available.
Replacing images
It is not necessary to remove the image yet present if you want to replace it by another image. Only if you do nót want to display an image, you need to check the option 'delete this image'.
In rare occasions, after implementing the changes, the old image may still be visible at the backend, even if you refresh the screen a couple of times. This is only a matter of cache (memory setting of your browser). At the frontend, after refreshing, the new image will be displayed indeed.
Please note that as soon as you replace or delete an image, the 'original' will not longer be available in the database and in no way it will be possible to conjure it up again.
When testing sitestyles, this can lead to unpleasant surprises. Particularly if you work at an occasional place, it is advisable to save the image at your local computer before replacing or deleting it.
Default images
Images added to the site by the default options in QwikZite, are displayed at the frontend in the following way:
- Page:
The image is displayed at the frontend in the upper right corner of the TEXT AREA, proportionally resized to a width of 200 pixels. Horizontal and vertical space between image and text is added automatically.
It is advised not to enter an image with a width less than 200 pixels.
- News:
The image is displayed at the frontend in the upper left corner of the long version of the news item on the NEWS PAGE, proportionally resized to a width of 200 pixels. Horizontal and vertical space between image and text is added automatically.
It is advised not to enter an image with a width less than 200 pixels.
- Link:
The image is displayed at the frontend left from link title and text in the LINK AREA, proportionally resized to a width of 100 pixels.
It is advised not to enter an image with a width less than 100 pixels.
- Sitestyle:
The images in LOGO LEFT AREA, LOGO RIGHT AREA and TITLE AREA are displayed in true size (QwikZite version 1.10) or automatically resized to height and width of these areas (QwikZite version 1.09).
Extra images
At any place in QwikZite texts, additional images can be displayed.- In a first step, image files are uploaded at the backend in the default way in the 'FOTO' menu. They are stored in the QwikZite database with a unique ID number.
- In a second step, so-called HTML code, refering to the image ID, is included in the text at the backend to make the image visible at the frontend. In any field at the backend where you have the opportunity for text-input, you can insert such HTML code.
Different from the default images in QwikZite, by means of HTML code you can define the following properties of the extra images: place at the webpage, size, border, distance between image and text, etc. As well, you can transform the images into 'hyperlinks'.
More information: see Menu 'Foto'.
Background images
Background images for the full webpage or parts of the page can be added in the 'Sitestyle' menu. As the name indicates, the images are displayed as background of text and normal images.
The 'behaviour' of background images is different from normal images: they are always displayed in true size and are repeated if the area concerned is larger than the image. Because of the special requirements to the properties of an image, if to be used as background image, a separate page of this manual is devoted to this subject.
See: Working with backgrounds.
Favicon
A 'favicon'(or 'shortcut icon') is an icon displayed in the address bar of the browser when opening a site. A favicon can be added to a site to give it a more professional look.
The use of favicons was for the first time introduced in Internet Explorer 5.0, where the favicon was shown after adding a site to the list of 'Favourites'.
In the latest version, Internet Explorer 6.0, this is still the case. In the modern versions of many other browsers (Firefox, Netscape, Opera, Mozilla), the favicon is always automatically displayed.
The following specific requirements apply to favicons:
- Size: 16x16 pixels.
- File type: ICO.
For producing a favicon or for transforming a common image file into an ICO-file, you can use an 'icon editor' (advanced image editors often include this feature).
Free icon editors are plentifully available at the web, such as the programme Icon Art.
For adding your own favicon to the site, foto 1 in the table 'foto' has been reserved.
By default, the QwikZite favicon is added here. If you wish, you can replace it by your own favicon.
Go to top File size | File type | Image size | Optimizing images for the web | Adding images to QwikZite | Replacing images | Default images | Extra images | Background images | Favicon
|
|
|
|
|
|
Latest changes in this page |
|
|
|
|