Graphics

Visual elements are key features of online courses. If you are going to be working with images in your course, you'll need to know how to do the following:

Obtaining Graphics from the Internet

Below are external resources you can use for your course. If you link to them, there are no copyright issues. If, however, you copy any of them and place directlly into your courses, there are copyright guidelines you need to follow to protect yourself and the creator of the resource. These guidelines maybe found at the following page.

  • Clipart.com (http://www.clipart.com)
    This website provides graphics and animation that you can use in your course or course website. The site is password protected.
    To obtain the login information, please email Joe Newcomer at jnewcomer@jhu.edu.


If you have any questions, please contact Joe Newcomer at jnewcomer@jhu.edu

Go back up
----------

Reducing Image Sizes for Online Course Site and Websites

Images will really boost the excitement of your course. While text transmits over the Internet relatively quickly, images (usually found either in JPEG or GIF format) require more bandwidth (the speed of delivery over the internet). Large image sizes certainly pose little problem to people connected through broadband or DSL hookups, but for students using dialup connections large images make for very long download times of course materials. The fastest speed a student using a dialup connection can hope to update is 56 kilobits/second. However, due to high usage, the realistic speeds the modems operate at is closer to about 28 kilobits/second. This means that a JPEG or GIF that is 300 kilobytes large can take up to a minute to download properly. Add several such images into one online lecture, and students with dialup connections will spend large portions of time to just download the document!


To help out students using dialup connections, it is suggested that professors posting course-related materials online try to limit the sizes of their images. All images should be either in JPEG or GIF format (either is fine), and should not generally exceed around 20 to 30 kilobytes (KB). While the amount and size of images used in course websites is left to the discretion of the professor administering the website, please keep in mind that the more images in a particular Web document drastically increase loading times.

Furthermore, it is necessary to keep the physical dimensions of images limited. While the height of images does not matter, to avoid situations that involve using both horizontal and vertical scrolling to view an image, it is suggested that professors keep the width of images from exceeding a maximum of 700 pixels. While this restriction is unnecessary with computers using higher resolutions, many computers still operate until an 800x600 screen resolution, which means that large images that look like they fit under higher resolutions are difficult to view for people with smaller resolutions.

If you want to reduce the size of images, it is suggested that you take advantage of the freeware image manipulation program, IrfanView. You can obtain a free copy of the IrfanView software at www.irfanview.com/english.htm. To learn how to download it, please refer to the section titled Downloading IrfanView or if you already have the IrfanView software installed, please feel free to skip ahead to the Using IrfanView to Reduce Image Sizes section.

Downloading IrfanView

  • Go to http://www.irfanview.com/english.htm
  • Click the "Download" button found on the left-hand side of the IrfanView website.
  • Click the link titled "TUCOWS Worldwide Network - download IrfanView". This will automatically open up a new Web browser window to the Tucows website.
  • In the drop-down menu to the right of the "United States" text, select the state closest to you. This will bring up several locations near that state from which you can download the IrfanView software.
  • Under the "MIRROR NAME" header, click one of the links.
  • A dialog box entitled "File Download" should automatically appear. If it does not then in the yellow box with the text stating "Downloading... If your download does not start automatically, click here" and click the link titled "click here".
  • Click the "Save" button found in the dialog box.
  • Another dialog box titled "Save As" will appear. We suggest that you download the file to your Desktop, but feel free to browse around and save it to a different location. Once you have selected a location appropriate to you, click the "Save" button.
  • As the file downloads, make sure that the option "Close this dialog box when download completes" is left unchecked.
  • When the download completes, click the button titled "Open" and follow the installation instructions that appear to install IrfanView.
  • Once the installation is complete, if the IrfanView program does not automatically prompt you to restart your computer, please restart your computer now. Once you have accomplished this, refer back to this tutorial and proceed to the Using IrfanView to Reduce Image Sizes section.

Using IrfanView to Reduce Image Sizes

  • Open up IrfanView
  • Select the File menu, and then select the Open option.
  • Navigate to the appropriate file name and click it.
  • Click "Open" in the dialogue box.
  • Select the Image menu and then select the "Resize/Resample" option
  • Make sure the DPI is set to "72"
  • Resize the image (this can be accomplished one of two ways), choose either:
    • "Set new size" and resize either the height or width (keep the "Preserver Aspect Ratio" box checked)
      OR
    • "Set new size as percentage of original" and resize either the height or width as a percentage of the original size.
      For an image which takes up a full screen, set it at 700 pixels wide; for an image at half that size, 350, down to a small thumbnail image which you might set to 100 pixels.
  • Now click on the "File" menu and click the "Save" button.
  • A dialog box titled "Save As" will appear. In the text field next to the text stating "File Name:" make sure to change the file name to something different from the original file name. If you don't, you will overwrite the original file and lose it for all time.
  • Make sure that the drop-down menu to the right of "File Type:" is set to the "JPG - JPEG Files" option. This is the file-type best optimized (compressed for greatest quality but least amount of download time required) for the Web. However, please note that if your file type is already a GIF (ending in the file extension .GIF), then there is no need to save it as a JPEG (.JPG). Otherwise, make sure it is set to "JPG - JPEG Files" option.
  • Once you have entered a new name into the File Name field and have the appropriate file type selected click the button titled "Save"

Congratulations, you have successfully reduced the size of an image for your online course.

Go back up
----------