Glanz: aiMOOC über GPT aiMOOC Action erstellt

2026-07-12T15:45:28Z

aiMOOC über GPT aiMOOC Action erstellt

Neue Seite

{{T}}

{{BR}}
= Bildgröße und Bildausschnitt verstehen =

{{BR}}
= Einleitung =

Ein Foto kann auf dem Handy gut aussehen, aber auf einem großen Bildschirm unscharf wirken. Außerdem verändert sich seine Aussage, wenn Du Teile davon abschneidest. In diesem aiMOOC lernst Du, wie [[Pixel]], [[Bildauflösung]], [[Seitenverhältnis]] und [[Bildausschnitt]] zusammenhängen.

[[Datei:Cropping-a-photo.gif|500px|rahmenlos|center]]

'''Beobachte:''' Beim Zuschneiden bleibt nur ein ausgewählter Teil des Fotos sichtbar.

{{BR}}
== Bildgröße: Wie viele Pixel hat das Bild? ==

Ein digitales Bild besteht aus kleinen Bildpunkten, den [[Pixel|Pixeln]]. Die Pixelmaße werden als '''Breite × Höhe''' angegeben.

'''Beispiel:''' Ein Bild mit 1.920 × 1.080 Pixeln hat 1.920 Pixel in der Breite und 1.080 Pixel in der Höhe.

[[Datei:Resolution Comparison Chart.jpg|600px|rahmenlos|center]]

'''Wichtig:''' Mehr Pixel können mehr Details speichern. Sie machen ein Bild aber nicht automatisch gut. Auch Schärfe, Licht und Kompression spielen eine Rolle.

{{BR}}
== Bildgröße, Anzeigegröße und Dateigröße ==

Diese Begriffe meinen nicht dasselbe:

# [[Pixelmaße]]: Breite und Höhe des Bildes in Pixeln
# [[Anzeigegröße]]: Wie groß das Bild auf einem Bildschirm erscheint
# [[Dateigröße]]: Wie viel Speicherplatz die Datei benötigt, zum Beispiel in Kilobyte oder Megabyte

[[Datei:Vector Video Standards8.svg|600px|rahmenlos|center]]

Das Bild zeigt verschiedene Auflösungen. Größere Rechtecke stehen für mehr Pixel.

{{BR}}
== Seitenverhältnis: Welche Form hat das Bild? ==

Das [[Seitenverhältnis]] beschreibt das Verhältnis von Breite zu Höhe.

# [[Quadratformat]]: Breite und Höhe sind gleich
# [[Querformat]]: Das Bild ist breiter als hoch
# [[Hochformat]]: Das Bild ist höher als breit

[[Datei:Aspect ratio.svg|500px|rahmenlos|center]]

Ein Bild kann dasselbe Seitenverhältnis, aber unterschiedlich viele Pixel haben. 1.280 × 720 Pixel und 1.920 × 1.080 Pixel besitzen zum Beispiel beide ein breites Seitenverhältnis.

[[Datei:Aspect Ratios and Resolutions.svg|600px|rahmenlos|center]]

{{BR}}
== Bildausschnitt: Was ist zu sehen? ==

Der [[Bildausschnitt]] bestimmt, welcher Teil eines Motivs sichtbar ist. Durch einen anderen Ausschnitt kann dasselbe Foto ruhig, spannend, nah oder weit wirken.

Achte auf:

# [[Hauptmotiv]]: Ist sofort erkennbar, worum es geht?
# [[Hintergrund]]: Lenkt etwas vom Motiv ab?
# [[Blickrichtung]]: Bleibt vor dem Gesicht oder Objekt genug Raum?
# [[Bildrand]]: Werden wichtige Teile versehentlich abgeschnitten?

[[Datei:Münster, Domplatz, Wochenmarkt -- 2019 -- 2651 (crop).jpg|500px|rahmenlos|center]]

'''Frage an Dich:''' Was wirkt in diesem quadratischen Ausschnitt besonders wichtig?

{{BR}}
== Zuschneiden und Skalieren ==

'''[[Zuschneiden]]''' bedeutet: Randbereiche werden entfernt. Der sichtbare Inhalt und oft auch das Seitenverhältnis verändern sich.

'''[[Skalieren]]''' bedeutet: Die Pixelmaße werden geändert. Das ganze Motiv bleibt sichtbar.

'''Verzerren''' entsteht, wenn Breite und Höhe nicht im gleichen Verhältnis verändert werden. Kreise werden dann zum Beispiel oval.

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

{{BR}}
== Pixel sichtbar machen ==

Wenn ein kleines Bild stark vergrößert wird, können einzelne Pixel sichtbar werden. Das Bild wirkt dann kantig oder unscharf.

[[Datei:Wikipe-tan Oekaki and Pixel Art.png|600px|rahmenlos|center]]

Bei [[Pixel-Art]] ist dieser Effekt gewollt. Bei einem Foto ist er meist ein Zeichen dafür, dass die Auflösung für die gewünschte Darstellung zu klein ist.

{{BR}}
== Ein einfacher Arbeitsablauf ==

# [[Ziel festlegen]]: Wo soll das Bild erscheinen?
# [[Seitenverhältnis wählen]]: Quadrat, Hochformat oder Querformat?
# [[Ausschnitt prüfen]]: Bleibt das Wichtigste sichtbar?
# [[Skalieren]]: Passe die Pixelmaße an.
# [[Exportieren]]: Speichere eine Kopie und behalte das Original.

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

'''Merksatz:''' Erst den passenden Ausschnitt wählen, dann die Bildgröße anpassen.

{{BR}}
= Interaktive Aufgaben =

{{BR}}
== Quiz: Teste Dein Wissen ==

{{MC}}

'''Woraus besteht ein digitales Rasterbild?'''
(Aus Pixeln)
(!Aus Seiten)
(!Aus Buchstaben)
(!Aus Sekunden)

{{E}}
<br>

{{MC}}

'''Was bedeutet die Angabe 1.920 × 1.080 Pixel?'''
(Breite und Höhe des Bildes)
(!Länge und Lautstärke des Bildes)
(!Helligkeit und Kontrast des Bildes)
(!Alter und Preis des Bildes)

{{E}}
<br>

{{MC}}

'''Was beschreibt das Seitenverhältnis?'''
(Das Verhältnis von Breite zu Höhe)
(!Den Speicherort der Datei)
(!Die Farbe des Hintergrunds)
(!Die Aufnahmezeit des Fotos)

{{E}}
<br>

{{MC}}

'''Was geschieht beim Zuschneiden?'''
(Randbereiche des Bildes werden entfernt)
(!Das Bild erhält automatisch mehr Details)
(!Alle Farben werden gelöscht)
(!Die Datei wird zu einem Video)

{{E}}
<br>

{{MC}}

'''Was geschieht beim Skalieren?'''
(Die Pixelmaße werden verändert)
(!Der Bildinhalt wird neu fotografiert)
(!Das Motiv wird automatisch heller)
(!Der Dateiname wird gelöscht)

{{E}}
<br>

{{MC}}

'''Wann kann ein Foto pixelig wirken?'''
(Wenn es mit zu wenigen Pixeln stark vergrößert wird)
(!Wenn es einen passenden Ausschnitt hat)
(!Wenn das Motiv scharf aufgenommen wurde)
(!Wenn das Original erhalten bleibt)

{{E}}
<br>

{{MC}}

'''Welches Format ist höher als breit?'''
(Hochformat)
(!Querformat)
(!Breitbild)
(!Panoramaformat)

{{E}}
<br>

{{MC}}

'''Was kann durch falsches Skalieren entstehen?'''
(Eine Verzerrung)
(!Eine Tonaufnahme)
(!Eine neue Kamera)
(!Ein Untertitel)

{{E}}
<br>

{{MC}}

'''Warum sollte das Originalbild erhalten bleiben?'''
(Damit spätere Änderungen erneut möglich sind)
(!Damit das Bild immer quadratisch wird)
(!Damit keine Pixel sichtbar sind)
(!Damit der Bildschirm größer wird)

{{E}}
<br>

{{MC}}

'''Was sollte vor dem Export geprüft werden?'''
(Ob Ausschnitt und Bildgröße zum Verwendungszweck passen)
(!Ob das Bild möglichst viele Filter besitzt)
(!Ob der Dateiname besonders lang ist)
(!Ob alle Bildränder abgeschnitten sind)

{{E}}
<br>

{{BR}}
== Memory ==

<div class="memo-quiz">
{|
|-
| Pixel || Kleinster Bildpunkt
|-
| Auflösung || Pixelzahl in Breite und Höhe
|-
| Bildausschnitt || Sichtbarer Teil des Motivs
|-
| Seitenverhältnis || Verhältnis von Breite zu Höhe
|-
| Zuschneiden || Entfernen von Randbereichen
|-
| Skalieren || Ändern der Pixelmaße
|}
{{E}}
<br>

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

<div class="lueckentext-quiz">

{| class="wikitable"
! Ordne die richtigen Begriffe zu.
! Verwendung
|-
| '''Quadratformat'''
| Profilbild
|-
| '''Breitbild'''
| Präsentationsvideo
|-
| '''Hochformat'''
| Smartphone-Aufnahme
|-
| '''Zuschneiden'''
| Randbereiche entfernen
|-
| '''Skalieren'''
| Pixelmaße ändern

|}
{{E}}

<br>

{{BR}}
== Kreuzworträtsel ==

<div class="kreuzwort-quiz">
{|
|-
| Pixel || Wie heißt der kleinste Bildpunkt eines Rasterbildes?
|-
| Auflösung || Welcher Begriff bezeichnet die Pixelzahl eines Bildes?
|-
| Ausschnitt || Wie heißt der sichtbare Teil eines Motivs?
|-
| Querformat || Welches Format ist breiter als hoch?
|-
| Hochformat || Welches Format ist höher als breit?
|-
| Skalierung || Wie heißt das Ändern der Pixelmaße?
|}
{{E}}
<br>

{{BR}}
== LearningApps ==

<iframe> https://learningapps.org/index.php?s=Bildgröße+und+Bildausschnitt+verstehen </iframe>

{{BR}}
== Lückentext ==

<quiz display=simple>
{'''Vervollständige den Text.'''<br>
|type="{}"}
Ein digitales Rasterbild besteht aus vielen { Pixeln }. Die Angabe aus Breite und Höhe heißt { Auflösung }. Das Verhältnis von Breite zu Höhe nennt man { Seitenverhältnis }. Der sichtbare Teil eines Motivs ist der { Bildausschnitt }. Beim { Zuschneiden } werden Randbereiche entfernt. Beim { Skalieren } ändern sich die Pixelmaße. Eine ungleichmäßige Größenänderung kann das Bild { verzerren }. Für spätere Änderungen solltest Du das { Original } behalten.
</quiz>

<br>

{{BR}}
= Offene Aufgaben =

{{BR}}
=== Leicht ===
# [[Format-Suche]]: Finde in Zeitschriften oder auf Webseiten je ein Bild im Quadrat-, Hoch- und Querformat.
# [[Ausschnitt-Fenster]]: Schneide aus Papier einen Rahmen aus und teste verschiedene Ausschnitte an einem Foto.
# [[Pixel-Zoom]]: Vergrößere ein kleines Bild stark und beschreibe, was Du siehst.
# [[Motiv erkennen]]: Fotografiere einen Gegenstand einmal nah und einmal weit entfernt.

{{BR}}
=== Standard ===
# [[Drei Formate]]: Erstelle aus einem eigenen Foto eine quadratische, eine hohe und eine breite Version.
# [[Vorher-nachher]]: Zeige ein Originalfoto und einen verbesserten Ausschnitt nebeneinander.
# [[Bildwirkung]]: Erkläre, wie sich die Wirkung eines Fotos durch den Ausschnitt verändert.
# [[Export-Test]]: Speichere dasselbe Bild in zwei verschiedenen Pixelgrößen und vergleiche die Darstellung.

{{BR}}
=== Schwer ===
# [[Medienkampagne]]: Gestalte aus einem Motiv drei passende Bilder für Plakat, Präsentation und Smartphone.
# [[Ausschnitt-Analyse]]: Untersuche ein Nachrichtenbild und erkläre, welche Informationen außerhalb des Ausschnitts fehlen könnten.
# [[Bildmanipulation]]: Erstelle zwei unterschiedliche Ausschnitte desselben Fotos, die verschiedene Aussagen nahelegen.
# [[Erklärvideo]]: Produziere ein kurzes Lernvideo zu Zuschneiden, Skalieren und Seitenverhältnis.

{{:Offene Aufgabe - MOOC erstellen}}

{{BR}}
= Lernkontrolle =

# [[Passender Export]]: Eine Schülerzeitung benötigt ein Titelbild und ein kleines Vorschaubild. Entscheide für beide, wie Ausschnitt und Pixelgröße angepasst werden sollten, und begründe Deine Wahl.
# [[Wirkung vergleichen]]: Vergleiche zwei Ausschnitte desselben Fotos. Erkläre, wie sich Blickführung und Aussage verändern.
# [[Fehlerdiagnose]]: Ein Bild wirkt breitgezogen und Gesichter erscheinen unnatürlich. Beschreibe die Ursache und einen passenden Lösungsweg.
# [[Informationsverlust]]: Beurteile, wann Zuschneiden sinnvoll ist und wann dabei wichtige Informationen verloren gehen.
# [[Arbeitsablauf planen]]: Entwickle einen Ablauf vom Originalfoto bis zur fertigen Datei für eine Präsentation.
# [[Medienkritik]]: Erkläre, warum ein Bildausschnitt die Wahrnehmung eines Ereignisses beeinflussen kann.

<br>
<br>

{{BR}}
= Lernnachweis =

Für Deinen Lernnachweis solltest Du:

# die Begriffe [[Pixel]], [[Auflösung]], [[Seitenverhältnis]], [[Bildausschnitt]], [[Zuschneiden]] und [[Skalieren]] richtig verwenden,
# einen passenden Bildausschnitt begründet auswählen,
# ein Bild ohne Verzerrung skalieren,
# verschiedene Bildformate für unterschiedliche Zwecke erstellen,
# die Wirkung eines Bildausschnitts kritisch erklären,
# das Original und die bearbeiteten Dateien sinnvoll sichern.

<br>
<br>

{{BR}}
= OERs zum Thema =

<iframe> https://de.m.wikipedia.org/wiki/Bildauflösung </iframe>

<br>

{{BR}}
= Links =

{| align=center
{{:D-Tab}}
'''[[Bildgröße und Bildausschnitt verstehen]]'''
# [[Pixel]]
# [[Bildauflösung]]
# [[Seitenverhältnis]]
# [[Bildausschnitt]]
# [[Zuschneiden]]
# [[Skalieren]]
# [[Bildkomposition]]
# [[Medienkompetenz]]
|}

[[Kategorie:Medienbildung]]
[[Kategorie:Medienkompetenz]]
[[Kategorie:Informatik]]
[[Kategorie:Kunst]]
[[Kategorie:Fotografie]]
[[Kategorie:Klasse 5-6]]
[[Kategorie:Klasse 7-8]]

{{BR}}
= aiMOOC-Projekte =
[[Kategorie:AI_MOOC]] [[Kategorie:GPT aiMOOC]]
{{MT}}

Bildgröße und Bildausschnitt verstehen - Versionsgeschichte

Glanz: aiMOOC über GPT aiMOOC Action erstellt