A thread on images

When choosing images for your online teaching, make sure you choose wisely.

Key things that you need to think about are:

Image size
Display requirements
Data compression

1/10

Image size.

Large file sizes take longer to download, so your webpage might load slower. This will depend on people’s download speed, data limits etc.

If you’re printing images in handouts the image size is less of an issue, but it’s so important in online teaching.

2/10

Know the types of images.

The key types to know are raster + vector. This is important because it’ll affect what happens if you try to enlarge the image.

Raster – cannot be scaled up larger otherwise it’ll look pixelated

Vector – can be scaled up no problem

3/10

Know your file forms

JPEG. Image is compressed (smaller file with a small loss in quality)

GIF. Limited to 256 colours so has a smaller file size

PNG. Handles up to 16 millions colours (smaller file size than GIF)

SVG. Can be scaled up to any size + won’t lose quality

4/10

Compression. This is how much you can reduce the file size before you lose quality.

For online you want the highest quality with the smallest size.

JPEG. Lossy – some file info is compressed or lost

GIF and PNG. Lossless – compressed but without losing quality

5/10

Find images.

You can get free images for your projects on some sites:
http://unsplash.com 
http://pixabay.com 
http://google.com  (with the right license)

Or if you want to pay for stock images check out:
http://shutterstock.com 
http://storyblocks.com 

6/10

Edit them if needed (but make sure you have permission to do so)

You can edit your images in many different softwares.

I use @Photoshop, @canva, and @Procreate

You can also try:

http://inpixio.com 
http://ribbet.com 
http://befunky.com 

7/10

Optimise your images for online teaching.

This is the process you should go through to save the image at the right size and dimensions for whatever you need.

Some websites can help with this:

http://Kraken.io 
http://ImageOptimizer.net 
http://Compressor.io 

8/10

Alternative text

Remember to include alt text tags for image descriptions.

They don’t change how the image looks, but when you hover over one you will see a text description of the image.

This allows screen readers to share this info with visually impaired learners.

9/10

Images are core to designing good online teaching but you need to know where to find them, what you are looking for, and how to optimise then.

This will allow your learners to access them easily, load them quickly, see them clearly, and understand them.

10/10