Still images

From UBC Wiki


Finding, creating and displaying images online is an important aspect of creating any kind of web presence. The ability to make the right choices and provide the best possible images for your specific educational aims is highly dependent on understanding and mastering number of concepts around digital images and their use online.


The art and science of taking, developing and publishing pictures stayed pretty much the same for over a century, only to be completely reinvented in last decade or so. A couple of parallel processes that took place are responsible for fundamental changes in how we think about creating or using photography and pictures in general. These processes are:

  • The rapid development of the Internet, particularly the personal publishing aspect that offers a framework for being able to find, share and discuss photography.
  • The democratization of photography and image editing. In the past, the ability to take (or post-process) great pictures was reserved for small group of experts with expensive tools, including cameras, computers and software. Today, digital cameras are becoming more powerful and simultaneously cheaper; there are now many free (or very inexpensive) desktop and online tools for photo editing and sharing.

Design Questions/Issues

There is a wide range of topics that need to be addressed when considering using digital images in online education:

Managing your image repository

    • In case of large collections, you may consider software packages to manage you collections. Typical workflow includes image check-in, meta-data management, and delivery (information about its usage).
    • For smaller collections both PCs and Macs are well equipped with file tagging and description capabilities built into their operating systems; for larger collections, iPhoto or Picasa are good choices.

Sourcing images online

    • If there is no specific license attached to an image online, the image is copyrighted by default.
    • To use an image in your web space, you have to have explicit permission from the author, or an image has to have a Creative Commons (or other license) attached that explicitly says you can use it—usually with attribution: identifying the person who owns the image.

Taking pictures yourself

    • Inventory the tools that you need: cameras, scanners, software etc.
    • Preparing images for online
    • Uniformity of image treatment, resolution and size – you would like to have images that carry the same “feel” across, as much as possible. Different styles could confuse the learners and give wrong perspective on topicsdepending on purpose images should be compressed as either JPGs or GIFs, although lately the PNG file format is gaining popularity because of its flexibility. You should also consider size – keeping the large original is a must while resizing to appropriate sizes thumbnail, medium and large) for internet.


  • Images could be uploaded to the web server where the rest of material is hosted (in an LMS, for example), put on dedicated media servers, or on one of a number of photo sharing sites (see Additional Resources below).


  • Each image should be described using “alt” attribute of <img> tag. This assures that people who cannot see original graphics and use screen readers will get sufficient information about an image


In this activity you will edit two copies of the same image using your device's bundled photo/image software. The actual software will depend on your device type (computer, tablet, smartphone) and operating system. You will need two copies of the same image to work with. Do not use your original photo, since you may not be able to undo your work.

  1. Crop the image to remove parts that aren't ideal around the main element of the image
  2. Resize the image size so the file size is smaller
  3. Convert the image to a different format. Your phone might capture beautiful images--but ones that are too large, in terms of file size. So try using .png, .jpg or other file formats: how does the file size change, depending on the file format.
  4. Try adding the image in different online spaces: a Canvas discussion post, a page in your eportfolio, and in your course site. How easy is it to add, edit, and position images on each?

There are all sorts of tutorials for whatever software you use on the web. Have fun exploring!


Write an entry for your course weblog about your experience here (on your "Reflection" page and posting a new entry). How labour intensive was the process? What worked well? What was challenging? What surprised you?


Managing images repository on your computer

Both Mac OS and Windows include decent management tools to name, describe and tag photos. These applications are bundled on most new machines:

Online image respository offering free (and paid) image hosting

Finding images online

Additional Resources

JIISC Digital Medai is a UK government agency whose mandate is to provide support to post-secondary and higher education educational professionals around issues of digital media usage. There are a number of excellent tutorials, best practice guides, and case studies.