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 in Unit 3 (Intellectual Property) 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.

shows how clarity of image changes with resolution

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 on a webpage.

There are many free tools available for resizing and compressing images, from nerdy powerful editors to simpler online apps. Here are a few to explore:

Resize Photos
JPEG Optimizer
Paint.net
IrfanView
GIMP
How to reduce the file size of an image in a Word doc

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.

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 high 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.)

For your information:

6 of the Best Free Video Editing Software Programs for 2018
13 of the Best Free Audio Editors in 2018

"Search for free online tutorials about digital skills." Arjun, 2nd-year student