Adding Images

Before uploading images onto your website you need to make sure that they are "web-friendly". The most important factor that will make your images web-friendly is their file size. If your images are too large they will create numerous problems and issues on your site. First, your website will be slow because it takes so long to process large images especially if there are several large images on the same page. Second, your site visitors will become frustrated not only with the slow speed of your site, but with being forced to see images load a little bit at a time rather than all at once. Third, large images can take up a lot of space on your server. There are many other problems that large images create on the internet, so it is best to fix the problem before the images ever get on the internet by reducing their sizes before you upload them to your site.

This tutorial will show you how to turn your large images into web-friendly sizes:


--------------------------------Installing Image Resizer-------------------------------------
First, you need to download a program called "Image Resizer" from here:

2010-05-06_1238.png


If the above button is not working or the link is broken, go here http://imageresizer.codeplex.com/ and look for the download button and click it.

(NOTE: If you have a 64bit Windows operating system go here to download the 64bit version of Image Resizer instead: http://imageresizer.codeplex.com/releases/view/30247. If you have the 32bit version or are not sure, download the version above. Don't worry, either way you'll be notified if you have downloaded the correct version once you begin installing.)




Second, click on the downloaded file, which will be named something like this: ImageResizer-#.#_x##.msi (The # are replaced with actual numbers)

Click "Run" on the window that pops up, which will look like this:

2010-05-06_1238.png
(If you have downloaded the wrong version of Image Resizer like the 32bit instead fo the 64bit, you'll get an error message informing you to get a different version)

  

------------------------Re-sizing Images---------------------------

Now that you have installed Image Resizer, we are ready to get your images web-friendly! Go to the folder containing the images you want to upload. Inside that folder, create a new folder called "Originals". Make a copy of each image and place the copies inside the "Originals" folder just to be safe.

OK, now that we are safe, lets begin re-sizing. Notice the images in the sample below. If you look under the size column, you can see that the file sizes of these images are very large. Even the smallest image, which is 282 KB is still too big for the web! Web images should be on average about 100 KB or less. The largest file in the samples below, yorkie.jpg, is almost 7 MB or 7000 KB and thats the size of a small movie! We'll need to make these smaller before uploading them. 

tutor1.png

 

 

In the screenshot below I have switched from "Details" view, which was used in the screenshot above, to "Large Icon" view. You don't have to do this. I am only doing this to make it easier to view the images. Highlight all of the image files then Right Click one of the images and click on "Resize Pictures" from the context menu that pops up.

tutor2.png

 

Select "Small" from the next window and hit OK. You'll notice you can select "Medium", "Large", "Mobile Device" and "Advanced" but for most purposes you'll simply want to ignore these. Just select "Small", which is the perfect size for web images.

tutor3.png

 

You'll notice that there is a new copy of each image now with some text appended to the file name (Small). The screenshot below is again in "Large Icon" view mode.

tutor5.png

 

In the following screenshot I have switched back to "Details" view so you can see the file sizes. Notice how significantly smaller in file size the new yorkie(Small).jpg file is compared  the original yorkie.jpg file. The yorkie(Small).jpg is only 38 KB, perfect for the web, while the original yorkie.jpg is 6,742KB.

tutor6.png

 

 

--------------------Uploading and Using ImageTrakker------------------------

Log in to your website and navigate to the ImageTrakker Manager. Click on the Upload button.

imgtutor1.png

 


Select the images you want to upload. Make sure they are the correctly size web-friendly image files and NOT the original LARGE files. If you want to upload more than one image, click the "Add" button.

imgtutor2.png

 


Now that the images are in ImageTrakker go to a page where you would like to add an image or a thumbnail of the image.  Open up a Generic Content editor like the one in the screenshot below and click on the icon to insert and image as show below:

imgtutor3.png

 

 

You will see a new pop-up window. To select an image stored on your server (all ImageTrakker images are stored there) click on the little folder icon as shown below in the pop-up window.

imgtutor4.png

 

 

Navigate to the ImageTrakker folder. It should be a sub folder inside the Images folder. Select the image you want to insert. NOTICE, when you mouse over the images you can see their file name. If you want to insert a THUMBNAIL choose the version of image that ends in _thumb. ImageTrakker automatically creates a thumbnail version of your image so you don't have to worry about re-sizing your uploaded images to make thumbnails. If you want to use the regular size version of your image, use the file that ends in _imagetrakker. Click on the file you want to insert.

imgtutor5.jpg

 

 

Finally, give the image a description and a title and click the "Insert" button.

imgtutor6.png