Image Optimisation. Image Dimensions...1 Image File Formats...2 Adding Images...5 Thumbnails...13 Summary...15

Transcription

1 Table of Contents Image Optimisation Image Dimensions...1 Image File Formats...2 Adding Images...5 Thumbnails...13 Summary...15 Introduction Images are placed on a website to enhance its appearance. However, the larger the size of the image, the longer it takes to download. For users who are on slow Internet connections, this can cause frustration and they might leave your site without having viewed anything on it. The trick is to keep the quality of the image as high as possible, while keeping its file size small. This is known as image optimisation. Modules image optimisation is relevant to: emarketing Knowledge Online Store (Products) Events Image Dimensions Image dimensions specify the size of an image. Your page will download faster if you specify a height and a width for all images contained within a page. This is highly recommended as the browser does not have to wait for the page to load before the images can be downloaded. The dimensions of an image depend on the page you are creating the image for, and the location of the image on the page. You don't want the page to look cluttered, so the use of images should be kept to a minimum. Images used throughout the site should be approximately 150 pixels in height, and 300 pixels in width at the most, but can be less. Images used as headers at the top of a page should be no more then 750px in width and 300px in height. The style of your site will determine the number of images that are on a page, and the size of each image. 1

2 An image that is in the JPEG or GIF format, and no bigger then 150 pixels by 300 pixels can speed up the time it takes your site to load. If you save an image at a value between 50% to 75% of its quality, the details that have been removed from the image will not be noticed by visitors to your site as the impact is minimal. Image File Formats If your site doesn't require high quality images, then save your images as a JPEG or GIF format. This makes the file size smaller and allows the site to load fairly quickly, especially for users with slow Internet connections. Photos should be saved in the JPEG format, and the GIF format should be used for logos or graphics that have less then 256 colors (these tend to be created in programs such as Paint). Programs you can use to work with images include Adobe Photoshop, ImageReady, Macromedia Fireworks, and Paintshop Pro. There are also plenty of cheap and freeware alternatives available. Paint or other drawing programs These programs normally save in the bitmap (.BMP) format, and therefore a lot of image detail is lost if an image is saved in JPEG or GIF. The.BMP format is not recommended for use on the Internet. These programs can be used to draw the graphic or logo, and the image can then be copied and pasted into a photo-editing program to be saved in a JPEG or GIF format. Photoshop/Paintshop Pro etc. These photo-editing programs are designed to create and save images, photos and graphics. These programs are designed to save images in different formats, and the image quality is preserved a lot more than with a Paint program. Refer to the program's user manual for information on how to save in a different format. The answer should be found in the index under 'save' or 'save as'. When saving in a different format, such as JPEG, the image quality should be set at a value between 50% to 75%. This reduces the size of the file, but retains enough quality of the image to make it presentable. Check that the image is still of a suitable quality before committing to any changes. If your image is over 20K in size, then you can tell your program to optimise your image as a progressive jpeg. Refer to a user manual for your program for further information on how to do this, 2

3 assuming the feature is available to your program. A copy of the image in its original format should be kept as a backup before changing the format of the file. Do this by saving a copy of the image file somewhere that you'll remember. When saving as a JPEG or GIF format, check the quality of the image, especially if there is text written on the image. Text can get blurry if the image quality is reduced too much. Image size and download speeds The time a page takes to download depends on what is contained on it. This can include anything from text, images, audio, video, Flash movies etc. The list goes on. Text and images can be the quickest to load, whereas audio, video and Flash movies take longer. Your website will most likely only use text and images within its pages. To help the page load faster, the size of the images should be specified. If these are specified, then the browser does not have to guess where the images are to go, or how big they are meant to be. As a guide, a 20K image can take a 56kbps dial-up connection 3 or 4 seconds to download. A 100kbps image would take the same user about 15 seconds. The same images can take a few seconds for a user with a high-speed connection, regardless of their size. It is important to keep in mind that not everyone will have a high-speed connection. For users with slow connections, large images take time. Long enough for them to consider if they want to wait for the image to load so that they can view the rest of your site. 3

4 Resolution This is the name given to the dimensions of an image. The term is also used to refer to the resolution of your computer screen, as well as the capabilities of your printer. Resolution is important to keep in mind when it comes to the use of images on your site. In relation to a computer screen, the resolution determines the number of pixels that can be displayed on the screen. This means that a 1024 x 768 screen will be able to display 1024 pixels horizontally and 768 pixels vertically. Resolution is important to keep in mind when determining the dimensions of your image. A 300 x 150 pixel image will display properly on most resolutions. A 900 x 700 pixel image will display reasonably well on a 1024 x 768 screen, but not a 800 x 600 screen. This is because the image is larger then the screen measurements. Images used throughout your site should be approximately 150 pixels in height, and 300 pixels in width at the most, but can be less. Images used as headers at the top of each page should be no more then 600 or 700 pixels in width and 300px in height. If these guidelines are adhered to, then your images will be suitable for most resolutions. DPI, or dots per inch, in relation to a printer refers to the amount of dots it can print per inch. This is the only time where the DPI of an image is relevant. The higher the DPI, the clearer the image is when printed. For example, if your printer prints at 300 DPI, then your image should be set at 300 DPI. Refer to your program's user manual for information on how to set DPI for an image. If images are not likely to be printed from your site, then the DPI is irrelevant as it does not affect how an image looks on screen. Progressive JPEGs and Interlaced GIFs The file format you use will depend on your image. It depends on the colours in the photo, and the quality that you wish the photo to be saved as. A photo that only has a couple of colours, such as a picture of a clear blue sky, might work better saved as a GIF. A photo with lots of colours, such as a gradient, works better saved in the JPEG format. If you are unsure of which to use, your best option is to save your image in both formats, and then see which one looks the best. However, be sure to keep a copy of the image in its original format at all times, in case you don't like how the JPEG or GIF image has turned out. This will allow you to go back and make changes to a high-quality version of the image. Progressive JPEGs The JPEG format should be used for saving photos and images that have lots of colours. A progressive JPEG gives the impression that the image downloads fast, when in reality most of the image loads, but then continues to download until it is complete. This allows the rest of the page to download faster, without having to wait for the images to appear. Progressive JPEG is recommended for any image over 20K. This option can be selected when you are 4

5 saving your image in the JPEG format. If you're unsure of how to save a photo as a progressive JPEG or an Interlaced GIF, refer to a user manual for your program. Interlaced GIFs GIF is best used for images that are made up of a few colours eg. illustrations. Interlaced GIFs create the impression that the image is fast loading. The image starts off blurry, and then clears up as the page continues to download. You can select the interfaced GIF option when you are saving your image in the GIF file format. Keep in mind that not all programs can save GIFs through the usual 'save as' method. Some programs have a 'save for web' or something similar that is used to save GIFs. Refer to the user manual for your program to determine the method it uses to save GIFs. Interlaced GIFs should only be used if the file is of large size and is already going to take a while to download. Adding Images This section explains how you can add images to your site using the image functions within your Administration area. A module that allows you to add categories and sub-categories will most likely have a feature that allows you to add images in some way. The user manual for the particular module should explain how to add images, but the possibilities are explained below. 5

6 Adding images using the HTML editor toolbar The appearance of the HTML editor toolbar within a module means that you are able to add images to a page on your website. Depending on the module you are in, this toolbar can appear in different locations. HTML toolbars are generally found in modules that allow you to add categories and records. Your administration area might not have the HTML editor toolbar enabled for a module, or you might not have the correct access privileges. Click the 'add image' button to begin. This will bring up the following window. 6

7 To begin uploading an image, click on the 'upload' tab. This will take you to the following screen: 7

8 Click on the 'browse' button to locate the image you wish to add. Then click on OK. Now click on the 'send it to the server' button to upload the image. If the image has been successfully uploaded, you will receive the following message: Click on 'OK'. You will then be taken to the following screen: 8

9 You will now see an example of your uploaded image. This window allows you some editing options in regards to the image that you just uploaded. Any changes you make are previewed in this window. Aspect Ratio and Reset Image Size Aspect Ratio: If the padlock symbol appears as closed then it means that your image will remain in proportion. If the padlock symbol appears as open then the height and width of the image will not be in proportion to each other. It is recommended to keep an image in proportion. Reset Image Size: This allows you to reset the image size back to what it originally was before changes were made URL This is the address to your image. This is displayed automatically and doesn't require changing. Alternative text Specify the text that will appear in the event your picture doesn't eg. a brief description of the item in the picture. 9

10 Width user::manual for SiteBuilder This is the width of your image. This is specified automatically when the image is uploaded. If you wish to change the dimensions of your image, it is recommended that you change its dimensions in the program you used to create it. Height This is the height of your image. This is specified automatically when the image is uploaded. If you wish to change the dimensions of your image, it is recommended that you change its dimensions in the program you used to create it. The height and width of your images should be changed in the program that was used to create it. Changing the dimensions using the width and height options given here is not recommended as it only resizes the image, rather then permanently applying the image width and height you specify Border Enter a number here (1 or greater) if you would like a border around your picture. Hspace The distance of the image from the left and right side of the screen (enter a number >0). Vspace The distance of the image from the top and bottom of the screen (enter a number >0). Align Change where the image is located on the page eg. left, centre, top etc. 10

11 Making an image a link user::manual for SiteBuilder You can make an image a link if you wish. If a link is added, then anyone who clicks on the image will be taken to another location. To do this, click on the 'link' tab: Enter the URL you wish to link to into the URL field. This URL can be a link to an external site, or a link to a page within your site. When adding a link, make sure you include otherwise the link will not work eg. You can specify a target, which determines how the link is opened. Click on the drop-down menu to select an option. <not set> - this means that no option has been chosen new window (_blank) this opens the link in a new window 11

12 topmost window (_top) this opens the link in the window that is on top of all other windows same window (_self) this opens the link in the window you are currently in parent window (_parent) this opens the link in the same window that the link is in Advanced The 'Advanced' tab is not in use. Once you have finished making changes, click the 'OK button. This will add your image to the page. 12

13 Adding images by using the 'Image' tab user::manual for SiteBuilder Some modules that allow for images to be added hrough the use of an 'image' tab, as opposed to the HTML editor toolbar. This option is generally used in modules that make use of thumbnails, such as the online store (products) module. This is where you can upload an image to be displayed with your event eg. a company logo. Thumbnail Click on the 'browse' button and locate the image you wish to add. Then click 'OK'. Click the 'save' button to upload the image. A thumbnail displays a small image. Specify the dimensions of the thumbnail by clicking on the drop-down list associated with it. Image Click on the 'browse' button and locate the image you wish to add. Then click 'OK'. Click the 'save' button to upload the image. This is the image that will be displayed when the thumbnail is clicked. Specify the dimensions of the image by clicking on the drop-down list associated with it. Thumbnails A thumbnail is a representation of a bigger image. The bigger version of the image is displayed when a thumbnail is clicked. These are useful if there are lots of images you wish to include on the page eg. a photo gallery. Use of thumbnails allows for your page to load faster, especially for users who have slower Internet connections. Thumbnails should have dimensions of 100 x 100 pixels at the most, especially on a Photo Gallery page. 13

14 Adding a thumbnail Not all modules use thumbnails. See a particular module's tutorial for information relating to images or adding/editing records. This should tell you if can add thumbnails within the module, and should also tell you how you can reach the thumbnails/images area. A thumbnail is a smaller version of an image. It is only displayed if there is more then one record in a category. When a user clicks on the record's link, the full sized image will be displayed on the page. To upload a thumbnail, click on Browse, and locate the image file. Then select open. Using the drop-down menu on the left, you can specify the size of the thumbnail. You cannot specify your own custom dimensions for a thumbnail. To upload the image that the thumbnail will lead to, click on Browse and locate the image file. Then select open. Using the drop-down menu on the left, you can specify the size of the image. Click on the 'Save' button to ensure that all changes are saved. 14

15 The size of the actual image should be bigger then the thumbnail size. You can only use one image at a time per thumbnail. Uploading a new thumbnail will result in the old one being replaced. Summary Ensure that you specify image dimensions for each image you add to the site If you're scanning photos in and your images are likely to printed, then ensure that the resolution is approximately 300 DPI (ideally, the DPI should be the same as the DPI of your printer). Most programs will allow you to set DPI when you are saving the photo. If not, consult the program's user manual for how to set DPI. If using thumbnails, there should be no more then 25 on a page, otherwise the page might start to look cluttered Image quality should be between 50% to 75% (the values used will depend on the program you use) Use the JPEG format for images and photos Use GIF format for logos or graphics with less than 256 unique colors 15

16 Use interlaced GIFs for large logos or graphics Use progressive JPEGs for images or photos over 20k in size The following is what your file sizes and dimensions should be at: Header Images (images at the top of your page) recommended maximum file size: 60K recommended maximum width: px recommended maximum height: 300px Website images (images throughout your site) recommended maximum file size: 50k recommended maximum width: 300px recommended maximum height: 150px Thumbnail images (images that preview a larger image, eg. in a gallery) recommended maximum file size: 10k recommended maximum width: 100px recommended maximum height: 100px 16