Glanz: aiMOOC über GPT aiMOOC Action erstellt

2026-08-11T21:33:32Z

aiMOOC über GPT aiMOOC Action erstellt

Neue Seite

{{T}}
[[Category:English]]
[[Category:Images, Audio, and Video Formats]]

{{BR}}
= Introduction =

Every photo, song, voice recording, animation, and movie on a digital device is stored as '''data'''. A [[English:File format|file format]] is a set of rules that tells software how that data is organized. The letters after the final dot in a filename, such as ''.jpg'', ''.png'', ''.mp3'', or ''.mp4'', are called the [[English:Filename extension|filename extension]]. The extension gives you a clue about the file format.

In this aiMOOC, you will learn how common '''image, audio, and video formats''' work, why the same media can be saved in different ways, and how to choose a useful format for a school project. You do not need to memorize every format. Your main goal is to understand the choices: image or sound or video, pixel or vector, larger or smaller file, lossless or lossy compression, and simple file or container.

[[File:Graphics file formats (EN version).svg|500px|frameless|center]]

A good file format depends on what you want to do. A class photo, a transparent logo, a voice recording, and a short movie have different needs. Choosing a format is a little like choosing the right school bag: the best choice depends on what you need to carry.

{{BR}}
== Learning Goals ==

By the end of this course, you should be able to explain what a file format and filename extension are, compare common image formats, compare common audio formats, identify common video containers, explain compression in simple words, and choose a suitable format for a real task. You will also practice checking compatibility, quality, file size, and safe sharing.

{{BR}}
= Files, Formats, and Extensions =

A computer stores information as bits. Software follows agreed rules so it can turn those bits back into a picture, sound, or video. Those rules make up a '''file format'''. A [[English:Filename extension|filename extension]] is usually the short ending after a dot.

Examples include:

# [[English:JPEG|JPEG]]: A photo might be named ''school_trip.jpg''.
# [[English:Portable Network Graphics|PNG]]: A transparent badge might be named ''club_badge.png''.
# [[English:MP3|MP3]]: A short interview might be named ''interview.mp3''.
# [[English:MPEG-4 Part 14|MP4]]: A class movie might be named ''science_demo.mp4''.

The extension is useful, but it is not magic. Changing ''photo.jpg'' to ''photo.png'' by renaming the letters does not truly convert the file. Conversion requires software to read the old data and save it again using the rules of the new format.

{{#ev:youtube|https://www.youtube.com/watch?v=USCBCmwMCDA|500|center}}

'''File size''' tells you how much storage space a file uses. Large files can contain lots of detail, but they may take longer to upload, download, send, or open. [[English:Data compression|Data compression]] reduces the amount of data needed.

{{BR}}
== Lossless and Lossy Compression ==

'''Lossless compression''' makes a file smaller without throwing away the original information needed to rebuild it exactly. PNG and FLAC are common examples of formats that use lossless compression.

'''Lossy compression''' makes a file smaller by removing some information. It tries to remove details that people are less likely to notice. JPEG photos and MP3 audio commonly use lossy compression. Strong lossy compression can make a file much smaller, but too much can reduce quality.

[[File:JPEG compression Example.jpg|500px|frameless|center]]

In the image above, strong JPEG compression makes some details look blocky or smeared. This visible damage is called a '''compression artifact'''.

[[File:Compression.artifacts.jpg|500px|frameless|center]]

{{BR}}
= Image Formats =

Digital images can be stored mainly as '''raster''' images or '''vector''' images.

A [[English:Raster graphics|raster image]] is made from a grid of tiny colored squares called [[English:Pixel|pixels]]. Photographs are usually raster images. When you enlarge a small raster image a lot, the pixels can become visible.

A [[English:Vector graphics|vector image]] stores instructions for shapes, lines, curves, and colors. A vector drawing can usually be made much larger without becoming blocky. This makes vector formats useful for logos, icons, maps, and diagrams.

[[File:Pixels and Vectors.svg|500px|frameless|center]]

{{#ev:youtube|https://www.youtube.com/watch?v=15aqFQQVBWU|500|center}}

{{BR}}
== JPEG and JPG ==

'''JPEG''' usually uses lossy compression. The filename extension is often ''.jpg'' or ''.jpeg''. JPEG is a strong choice for photographs with many colors and gradual changes in brightness. It can make photo files much smaller.

JPEG is usually not the best choice for a simple logo, diagram, or screenshot with very sharp text because compression artifacts may become visible around hard edges.

'''Good use:''' a photo from a school trip that needs to be uploaded with a smaller file size.

{{BR}}
== PNG ==

'''PNG''' stands for Portable Network Graphics. PNG uses lossless compression and can support transparent areas. It is useful for screenshots, diagrams, graphics with sharp edges, and images that need transparency.

[[File:PNG transparency demonstration 1.png|500px|frameless|center]]

In the image above, the transparent parts can let a background show through. This is useful when a logo or object should appear without a solid rectangular background.

'''Good use:''' a transparent school-club badge or a screenshot with readable text.

{{BR}}
== GIF ==

'''GIF''' can store simple raster graphics and can contain a sequence of frames to make a short animation. Traditional GIF images use a limited color palette, so GIF is not usually the best choice for a detailed photograph. GIF animations normally do not contain sound.

[[File:Animated-gif.gif|500px|frameless|center]]

'''Good use:''' a short, simple looping animation that does not need audio.

{{BR}}
== SVG ==

'''SVG''' stands for Scalable Vector Graphics. It describes vector shapes using text-based instructions. SVG is excellent for diagrams, icons, symbols, and logos that may need to appear at many sizes.

[[File:Bitmap VS SVG.svg|500px|frameless|center]]

'''Good use:''' a school logo that needs to look sharp on both a small phone screen and a large poster.

{{BR}}
== Choosing an Image Format ==

Ask what the image contains and what you need to do with it. For a photo, JPEG is often practical. For transparency or a screenshot, PNG is often useful. For a simple animation, GIF can work. For a scalable diagram or logo, SVG can be a strong choice.

The choice is not only about quality. You should also consider whether the website or app accepts the format and how large the file is.

{{BR}}
= Audio Formats =

Digital sound is created by measuring a sound signal many times each second and storing those measurements as data. A visual drawing of changing sound pressure is called a '''waveform'''.

[[File:Waveforms.svg|500px|frameless|center]]

[[File:Audio file.svg|300px|frameless|center]]

Audio quality and file size depend on several choices, including the way the sound is sampled, encoded, and compressed. For Grades 5–6, the most useful idea is simple: some formats keep more information and make larger files, while other formats use compression to save space.

{{BR}}
== WAV ==

'''WAV''' is a container format often used to store uncompressed PCM audio. Files can be large, but this makes WAV useful when recording or editing sound before creating a smaller final version.

'''Good use:''' keeping a high-quality original recording for an audio project.

{{BR}}
== MP3 ==

'''MP3''' is a common audio format that uses lossy compression. It removes some audio information to reduce file size. This can make MP3 convenient for spoken recordings and music when small size and wide playback support are important.

'''Good use:''' sharing a class podcast when a smaller file is helpful.

{{BR}}
== FLAC ==

'''FLAC''' stands for Free Lossless Audio Codec. It compresses audio without losing the original audio information. FLAC files are often larger than lossy files such as MP3, but they preserve the audio data.

'''Good use:''' archiving a recording when keeping the original sound information matters.

{{BR}}
== OGG and Open Audio ==

'''Ogg''' is an open multimedia container. It can hold audio encoded with formats such as Vorbis or Opus. You may meet ''.ogg'' or ''.oga'' files in open-source projects, websites, games, and learning platforms.

For everyday schoolwork, you do not need to memorize the technical details. Remember that a filename extension tells you something about how a file is stored, but software compatibility still matters.

{{#ev:youtube|https://www.youtube.com/watch?v=WIIKXOrt3bk|500|center}}

{{BR}}
= Video Formats =

A digital video is a rapid sequence of images called '''frames''', usually combined with audio. Videos can become very large, so compression is especially important.

[[File:Film strip.svg|300px|frameless|center]]

A useful new word is '''container'''. A video container is like a digital box. It can hold a video stream, an audio stream, subtitles, and other information. A '''codec''' is a method used to encode and decode the picture or sound data inside that box.

This means that ''.mp4'' tells you about the container, but two MP4 files can still use different codecs inside.

[[File:Container Formats Examples.svg|500px|frameless|center]]

{{#ev:youtube|https://www.youtube.com/watch?v=hvgxn8v--8Q|500|center}}

{{BR}}
== MP4 ==

'''MP4''' is a widely used multimedia container. It can hold video, audio, subtitles, and other information. Many phones, tablets, computers, websites, and learning platforms can use MP4 files, although exact codec support can differ.

'''Good use:''' exporting a short class video for common devices or a school learning platform.

{{BR}}
== WebM ==

'''WebM''' is an open multimedia container designed for web media. It is often used for video and audio on websites. Whether it plays on a particular device depends on the browser, app, and codecs used.

'''Good use:''' web-based video where an open web-media format is supported.

{{BR}}
== MOV ==

'''MOV''' is a multimedia container associated with Apple QuickTime. It is often used by cameras and editing software. A MOV file may be excellent for editing, but you should check whether the place where you want to submit or share it accepts that format.

{{BR}}
== AVI ==

'''AVI''' is an older multimedia container introduced by Microsoft. AVI files can contain media encoded in different ways, so compatibility and file size can vary.

{{BR}}
== Video Compression and Frames ==

Video compression can reduce repeated information between frames. Instead of storing every detail of every frame as if it were a separate full photograph, many video systems store some frames fully and describe changes for other frames.

[[File:I P and B frames.svg|500px|frameless|center]]

You do not need to know the names of all frame types yet. The main idea is that smart compression helps video use less storage and bandwidth.

{{#ev:youtube|https://www.youtube.com/watch?v=QoZ8pccsYo4|500|center}}

{{BR}}
= Choosing the Right Format =

Before you save or export a media file, ask these questions:

# [[English:Purpose|Purpose]]: Is the file a photo, transparent graphic, animation, sound recording, or video?
# [[English:Quality|Quality]]: How much detail must be preserved?
# [[English:File size|File size]]: Does the file need to upload quickly or fit a size limit?
# [[English:Compatibility|Compatibility]]: Can the teacher, website, app, or device open this format?
# [[English:Editing|Editing]]: Do you need a high-quality original for future changes?
# [[English:Accessibility|Accessibility]]: Does a video need captions, or does an image need useful alternative text when published online?
# [[English:Privacy|Privacy]]: Does the file contain personal information or metadata that should not be shared?

A sensible workflow is to keep a good-quality original, make edits from that original, and export a copy in the format needed for sharing. Repeatedly saving a lossy file can reduce quality.

{{BR}}
== Media Safety and Privacy ==

Photos and videos may reveal faces, names, school locations, house numbers, or other private details. Camera files can also contain [[English:Metadata|metadata]], such as the date, device information, and sometimes location data. Before you publish media, follow your school rules, ask permission when needed, and check what information the file may reveal.

Copyright also matters. Use media you created yourself, media you have permission to use, or appropriately licensed resources such as files from [[English:Wikimedia Commons|Wikimedia Commons]]. Give credit when the license requires attribution.

{{BR}}
= A Quick Format Guide =

{| class="wikitable"
! Media
! Format
! Main strength
! Common school use
|-
| Image
| JPEG
| Small photo files with lossy compression
| Photos for reports or websites
|-
| Image
| PNG
| Lossless quality and transparency
| Screenshots and transparent graphics
|-
| Image
| GIF
| Simple frame animation
| Short silent loops
|-
| Image
| SVG
| Vector graphics that scale cleanly
| Logos, icons, and diagrams
|-
| Audio
| WAV
| Often used for high-quality uncompressed audio
| Recording and editing originals
|-
| Audio
| MP3
| Smaller files with lossy compression
| Podcasts and spoken recordings
|-
| Audio
| FLAC
| Lossless audio compression
| Archiving high-quality sound
|-
| Video
| MP4
| Widely used multimedia container
| Class videos and presentations
|-
| Video
| WebM
| Open web-media container
| Video for supported websites
|-
| Video
| MOV
| Common in recording and editing workflows
| Camera clips and editing projects
|}

{{BR}}
= Interactive Tasks =

{{BR}}
== Quiz: Test Your Knowledge ==

{{MC}}

'''What does a filename extension usually tell you?'''
(It gives a clue about the file format)
(!It tells you who owns the computer)
(!It shows how old the device is)
(!It guarantees the file has no virus)

{{E}}
<br>

{{MC}}

'''Which format is often a practical choice for a photograph that should have a smaller file size?'''
(JPEG)
(!SVG)
(!WAV)
(!FLAC)

{{E}}
<br>

{{MC}}

'''Which image format is well known for lossless compression and transparency?'''
(PNG)
(!JPEG)
(!MP3)
(!AVI)

{{E}}
<br>

{{MC}}

'''Which format stores vector shapes and can scale without becoming blocky like a small raster image?'''
(SVG)
(!GIF)
(!MP3)
(!WAV)

{{E}}
<br>

{{MC}}

'''Which image format is commonly used for short simple animations?'''
(GIF)
(!FLAC)
(!MP4)
(!WAV)

{{E}}
<br>

{{MC}}

'''Which audio format commonly uses lossy compression to make files smaller?'''
(MP3)
(!FLAC)
(!SVG)
(!PNG)

{{E}}
<br>

{{MC}}

'''Which audio format uses lossless compression?'''
(FLAC)
(!MP3)
(!JPEG)
(!GIF)

{{E}}
<br>

{{MC}}

'''What is an MP4 file mainly described as in this course?'''
(A multimedia container)
(!A vector drawing)
(!A text document)
(!A still image only)

{{E}}
<br>

{{MC}}

'''What is the main purpose of data compression?'''
(To reduce the amount of data needed)
(!To rename every file)
(!To add a password automatically)
(!To turn every image into video)

{{E}}
<br>

{{MC}}

'''What should you check before submitting a media file to a school platform?'''
(Whether the platform accepts the format)
(!Whether the filename is the longest possible)
(!Whether the file has been renamed many times)
(!Whether every file uses the same extension)

{{E}}
<br>

{{BR}}
== Memory Game ==

<div class="memo-quiz">
{|
|-
| JPEG || Photo format that commonly uses lossy compression
|-
| PNG || Lossless image format that can support transparency
|-
| SVG || Vector format for scalable shapes and diagrams
|-
| GIF || Image format often used for simple silent animation
|-
| MP3 || Audio format that commonly uses lossy compression
|-
| WAV || Container often used for uncompressed PCM sound
|-
| FLAC || Audio format that compresses without losing original information
|-
| MP4 || Multimedia container that can hold picture and sound streams
|}
{{E}}
<br>

{{BR}}
== Drag and Drop ==

<div class="lueckentext-quiz">

{| class="wikitable"
! Match the correct terms.
! Topic
|-
| '''JPEG'''
| Photograph that needs a smaller file size
|-
| '''PNG'''
| Screenshot or graphic that needs transparency
|-
| '''SVG'''
| Scalable logo made from shapes
|-
| '''MP3'''
| Compressed spoken-word audio
|-
| '''MP4'''
| Container for a class video with sound
|}
{{E}}

<br>
Choose each format by thinking about the kind of media, quality, size, and compatibility.
<br />

{{BR}}
== Crossword Puzzle ==

<div class="kreuzwort-quiz">
{|
|-
| Pixel || What tiny colored square makes up a raster image?
|-
| Raster || What kind of image is built from a grid of pixels?
|-
| Vector || What kind of graphic stores shapes and lines instead of a pixel grid?
|-
| Codec || What method encodes and decodes media data inside a container?
|-
| Lossless || What compression type keeps all information needed to rebuild the original?
|-
| Container || What digital box can hold video audio subtitles and other information?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==

<iframe> https://learningapps.org/index.php?s=Images,+Audio,+and+Video+Formats </iframe>

{{BR}}
== Cloze Text ==

<quiz display=simple>
{'''Complete the text.'''<br>
|type="{}"}
The letters after the final dot in a filename are called the { extension }. A raster image is made from tiny squares called { pixels }. A format that stores shapes and lines is called a { vector } format. JPEG usually uses { lossy } compression to make photographs smaller. PNG can preserve image data with { lossless } compression. A simple silent animation can be stored as a { GIF }. MP3 commonly makes audio smaller by using { compression }. FLAC keeps the original audio information and is therefore { lossless }. An MP4 file is a multimedia { container }. Before sharing a file, you should check its quality size privacy and { compatibility }.
</quiz>

<br>

{{BR}}
= Open-Ended Tasks =

{{BR}}
=== Easy ===
# [[English:File Detective|File Detective]]: Find six media files on a school device or teacher-provided folder. Write each filename extension and classify it as image, audio, or video.
# [[English:Pixel Zoom|Pixel Zoom]]: Open a raster image and zoom in until you can see pixels. Make a small drawing that shows what you observed and label the pixels.
# [[English:Format Choice Cards|Format Choice Cards]]: Create four cards for JPEG, PNG, MP3, and MP4. On each card, write one useful school task for that format and one reason for your choice.
# [[English:Sound and Picture Hunt|Sound and Picture Hunt]]: Take or select one safe photo and record a short sound. Write down the formats used and explain how you discovered them.

{{BR}}
=== Standard ===
# [[English:Image Export Experiment|Image Export Experiment]]: Create one simple image and export it as JPEG and PNG. Compare sharpness, transparency if available, and file size, then write a short conclusion.
# [[English:Audio Size Experiment|Audio Size Experiment]]: Record the same short sentence in two audio formats available in your software. Compare file size and listening quality and report what changed.
# [[English:Animation Story|Animation Story]]: Make a short silent GIF or frame-by-frame animation that teaches one classroom rule. Explain why an animation format fits the task.
# [[English:Video Storyboard|Video Storyboard]]: Plan a 30-second class video with picture, spoken audio, and captions. Choose an export container accepted by your school system and justify the choice.

{{BR}}
=== Advanced ===
# [[English:Compression Investigation|Compression Investigation]]: Save copies of the same photograph at different JPEG quality settings. Build a table of file sizes and visible artifacts and decide which version gives the best balance for a class website.
# [[English:Codec and Container Explainer|Codec and Container Explainer]]: Create a one-minute video or illustrated poster that teaches younger learners the difference between a video container and a codec using your own analogy.
# [[English:Media Creator Interview|Media Creator Interview]]: Interview a teacher, school media specialist, podcaster, photographer, or video creator about how they choose formats. Summarize at least three decisions involving quality, size, editing, or compatibility.
# [[English:Accessible Media Portfolio|Accessible Media Portfolio]]: Produce a mini portfolio containing an image, an audio clip, and a short video. Add useful alternative text for the image, a transcript for the audio, captions for the video, and a short note explaining each chosen format.

{{:Open Task - Create a MOOC}}

{{BR}}
= Learning Assessment =

# [[English:Format Decision Challenge|Format Decision Challenge]]: Given a photograph, transparent logo, podcast, and class video, choose a suitable format for each and justify every choice using purpose, quality, size, and compatibility.
# [[English:Compression Evidence|Compression Evidence]]: Compare two differently compressed versions of the same media file and explain which differences are visible or audible and why a smaller file may involve a trade-off.
# [[English:Raster and Vector Transfer|Raster and Vector Transfer]]: Explain why a small raster logo may look blocky on a poster while a suitable vector version can remain sharp, then propose the better format for the poster.
# [[English:Container Reasoning|Container Reasoning]]: Explain why knowing that a file ends in ''.mp4'' does not tell you every technical detail about the video and identify what else can matter for playback.
# [[English:Safe Sharing Scenario|Safe Sharing Scenario]]: Review a pretend class photo or video-sharing plan and identify privacy, metadata, permission, copyright, and accessibility checks that should happen before publishing.
# [[English:Workflow Design|Workflow Design]]: Design a three-step media workflow that keeps a high-quality original, creates an editable version, and exports a sharing copy in a suitable format.

<br>
<br>

{{BR}}
= Evidence of Learning =

Strong evidence of learning includes accurate use of the words '''format, extension, pixel, raster, vector, compression, lossy, lossless, container, and codec'''. You should be able to compare formats instead of only naming them.

Useful skills include inspecting filename extensions, comparing file sizes, noticing image or sound quality changes, exporting media in more than one format, checking platform compatibility, and explaining why one format is more suitable than another for a given task.

Possible products include a format-choice poster, an image comparison, an audio experiment, an animation, a captioned video, a media portfolio, or an interview summary.

Transfer is shown when you can face a new task—such as sharing a transparent logo, recording a podcast, or submitting a class movie—and make a reasoned choice without being told exactly which format to use. Safe and responsible transfer also includes checking privacy, permission, copyright, metadata, and accessibility before publishing.

<br>
<br>

{{BR}}
= OERs on the Topic =

The following English Wikipedia article gives an overview of file formats and links to more specialized topics:

<iframe> https://en.m.wikipedia.org/wiki/File_format </iframe>

You can also explore [[English:Image file format|Image file format]], [[English:Audio file format|Audio file format]], [[English:Video file format|Video file format]], [[English:Data compression|Data compression]], and [[English:Wikimedia Commons|Wikimedia Commons]] for further learning.

<br>

{{BR}}
= Linked Learning Areas =

{| align=center
{{:D-Tab}}
'''[[English:Images, Audio, and Video Formats|Images, Audio, and Video Formats]]'''
# [[English:File format|File format]]
# [[English:Filename extension|Filename extension]]
# [[English:Raster graphics|Raster graphics]]
# [[English:Vector graphics|Vector graphics]]
# [[English:Pixel|Pixel]]
# [[English:JPEG|JPEG]]
# [[English:Portable Network Graphics|PNG]]
# [[English:GIF|GIF]]
# [[English:Scalable Vector Graphics|SVG]]
# [[English:Audio file format|Audio file format]]
# [[English:MP3|MP3]]
# [[English:WAV|WAV]]
# [[English:FLAC|FLAC]]
# [[English:Video file format|Video file format]]
# [[English:MPEG-4 Part 14|MP4]]
# [[English:WebM|WebM]]
# [[English:Codec|Codec]]
# [[English:Data compression|Data compression]]
# [[English:Digital media|Digital media]]
# [[English:Media literacy|Media literacy]]
|}

[[Category:English]]
[[Category:Images, Audio, and Video Formats]]
[[Category:Computer Science]]
[[Category:Digital Media]]
[[Category:Media Literacy]]
[[Category:Grades 5-6]]

{{BR}}
= aiMOOC Projects =
[[Category:AI_MOOC]] [[Category:GPT aiMOOC]]
{{MT}}

English:Images, Audio, and Video Formats - Versionsgeschichte

Glanz: aiMOOC über GPT aiMOOC Action erstellt