After completing this unit, you will be able to:
For a great overview of the technical differences in various digital image formats see: MODassic (n.d.). Vector, Raster, JPG, EPS, PNG – What’s the difference? Available from https://modassicmarketing.com/understanding-image-file-types
Images used in educational multimedia projects need to include alt-text that describes the image or identifies it as decorative. In formal educational settings, this is required by law. For a good description on how to write alt-text, see Alt Text by Moz at https://moz.com/learn/seo/alt-text. |
Ruth and Mayer (2011) highlight that images should be used to support learning. They categorize images as:
- Decorative graphics serve to decorate the page without enhancing the message of the lesson, such as photo or a video of person riding a bicycle in a lesson on how bicycle tire pumps work.
- Representational graphics portray a single element, such as photo of the bicycle tire pump along with a caption, “Bicycle Tire Pump.”
- Relational graphics portray a quantitative relationship among two or more variables, such as a line graph showing the relation between years of age on the x-axis and probability of being in a bicycle accident on the y-axis.
- Organizational graphics depict the relations among elements, such as a diagram of a bicycle tire pump with each part labeled or a matrix giving a definition and example of each of three different kinds of pumps.
- Transformational graphics depict changes in an object over time, such as a video showing how to fix a flat tire, or a series of annotated frames showing stages of how a bicycle tire pump works.
- Interpretive graphics illustrate invisible relationships such as an animation of the bicycle pump that includes small dots to show the flow of air into and out of the pump.
Some examples of images used in education are for (1) illustrations of complex topics, (2) conceptual frameworks, (3) infographics, and (4) decorations (i.e. decorative images).
Illustrations are images that help to explain complex topics or procedures.
For example, Ikea provides all of their installation instructions using images. It is extra impressive that the only “text” involved is the name of the product and the numbers associated with the quantity of a given part and the step within the procedure.
Conceptual frameworks (aka graphic organizers) are images that provide a visual organization of information. I use conceptual frameworks when designing courses to help describe how the different components of a course are related to one another. For example, a course that I teach on Designing on online professional presence uses this conceptual framework.
Infographics are images that have been created to share an idea. Conceptual frameworks as an example of an infographic. Infographics are also very common as a way to explain statistical information to people in a visual manner.
The CDC website contains a lot of great examples of infographics. Here is one that describes what to do to prepare for an earthquake.
Decorative text should not include alt-text descriptions, rather, the image should be marked as “decorative”. This allows screen readers for visually impaired readers to skip over images that are included strictly for the benefit of site or page cosmetics.
When adding images to eBooks and Websites, you need to consider:
When resizing images make sure you do not distort them. If you need to change the dimensions of an image, you will want to “crop” it rather than resize it. You may need to do a combination of both to make your image fit your design. It is better to do this in your image creation tool rather than on your website or within your eBook. |
In addition, you need to consider whether or not to embed the image or copy the image. When you embed an image it is stored someplace outside of the website or eBooks. For websites, you want to embed if you are concerned about the amount of disk space quota you have. For my websites, I use Smugmug to store all my photos and images and I embed them. This allows me to not worry about the file size of the images. Flickr offers a free version that provides similar functionality.
When using images that you did not create, it is best to embed the image rather than copy it. In addition, you should include image attributions. Images should never be copied without permission. |
Images cannot simply be re-used. This is especially the case for photographs. By default images are copyrighted. Don’t get yourself into trouble by illegally copying images. Education use will not protect you.
Because your projects are likely to be used in your portfolios, you should stick to images that you are allowed to freely use. There are many sources for royalty free images that you can use. I recommend when searching that you select only images that you are free to use for commercial purposes, as you never know how you will use your project in the future. In addition, it is considered good practice to credit the source of your images, even when it is not technically required.
Creative Commons provides the most robust and common licensing mechanism for web resources that you are able to use in your projects. They provide a good overview on how Creative Commons licenses work. Consider how you want to license each element that you create as well as your overall project. Be aware that some items that you use may be licensed as “share alike” such that you cannot copyright them, rather you must use a similar license on your derived product.
See the next section for sources of royalty free images that you can use for your projects.
Images generated by AI tools are currently free to use without restriction. However, this technology is evolving quickly. Check sources for changes and updates. |
Image components are the elements, such as icons, that you may wish to include in your image compositions, such as infographics and conceptual frameworks. Here are some sources for image components.
When using photographs, ensure you have permission from the copyright holder to use the image. In addition, validate whether or not your are permitted to make derivatives. Since header images often crop images to fit the theme, you need images that you have permission for derivatives.
Sources for free photographs that can be used for feature images and other decorations on your websites and eBooks include:
Image composition tools are tools that you use to build more complex images. Most educational images require some form of composition. In addition, image composition tools can be used to resize your images for your projects.
Bitmap image tools are typically used for editing photographs. These tools have become synonymous with Photoshop, however, there are other options:
There are many popular online services for creating infographics. Many offer free subscriptions and educational discounts. Here are a few examples:
The following AI image generators create images from text prompts.
Feature images need to be loaded directly onto your site. For the remainder of your images, you will save hosting space if you use an image specific hosting site.
This content is provided to you freely by EdTech Books.
Access it online or download it at https://edtechbooks.org/DID_Multimedia/images.