Formaty grafiki rastrowej i wektorowej

1. Grafika rastrowa (bitmapowa)

Grafika rastrowa, znana także jako **bitmapowa**, opisuje obraz za pomocą siatki (rastra) pojedynczych punktów zwanych **pikselami**. Każdy piksel ma określony kolor i położenie. [Image of raster vs vector graphics showing pixelation on zoom for raster]

Kluczowe cechy:

**Rozdzielczość:** Obrazy mają stałą rozdzielczość (np. 1920x1080). Powiększanie obrazu powoduje widoczne **pikselizację** (utratę jakości).
**Zastosowanie:** Idealne do zdjęć, skomplikowanych obrazów z płynnymi przejściami kolorów i cieniowaniem.
**Programy:** Adobe Photoshop, GIMP.

Najważniejsze formaty rastrowe dla stron WWW:

Format	Pełna nazwa	Charakterystyka	Zastosowanie
`JPG/JPEG`	Joint Photographic Experts Group	Kompresja stratna (usuwa część danych), mały rozmiar pliku.	Zdjęcia, fotografie – wszędzie tam, gdzie mały rozmiar pliku jest ważniejszy niż idealna jakość.
`PNG`	Portable Network Graphics	Kompresja bezstratna (zachowuje jakość). Obsługuje przezroczystość (kanał Alpha).	Logo, ikony, grafika z ostrymi krawędziami i przezroczystym tłem, zrzuty ekranu.
`GIF`	Graphics Interchange Format	Kompresja bezstratna, limit 256 kolorów. Obsługuje proste animacje.	Proste animacje webowe, małe, proste ikony z ograniczoną paletą barw.
`WEBP`	WebP (Google)	Nowoczesny format z kompresją stratną i bezstratną. Mniejsze pliki niż JPG/PNG.	Optymalizacja stron WWW – przyszłościowy standard dla zdjęć i grafik.

2. Grafika wektorowa

Grafika wektorowa opisuje obraz za pomocą **obiektów geometrycznych** (linii, krzywych, okręgów), zdefiniowanych za pomocą **wzorów matematycznych**. Obraz nie jest siatką pikseli, lecz zbiorem instrukcji, jak go narysować. [Image of vector graphics being scaled without quality loss]

Kluczowe cechy:

**Skalowalność:** Można je powiększać w nieskończoność bez utraty jakości (są **niezależne od rozdzielczości**).
**Zastosowanie:** Idealne dla logo, typografii, map, diagramów i ilustracji.
**Programy:** Adobe Illustrator, Inkscape, CorelDRAW.

Najważniejsze formaty wektorowe dla stron WWW:

**SVG (Scalable Vector Graphics):** Oparty na XML, natywny format dla Internetu. Jest to **tekstowy** kod, co pozwala na jego edycję i animowanie za pomocą CSS i JavaScript. Jest to **najważniejszy format wektorowy** w projektowaniu stron.
**EPS (Encapsulated PostScript):** Używany głównie w poligrafii. Rzadko używany bezpośrednio na stronach WWW.

3. Ćwiczenie praktyczne: Dobór formatu (Wymaganie Podstawowe)

Poniżej znajduje się lista elementów strony internetowej. Wskaż, który format (JPG, PNG, GIF, SVG) będzie najbardziej odpowiedni i uzasadnij swój wybór.

Zadanie:

**Zdjęcie panoramiczne** na stronę główną (duży obrazek z dużą ilością detali).
**Logo firmy**, które musi być ostre na ekranach o wysokiej rozdzielczości (Retina).
**Ikona koszyka** z przezroczystym tłem.
Krótka, zapętlona, niema **animacja** z trzema kolorowymi klatkami.

Wymaganie Ponadpodstawowe: Dobór formatu do celów optymalizacji

        **Pytanie:** W jakiej sytuacji, zamiast standardowego JPG, lepiej użyć nowoczesnego formatu WEBP, aby zoptymalizować czas ładowania strony, i co musisz zrobić, aby zapewnić kompatybilność z wszystkimi przeglądarkami?
    