 |
CourseLab 3.5. User's Guide |  |
 |
|
CourseLab 3.5. User's Guide | |
|
Any internet-friendly graphic file formats can be used in a learning course. Because learning courses can be hosted on the Internet, it is strongly recommended that you use small graphic files in compressed graphic formats such as GIF, JPG, and PNG. Modern browsers also support vector SVG images. Each format has some advantages and disadvantages, which should be taken under consideration. Below is the brief overview of these formats.
GIF is the most common format for Internet graphics as it is supported by all Browsers and majority of graphic editors. GIFs use a special compression algorithm (limited to 256 or less colors and simple linear compression along the horizontal axis) allowing for a very small size of graphic file if there are large areas of the same color. It is therefore not suitable for storing photos and images with the large grated areas - the stored image will have a large file size and poor quality. GIFs support transparency (you can choose a single color in the image that will be rendered as invisible, allowing the background to show through when the image is viewed on a Web page) but you have to remember that GIF supports only 1-bit transparency: each pixel for the given color (so called Alpha Channel) is completely removed.
The latest version of the GIF format supports animation created by stringing together various still images. GIF animation can be used in a learning Module. The CourseLab editor will not play a GIF animation – only the first GIF image is displayed on the Slide in editing mode. The GIF animation will display properly when the course is published.
JPG is one of the most common formats for graphic images on the Internet and is supported by all Browsers and most graphic editors. When JPG compression is executed, the source image is divided into square blocks with specific color and brightness information (so called chrominance/luminance scheme) created for each block, which enables coding of this area. The human eye is more sensitive of them to the details of shapes than to color information therefore JPG compression reduces color information to Variable size while using 256-grade brightness scale. The degree of color information depends on the user-defined quality setting. Having said that, JPG format is very practical for displaying smooth color transitions and well suited for compressing photos and pictures with high color gradient areas. However, if the source image has multiple contrasting color changeovers, the compressed image will degrade depending on the level of compression (there will be mottled areas around color’s edges). JPG allows the user to choose the balance between file size and image quality but choosing a higher quality can make the file size very large and slow to upload. Unlike GIFs, the JPEG format does not support transparency.
The Portable Network Graphics (PNG) format was designed to replace the older and simpler GIF and JPG formats. When saving at an 8-bit depth (PNG-8)the format is comparative to GIF (in general, it provides about 15% better compression ratio than GIF, since PNG-8 performs compression along both horizontal and vertical axes). When saving to a 24-bit depth (PNG-24), the format provides high-quality color changeovers and a very good level of file compression. This format supports transparency and preserves the quality of the color changeovers regardless of the underlying color. The only disadvantage of the PNG format is that it has limited support in older versions of Internet Browsers and limited support by some graphic editors. Nevertheless, since the older versions of Browsers are not supported in CourseLab Courses, we encourage using this format if possible.
Vector graphics files, which supported by modern browsers. Vector paths can keep very good image quality over a wide range of size, but this format is not good choice for realistic images (photos). This format provides best quality for icons, schemes and other "poster type" pictures. This format supports transparency and preserves the quality of the color changeovers regardless of the underlying color. File size of SVG image can be smaller or greater than similar raster image - depending on complexity of vector paths.
We do not recommend using graphic files in any other format except for mentioned above. You can use other graphical formats which are supported by Internet Browsers, such as BMP, WMF, and others. However, consider the fact that some Browsers display these formats incorrectly. Besides, BMP files (and other non-compressed formats) are very large in size. The choice is yours - if you are confident that images will be displayed correctly and network traffic permits it – you may use these types of format in your Course.