Working with Media Files
There are various issues that arise when putting media files -- image, video and audio -- online, including how you obtain the file and how you modify it. You can always use your own created media, and elsewhere in this course we talk about using other people's content legally and responsibly.
Here, we focus on how you modify the file to make it suitable for using on the web.
Image size and resolution
The first thing to understand when working with image files is that there is a difference between an image's apparent display size and its file size. It's useful to think about it as if the display size -- the proportions on the screen, usually measured in pixels -- is comparable to a person's height. Similarly, the file size -- the amount of space it takes up on your computer or device, usually measured in kilobytes (KB) and megabytes (MB) -- is comparable to a person's weight. These two measurements are often linked, but they are not necessarily directly connected.
An image that looks small on the screen may, in fact, be "heavy" in terms of file size, especially if it has a high resolution. Image resolution refers to the amount of detail in an image and is measured in various ways, including how many pixels per square inch (PPI -- screen only) or dots per square inch (DPI -- used in printing). This means that sometimes a small image can have a surprisingly large file size, either because it is very clear and detailed with high resolution, or that is is still blurry but badly resized and compressed.

This image shows the way the same graphic displays with different resolutions
Resize and compress
Compression is the process that takes an image or other media file with a large file size and reduces it to a smaller file size, which makes it more suitable to use on the web and helps people with slow internet speeds, outdated equipment and limited data allowances. You may or may not also change the display size of an image. Even if your browser or app seems to show the image as fitting on the screen, it may only appear that way and not be properly resized and compressed. Even with high speeds and brand new devices, unnecessarily large images slow things down and bloat data usage for no good purpose.
Many social media apps now resize and compress media automatically and also offer a range of tools for changing the look of images before you post them. However, when you obtain a high quality image or save a photo from your own camera, it is likely that the image will be very large and need resizing and compressing before you use it in your online course or webpage.
There are many free tools available for resizing and compressing images, from nerdy powerful editors to simpler online apps. Here are some to explore:
- Resize Photos
- JPEG Optimizer
- Paint.net
- IrfanView
- GIMP
- How to reduce the file size of an image in a Word doc
- Image editing overview
Have you ever tried making an image larger than its original size? Most likely it didn't look good --
that's because the display size changed but the resolution didn't.
AI and Images
These days, the world is becoming awash with AI images. There are pros and cons to using these tools, and we discuss more about AI elsewhere in the course. You may find creating images using AI works better for your particular needs than finding existing images and navigating copyright.
Once you have the image, however, you may still face the sizing and resolution issues outlined here.
Audio and Video
Audio and video files tend to be very large compared to images, and many websites limit the maximum size of files permitted to upload. There are two ways to manage the size of audio and video files:
- Keep them short in duration
- Compress them
Generally, the shorter the duration, the smaller the file, but -- like images with resolution -- the hidden factor is the quality of the media: a short clip may be a very large file because it has been recorded in high quality. The app or tool you use to edit the file will have settings for compressing and reducing the file for output. The file type will also affect the quality: .wav files tend to be higher quality and larger files than .mp3 files, etc.
Some sites, such as YouTube will automatically compress and reduce the size of files as they are being uploaded. These sites that allow you to upload and store videos make it easy to link to them and embed them in other sites, which means you do not have to adhere to the strict file maximums of the site where you want to display the media. (This course contains videos embedded from YouTube.)