do you use images in Course Genie?


Recently I've been shown several instances of images that were made web-ready by Course Genie. There were some problems, and I think at least some of the difficulty comes from a misunderstanding of image resolution. Let me start by saying that setting an image's resolution in a graphics application does not in any way alter the way the image appears in a browser. I'm not talking about changing image dimensions with resampling- of course that would change the display- I'm talking about changing one number, the image resolution. That number is for print only; screen resolution is set in your display/monitor preference panel. Little lion cartoon figure. Don't believe me? This image is 100 pixels by 100 pixels, with the resolution set at 72dpi. When I look at it, I see it the same size in my browser as it is in Photoshop: about an inch square.

Now in the second image I'll adjust the resolution and raise it to 600dpi, still keeping the 100px by 100px dimensions. When I save it for the web, Little lion cartoon figure. I won't use the Save for Web dialog because that assumes all web images are 72 dpi; this JPEG image is saved with the 600 dpi resolution intact. Notice a difference? Right; it looks exactly the same.

Little lion cartoon figure. For this third image, let me really turn up the resolution, a really high res 1200dpi. Surprise! Same exact thing, right?

Remember I said that setting image resolution is for print. What that means is that if I take a 300 pixel wide image and set the resolution to 300dpi, that image will still be 300 pixels wide (about three inches) at 100% in Photoshop or on the web, but if I place the image in a print application like InDesign, Pagemaker, Quark or Illustrator, that image will appear to be one inch wide and will print exactly one inch wide. The application tries to make the image look like it will look when it's printed so that you can build a layout.

Word functions very much like a print application. Three images in a Word doc. If I place the three images, each with a different resolution, into Word, Word thinks I'm doing a print layout and uses the image resolution to display what I'll see when I print the page.

Here's where a problem with Course Genie shows up. If I took the 1200dpi image and placed it in my Word document, Word would scale it to it's print dimensions. So my high res photo looks like its just about the right size- about 6 pixels square. When the Genie creates a course though, it isn't creating a print course and it isn't a graphics application. The resolution mix up is easy to understand. Photoshop Save for Web assumes 72. When I made my initial Mac screen capture, my Mac set the image resolution at 72. When is the last time a Mac monitor had only 72 pixels in an inch? Was that an Apple III? Come on, no body bought those. My current monitor is set to 1920 X 1200. If I take out a ruler and measure the live area, it's 19.5 inches wide. Simple math tells me my screen resolution: 1920÷19.5 comes to 98.46 ppi. My Mac should know that. How hard would it be to tell users that they can control the size of stuff on their monitors by adjusting monitor resolution? The W3C even has it figured out. But, no matter... It takes the screen dimensions from your Word application, 6px by 6px, and uses that in the HTML image tag. The image in the image folder is still the same, though: it's 100 pixels wide and forces users to download far more than they can use or see. Imagine if the course contained lots of high resolution photos.

So the best advice here is to use a graphics application to scale all of your images to the proper viewing size and screen resolution before inserting them in your Word document if the Word doc will be used with Course Genie. Don't scale images in Word. And as an interesting note, Word assumes that if you use a GIF file, it will be for screen use. Regardless of the GIF's set print resolution, Word places GIF images at standard screen resolution. They own the format, they can do what they want.

Penn State
April 18, Symposium 2009; reimagine.
New content. Symposium 2008.Digital Commons at Penn State. Improve the workplace; hire for variety.


Blogging at Penn State.

Recent Comments

Podcasts at Penn State.

My Network:

Me with a camera.

My Links: