I do a unit on "essential image information for the www" (year 10)

I talk about image formats (bmp, jpeg, gif, png, xcf, psd), file sizes (images tend to be larger), the difference b/w a byte, KB, MB, GB, TB etc., the importance of compression, download times (6 KB/sec for 56K modem), that people don't like waiting - Jacob Nielsen studies show more than 10 seconds is intolerable, etc.

I have a worksheet about all of this

I try to make it concrete - for example I get students to convert a bmp (260 KB) to a gif (6 KB) and then a JPEG (20 KB) and then calculate download times for each file over a 56K modem
bmp 43 secs
gif 1 sec
jpeg 3 secs

It's hard work teaching this - there is a lot of learning involved here

some brief points:

  • by default Windows XP now conceals the 3 letter file endings, so that's another thing to teach - how to not hide them
  • many students can't do maths, can't convert KM to MB, don't realise you have to divide by 6 to calculate download times etc.
  • a lot of students in disadvantaged schools such as my schools don't have computers and / or internet at home
  • some who had internet lose it because they haven't kept their virus protection, firewall and updates in place
  • the significance of different image formats is new to most - some are native formats (xcf, psd), some are old (bmp), some are compressed (gif, jpeg), some are new and not used as much (png)

I'm just trying to teach the essentials but it sometimes feels like I'm not making a lot of progress
Bill 5thMay

A good feature of the ScreenIt2005 game programming competition was the limitation on file size. This forced some discipline in the use of graphics,
Tony, 6 May

The problem of (all versions of) Windows hiding the file extension is a signficant problem. I'd hate to count the times that someone has saved something like "mypage.htm.txt" and then wonder why the web server isn't finding it (as mypage.htm) ... or someone has managed to get one of the browsers set as the default application for .bmps (or something) - students then find it hard to open the file, and when asked what "type" of file (by which I mean .bmp, .jpg, .gif etc) they say "internet", which is (a) imprecise and (b) inaccurate if it is a .bmp or .wmf or something Then you commence to show extensions and try to figure out what's going on, and to the struggling end-user, it all looks like witchcraft. I actually reckon that a realisation that there's more to a (window) file name than meets the eye is a pretty fundamental skill, which distinguishes between the "better" computer users and the rest. It's one of those "enabling" concepts which I'm keen on exploring. More to the point, I reckon we need to acknowledge this as both important and difficult to teach, and find some creative ways to teach "file names and extensions" - activities both on and away from the computer. And then we can get on with the business of contextualising this skill in a broader framework, such as "images for the www".

And file formats! This is hard stuff to teach. I won't profess to having created any brilliant ideas for how to teach it, but I think we should - because students who seem to have a grip on the ideas that (a) all documents have to be represented in some way or other and (b) there are different ways of doing it - seem to be able to cope with such ideas better than others. For most of us, we can get along most of the time oblivious to all of this, but every so often a little "twist" jumps up and you need to be a more "empowered" (possibly meaning technically savvy) user to navigate around it. Whether it's image formats or saving a word document as a .rtf or .txt (ie mydoc.doc is NOT the same as mydoc.txt.doc or mydoc.doc.txt). So, to repeat myself, I reckon we need to acknowledge this as both important and difficult to teach, and find some creative ways to teach "file formats" (which will have some overlap with "file names") - activities both on and away from the computer. And then we can get on with the business of contextualising this skill in a broader framework, such as "images for the www".
Paul, 8 May

All very good points. Microsoft want windows applications to be "seamless", they dont want us to know what application is actually opening the file or why. Which is fine when it works but doesnt leave you a leg to stand on when things go wrong. I was surprised that hiding extensions was the default at my school and I lost a bit of time saving index.htm.html. Tony 8May

What I would suggest is to distinguish every aspect of images for online delivery. Images in itself is a broad topic with relation to its delivery; for print or for screen (online being in this category).

1. A good start is to work with a raw uncompressed image, this may be something that you captured through a scanner or a camera with the highest possible resolution and/or dimension.
2. With the specific goal of preparing it for online delivery, get the student to save it in a variety of formats suitable for online delivery, e.g. JPEG, GIF, and PNG. This is where your image editing programs come in.
3. With each format, have at least 3 to 4 varients (interlaced, non-interlaced, transparent backgound, solid-coloured background, 50% compression, 0 compression, minimal colours, grayscale, web-safe colours, image dimensions, etc.).
4. Test this images for file sizes, adaptability to web documents (e.g. will its transparency blend in with the background), zoom in and compare the image quality - was there pixelation, etc.
5. How would these different variants affect its effectiveness for online delivery?

With regards to Jacob Nielsen, he is an admirable evangelist for web usability however, his views can be a bit of a challenge with visual and creative learners. Not that he is instructing users to always follow his lead, his views are suggestions on how to better communicate with the audience, take it with a grain of salt. : )

I read that file sizes was discussed here, should we add another page for binary vs. decimal. Is 1KB equal to 1000 bytes? How do machines (computers) interpret instructions?

Michael 17May06