Lekcja 4 - Przeksztalcanie plikow graficznych

📚

Teoria

▼

Formaty plikow graficznych - przeglad

Wybor odpowiedniego formatu pliku graficznego jest kluczowy - wplywa na jakosc obrazu, rozmiar pliku i mozliwosci edycji. Formaty dzielimy na rastrowe i wektorowe.

Formaty rastrowe

JPEG / JPG (Joint Photographic Experts Group)
- Kompresja stratna - kazdy zapis obniza jakosc
- Regulowana jakosc (1-100%)
- Nie obsluguje przezroczystosci
- Idealny do: zdjec, fotografii, grafik z wieloma kolorami
- Nie nadaje sie do: tekstu, grafik z ostrymi krawedziami, logo
PNG (Portable Network Graphics)
- Kompresja bezstratna - jakosc nie spada przy zapisie
- Obsluguje przezroczystosc (kanal alfa)
- Wiekszy rozmiar niz JPG dla zdjec
- Idealny do: grafik z przezroczystoscia, zrzutow ekranu, logo, ikon
GIF (Graphics Interchange Format)
- Kompresja bezstratna, ale ograniczona do 256 kolorow
- Obsluguje proste animacje (klatka po klatce)
- Obsluguje przezroczystosc (binarna - bez polprzezroczystosci)
- Idealny do: prostych animacji, ikon, grafik z mala liczba kolorow
WebP (Google)
- Nowoczesny format laczacy zalety JPG i PNG
- Kompresja stratna i bezstratna, przezroczystosc, animacje
- Mniejszy rozmiar niz JPG/PNG przy tej samej jakosci (25-35% mniej)
- Obslugiwany przez wszystkie nowoczesne przegladarki
BMP (Bitmap)
- Brak kompresji - bardzo duze pliki
- Pelna jakosc, ale niepraktyczny do udostepniania
TIFF (Tagged Image File Format)
- Bezstratny, uzywany w profesjonalnej poligrafii i fotografii
- Obsluguje warstwy i profile kolorow CMYK
RAW (rozne rozszerzenia: CR2, NEF, ARW)
- "Surowe" dane z matrycy aparatu - maksymalna jakosc
- Wymaga obrobki w specjalnym oprogramowaniu (Lightroom, darktable)

                    Kompresja stratna vs bezstratna: Kompresja stratna (lossy) trwale usuwa czesc danych obrazu - nie da sie odzyskac oryginalnej jakosci. Kompresja bezstratna (lossless) zmniejsza rozmiar pliku bez utraty jakichkolwiek danych - obraz po dekompresji jest identyczny z oryginalem.
                

Formaty wektorowe (przypomnienie)

SVG - otwarty format webowy, skalowalny, edytowalny w edytorze tekstu
AI, EPS, CDR, PDF - formaty profesjonalne (omowione w lekcji 2)

Konwersja miedzy formatami

Przy konwersji nalezy pamietac o kilku zasadach:

Raster → Raster: Mozliwa, ale konwersja z JPG na PNG nie "odzyska" utraconych danych
Wektor → Raster (rasteryzacja): Zawsze mozliwa, ale tracimy skalowalnosc
Raster → Wektor (wektoryzacja/tracing): Mozliwa, ale wynik przybliżony (automatyczny tracing w Inkscape)
Wektor → Wektor: Zwykle bezproblemowa, choc moga wystapic roznice w obslugiwanych funkcjach

Zmiana rozmiaru obrazu

Zmniejszanie obrazu jest zwykle bezproblemowe - program "laczy" piksele. Powiekszanie wymaga interpolacji - program "domysla sie" brakujacych pikseli, co prowadzi do rozmycia.

Metody interpolacji:

Nearest Neighbor - kopiowanie najblizszego piksela (szybkie, ale "pikselowe")
Bilinearna - srednia z 4 sasiadujacych pikseli
Bikubiczna - analiza 16 sasiadujacych pikseli (najlepsza jakosc)
Lanczos - zaawansowany algorytm o najwyzszej jakosci

Optymalizacja obrazow dla stron internetowych

Zdjecia: JPG (jakosc 70-85%) lub WebP
Grafiki z przezroczystoscia: PNG-8 (do 256 kolorow) lub PNG-24
Ikony: SVG (skalowalnosc na roznych ekranach)
Animacje: GIF (krotkie), MP4/WebM (dluzsze)
Rozdzielczosc: dostosowana do wyswietlacza (72-150 DPI)
Narzedzia: TinyPNG, Squoosh (kompresja online)

✏️

Zadania

▼

Latwe

Zadanie 1: Porownanie formatow

Wez jedno zdjecie i zapisz je w formatach: BMP, PNG, JPG (jakosc 100%), JPG (jakosc 50%), JPG (jakosc 10%), WebP. Utwrz tabelke z kolumnami: format, rozmiar pliku, jakosc wizualna (ocena 1-5). Ktory format oferuje najlepszy stosunek jakosci do rozmiaru?

Pokaz wskazowke

Przykladowe wyniki dla zdjecia 1920x1080:
BMP:    ok. 5.93 MB  | jakosc: 5/5
PNG:    ok. 3-5 MB   | jakosc: 5/5
JPG 100%: ok. 1-2 MB | jakosc: 5/5
JPG 50%:  ok. 200 KB | jakosc: 3/5
JPG 10%:  ok. 50 KB  | jakosc: 1/5
WebP:   ok. 150 KB   | jakosc: 4/5
Wniosek: WebP lub JPG 70-85% to optymalny wybor.

Srednie

Zadanie 2: Efekt wielokrotnej kompresji JPG

Wykonaj eksperyment: otworz zdjecie, zapisz jako JPG (jakosc 70%), zamknij, otworz ponownie, zapisz jako JPG (jakosc 70%) - powtorz to 10 razy. Porownaj obraz po 1, 5 i 10 cyklu zapisu z oryginalem. Opisz co sie dzieje i dlaczego. Jak nazywamy ten efekt?

Srednie

Zadanie 3: Optymalizacja grafik dla strony WWW

Przygotuj zestaw grafik dla fikcyjnej strony internetowej: (a) zdjecie tla (hero image) - max 200 KB, (b) logo z przezroczystoscia, (c) 3 miniaturki produktow (300x300 px, max 30 KB kazda), (d) ikone faviconu (32x32 px). Dobierz odpowiednie formaty i parametry kompresji.

Trudne

Zadanie 4: Wektoryzacja obrazu rastrowego

Uzyj funkcji "Trace Bitmap" (Wektoryzacja bitmapy) w Inkscape, aby przekonwertowac proste logo lub rysunek z formatu PNG na SVG. Poeksperymentuj z parametrami wektoryzacji (prog jasnosci, liczba kolorow, wygladzanie). Porownaj rozmiary plikow PNG i SVG. Kiedy wektoryzacja daje dobre wyniki, a kiedy nie?

🎥

Materialy wideo

▼

Zwiększ rozmiar zdjęcia BEZ UTRATY JAKOŚCI! #PHOTOSHOP

Cine Jera - Konrad Kopeć

Jak poprawić zdjęcie słabej jakości ZA DARMO dzięki sztucznej inteligencji

Karol Kotański

🎧

Podcasty

▼

✔️

Quiz - sprawdz sie!

▼

📜

Podstawa programowa

▼

Lekcja 4: Przeksztalcanie plikow graficznych - wielkosc i jakosc obrazow