Preparing Images For Your Website

Follow These Necessary Steps Before Adding Photos to Your CMS

Demo Photo - Adding Photos to Your Website Before you can upload images to your CMS (content management system), you need to prepare the images to ensure they display correctly on your site and are properly optimized. Please be sure to read this entire tutorial before you begin uploading images to your News Publisher or Blogging tool (or any of the modules that allow image uploading)

Where to Get Photos

Unless you have advanced skills and the software programs required, I suggest you select from the free JPG photos available on the Microsoft website. While there is a limited selection, you should be able to find something to complement your article or blog topic. Here is the link (and be sure to read the terms of use):

http://office.microsoft.com/en-us/clipart/default.aspx
Enter a keyword to search for the type of photo you are looking for. When the results appear, mouse over the images you like. Remember you can only upload JPG or GIF file types. If you select the Microsoft WMF file types, these will need to be converted into a JPG or GIF format using the graphics program of your choice.
Another great place to get photos for a reasonable price (about $1 each) is www.istockphoto.com. Just be sure you only download and use the lowest resolution offered (you will need to purchase credits to make a purchase) for the purpose of optimizing and uploading to your server. The file size of these photos will be a bit larger than desired but will be OK to use.
If you have the software and skills to optimize your images yourself, you may wish to skip ahead to the tutorial Adding Images to Your Articles or Blog . Grab some popcorn and be be sure to watch the movie tutorial!

How to Save a File From the Microsoft Clip Art/Gallery Site

When you have found an image from the Microsoft site, click on it and select the “Copy” link (this copies the photo to your clipboard).

Next, create a new folder somewhere on your system that you will be able to easily find/access. The photo you copied is still in your clipboard memory so with the new folder open, paste (Ctrl V) the photo into this folder (also known as a directory).

The file name will be something like 833965.jpg; to rename this to something you’ll be able to recognize later, hit your F2 key and then rename the file to something like febnlcat.jpg (meaning February newsletter cat). Be SURE you keep the .jpg extension as part of the file name.

Difference between JPG and GIF

Without going into great detail, a photo should (almost) always be saved as a JPG file. Also, pictures that have gradients will also look better in the JPG format. JPG files can be saved at different compression settings; shoot for around 75-80 to get a lower resolution. Lower resolutions create smaller file sizes, which is what you should strive for when uploading images to your website.

Flat color pictures or graphics are typically best in GIF file format. There is no compression setting for GIF files, although more advanced graphic programs will allow you to set the number of colors to use, etc. For the most part, the default GIF setting/format is fine for the web (assuming you have resized it).

Using the Free Image Resizer Tool from Microsoft

The easiest way to resize/compress a photo (JPG), assuming you are using a personal computer (PC) and running XP, is to download the Windows XP PowerToys Image Resizer. Here is the link:

http://www.microsoft.com/windowsxp/downloads/powertoys/xppowertoys.mspx

Scroll down to this section:

Image Resizer: This PowerToy enables you to resize one or many image files with a right-click.

On the right hand side you’ll see the download link; click on it to install and follow the instructions.

With the installation complete, you will now be able to easily resize/compress JPG files.

The Steps to Optimize your Photo

Open the folder where you stored your photograph/image
Right click on the image and a Windows dialogue box appears:
Select the Resize Pictures option and a new interface opens
Click the Advanced Settings Tab and enter in the values shown below:
Note, only choose the “Resize Original Picture” option if you are SURE you don’t need it again (or can easily download it again). If you use a photo that you purchased, do NOT select this option. Another version (in the same folder/location) will be created for you by the program.
That’s it. Rename the photo to your liking (if you didn’t do this already and especially if a new copy was made), ensuring there are no spaces or special characters in the file name.
You’re now ready to import into your Webeze/OneAdmin system.
Continue on to the next tutorial: Adding Images to Your Articles or Blog

A Scottsdale and Phoenix Arizona professional website design company