Rozdzielczość obrazu.

Lekcja: Rozdzielczość obrazu i podstawy przetwarzania obrazów analogowych oraz cyfrowych

Część teoretyczna

1. Co to jest obraz analogowy i cyfrowy?

Obraz analogowy

To obraz powstający w sposób ciągły, odwzorowujący rzeczywistość, np. obraz na kliszy fotograficznej czy sygnał w telewizji analogowej.
Cechy obrazu analogowego:

  • Brak pikseli – obraz tworzony jest przez ciągłe zmiany jasności i koloru.
  • Mniej odporny na zakłócenia (np. utrata jakości w wyniku zużycia kliszy).

Obraz cyfrowy

To obraz przedstawiony w postaci siatki pikseli, gdzie każdy piksel ma przypisany konkretny kolor. Jest szeroko stosowany w urządzeniach elektronicznych (komputery, smartfony).
Cechy obrazu cyfrowego:

  • Opiera się na pikselach (elementach obrazu), wyrażonych w liczbach.
  • Łatwiejszy do modyfikacji, przesyłania i przechowywania niż obraz analogowy.

2. Rozdzielczość obrazu

Rozdzielczość obrazu to liczba pikseli w poziomie i pionie, określająca szczegółowość obrazu. Im większa rozdzielczość, tym więcej detali można zobaczyć w obrazie.
Przykład:

  • Rozdzielczość 1920x1080 oznacza, że obraz ma 1920 pikseli w poziomie i 1080 pikseli w pionie (Full HD).
  • Rozdzielczość wyrażana jest także w PPI (pixels per inch), która określa liczbę pikseli na cal.

3. Dostępne formaty obrazów cyfrowych

Formaty rastrowe:

  • JPEG – kompresja stratna, idealny do zdjęć i dużych grafik.
  • PNG – kompresja bezstratna, obsługuje przezroczystość.
  • GIF – obsługuje animacje, ograniczenie do 256 kolorów.
  • BMP – brak kompresji, duży rozmiar plików.
  • TIFF – wysoka jakość, często używany w druku.

Formaty wektorowe:

  • SVG – skalowalny, używany do prostych grafik (np. logo, ikony).
  • EPS/PDF – stosowane w grafice drukarskiej.

4. Kompresowanie obrazów

Kompresja to proces zmniejszania rozmiaru pliku obrazu, przy jednoczesnym zachowaniu jego jakości (w miarę możliwości).

  • Kompresja stratna: Usuwa dane obrazu, które nie są zauważalne dla oka, np. JPEG.
  • Kompresja bezstratna: Nie usuwa danych, ale zmniejsza rozmiar pliku, np. PNG.

Dobór parametrów kompresji:

  • Dla zdjęć na stronę internetową – kompresja stratna (np. 70-80% jakości w JPEG).
  • Dla grafik z przezroczystością – użycie PNG.
  • Dla wysokiej jakości wydruku – TIFF lub JPEG w najwyższej jakości.

5. Filtry i efekty w grafice cyfrowej

Dostępne filtry:

  • Filtry ostrości: Zwiększają wyrazistość obrazu.
  • Filtry rozmycia: Zmiękczają obraz (np. efekt rozmytego tła).
  • Filtry barwne: Nakładają kolorowe efekty, np. sepię, odcienie szarości.
  • Efekty artystyczne: Tworzenie stylów malarskich, rysunków.

Przykłady efektów:

  • Sepia: Nadanie zdjęciu ciepłego, żółto-brązowego odcienia.
  • Czarno-biały: Konwersja obrazu na skalę szarości.
  • Negatyw: Odwrócenie kolorów obrazu.

6. Przetwarzanie obrazów analogowych i cyfrowych

  1. Obraz analogowy na cyfrowy:

    • Skorzystanie ze skanera lub aparatu fotograficznego.
    • Konwersja sygnału analogowego na cyfrowy przez próbkowanie i kwantyzację.

  2. Obróbka obrazu cyfrowego:

    • Zastosowanie narzędzi graficznych, takich jak GIMP, Photoshop czy Paint.NET.
    • Dodawanie filtrów i efektów, poprawianie jakości, kadrowanie.

Część praktyczna

Ćwiczenia

Ćwiczenie 1: Tworzenie obrazu cyfrowego i jego kompresja

  1. Wykonaj zdjęcie za pomocą aparatu lub telefonu.
  2. Zapisz obraz w formacie JPEG i PNG.
  3. Porównaj jakość i rozmiar plików.
  4. Skorzystaj z narzędzia online (np. TinyPNG) do kompresji obrazu JPEG.
    • Oceń, jak kompresja wpłynęła na jakość.

Ćwiczenie 2: Zastosowanie filtrów w edytorze graficznym

  1. Otwórz dowolne zdjęcie w programie graficznym (np. GIMP).
  2. Nałóż różne filtry:
    • Efekt sepii.
    • Rozmycie (Gaussian Blur).
    • Wyostrzenie (Sharpen).
  3. Zapisz każdą wersję obrazu w osobnym pliku.
  4. Porównaj efekty przed i po zastosowaniu filtrów.

Ćwiczenie 3: Rozpoznawanie filtrów i efektów

  1. W grupach analizujcie różne obrazy z internetu.
  2. Zidentyfikujcie, jakie filtry lub efekty mogły zostać użyte (np. sepię, kontrast, nasycenie).
  3. Stwórzcie listę efektów i opiszcie, jak można je zastosować.

Ćwiczenie 4: Dodawanie efektów w HTML i CSS

  1. Przygotuj stronę internetową z obrazem, używając HTML i CSS.
  2. Na obraz nałóż efekty za pomocą CSS: 
    img {
    filter: grayscale(100%); /* efekt czarno-biały */
}
  3. Eksperymentuj z różnymi filtrami CSS:
    • Blur (rozmycie)
    • Sepia
    • Brightness (jasność)

Podsumowanie lekcji

Po tej lekcji uczniowie:

  • Zrozumieją różnice między obrazem analogowym i cyfrowym.
  • Nauczą się kompresować obrazy i dobierać parametry kompresji.
  • Opanują podstawy stosowania filtrów na obrazach.
  • Zdobędą umiejętność przetwarzania i identyfikowania efektów graficznych.