Help With Graphics
There are many reasons why you would want to include an image in your content. You may want to include pictures of events, classes, degree plans, etc. However, to make our website the smoothest it can be we need to follow a few guidelines.
- If you are using digital photos or other large images you must save them as a JPEG, GIF, or PNG. There should be NO Bitmaps or other large, space hogging images. The reason is that these larger images load very slow over Dial-up.
- You should save your images to have 500 pixels or less. Meaning that if you have a photo that is 500 X 340 you are in the clear. The largest number (height or width) cannot exceed 500. Any image larger than 120KB will be rejected. Resizing a large image by dragging the corners does not decrease the number of pixels!
- Don’t pirate pictures off the Internet. We need to be professional and need to either make the images ourselves (or have them made by a computer savvy person on campus), or find websites online that offer free, good quality, copyright free images. For more questions about this please contact the Website Managers.
Ok, I’m sure that I have put you in a confused panic. Let’s do this together and take it step-by-step.
You have been given a CD that contains some images, documents, and things to use throughout training. Go ahead and insert your CD into the computer. The autoplay should automatically ask how you would like to view the contents.
- Select Open folder to view files and select OK. You should now see all of the files on the CD. You can minimize the window for right now.
Let’s start by simply inserting a correctly sized image. We will worry about the file type and resizing later.
- Making sure that you are on your Practice Page, Select Edit Page.
- Click at the beginning of the text Bill Grogan’s goat to make the blinking cursor sit before to the ‘B’. Press Enter and move your cursor back to the first line.
- Up at the top of the window click Insert Image.
- Select From My Computer…
- From here locate the JPEG image labeled goat on your CD. (Remember, you can have images on your computer, digital camera, anywhere that you would like to use.)
- Click Select.
- Click Publish and you are done!
Advanced Images
Now that we know how to insert images into our content from before,the next thing we need to go over is how to determine how big and what type of image you are using. Before, we explained that images of events, people, classrooms, the school, etc. can be used to dress up your pages. Now we just need to determine which ones to use and what to do with the ones that we want to use but don’t meet the criteria.
What is a bitmap, JPEG, PNG, or GIF?
Bitmap
The method of storing information that maps an image pixel, bit by bit. There are many bitmapped file formats, .bmp, .pcx, .pict, .pict-2, tiff, .tif, .gif (89a), and so on. Most image files are bit mapped. This type of file gives you the ´jaggies´, when examined closely you can see the line of pixels that create edges. Bitmap images are used by all computers. The desktop or screen information for all Windows machines uses .bmp files, while the Macintosh uses pict files.
www.photoshopelementsuser.com/glossary.php
JPEG or JPG
A graphic file format to display high resolution images on the web. Usually used for photographic type images.
www.greenhill-i.com/glossary.htm
PNG
Portable Network Graphics (PNG) format was designed to be a patent-free successor to the GIF format. Though not designed specifically for the Web, PNG offers particular benefits in this environment such as improved image compression ( 10 to 30 percent smaller than GIFs), two dimensional interlacing, storage of text with the an image making it possible for search engines to gather information and offer subject searching for images in a standard way.
www.acad.bg/beginner/gnrt/appendix/glossary.html
GIF
Graphic Interchange Format. Yet another image format type generated specifically for computer use. Its resolution is usually very low (72 dpi, or that of your computer screen), making it undesirable for printing purposes.
cjs.cadmus.com/da/glossary.asp
You can easily determine file types by the file extension. An example would be goat.jpg. Because .jpg follows the file name, I know that this is a JPEG image. The following section should help describe this in more detail.
Determining Image Types
You can easily determine the file type and size of your image by navigating to it’s location on your computer or disk. In our case, our files can be found on the CD in the back of you book. The following screen shot is of the window where our images are located.
I have the view arranged by file type and in tiles. You can do the same by selecting View > Arrange Icons by… > Type and View > Tiles.
- Bitmap Image, 500 by 332 pixels.
- JPEG Image, 3008 by 2000 pixels.
- Details box.
Using other options you can have the file extensions shown so that the file names will read Academic Calendar.doc, mileage chart.xls, gira5.jpg, etc. The three items labeled will help you determine the size and type of your image. Earlier, there was a list of accepted practices for our website. Our limit is 500 x 500 pixels and as you can see the second image is 3008 x 2000 pixels. We will need to resize this before we can use it.
In this image you can see the file size of the image named gira5.
By clicking the file once, its properties are now displayed in the Details box. I can now see that the image is 2.20MB which is way over our limit.
Paint.NET
There are many programs out there that will help you properly resize your images. If you have Adobe Photoshop or some other graphics software, you should be able to resize your image. However, if you only have Microsoft Paint or whatever came with your computer, you will need something a little nicer. Paint.NET is a free, open source program that you can download off the Internet that won’t expire. I will now show you how to download and install Paint.NET if you do not have any other graphics software.
First, you will need to go to your Internet browser and navigate to the following location: http://www.eecs.wsu.edu/paint.net/download.html.
Second, scroll down until you see the following.
It doesn’t matter which of the last two download links you click. However, I have chosen BetaNews for my demonstration. Once you click Download next to the BetaNews that includes the .NET framework you will see the following.
Click the Download Now and follow the on screen instructions and you will be well on your way!
Resizing Images
Now that we have some software and we know if our image is too big or not, let’s resize! When you open Paint.NET you will see the following screen.
(It’s nice to have a free software if you are only going to use it for this purpose!)
Now we need to open our extremely large file named gira5 from our CD.
- Select the open icon (the highlighted one in the following image).
You will now see the following dialog box.
- Select My Computer > the CD drive (E: in my case) > gira5 > Open. Now the picture of the sunflower should appear in the Paint.NET program.
- Select Image on the Menu bar at the top.
- Click Resize.
- You will now see a dialog box like this one.
- Since the largest dimension is the width, we will enter 500 in the box marked #1. Make sure that the box marked #2 is checked to keep the image from being distorted.
- Click OK.
- Now your image is the correct size for the Web site.
Now that you know how to resize large images, let’s go to saving Bitmaps and other image types to the acceptable types. Let’s use the Bitmap image from our CD.
- Navigate to the file pisa-alabardieri-1. We can see that it is 500 by 332 pixels and 486KB, but it is a Bitmap Image. If we resave it as a JPEG, GIF, or PNG, it should be ready to use.
- Open Paint.Net
- Select the open icon and select the file.
- Click File.
- Click Save As… You will see the following dialog box.
- Down at the bottom of the dialog box you will see file name and file type.
- Change the file type to JPEG.
- Since some computers don’t really like dashes in the name, let’s condense the name by removing the dashes.
- Select Save.
Now you can use these images in the content area the same way you inserted the goat earlier. If you have any questions later on about this process, please feel free to contact your Website Managers.