Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - TEST WIEDZY NR 4



PYTANIE NR 10.
Przygotowujesz grafikę dla strony internetowej, która ma być wyświetlana na różnych urządzeniach. Które z poniższych stwierdzeń najlepiej opisuje dlaczego powinieneś korzystać z grafiki wektorowej?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Grafika wektorowa jest opisana matematycznie (kształty/krzywe), więc może być skalowana do różnych rozmiarów ekranów bez utraty ostrości. Dlatego na stronach WWW (np. logo, ikony) zachowuje jakość niezależnie od rozdzielczości urządzenia, w przeciwieństwie do grafiki rastrowej opartej na pikselach.

Pełne wyjaśnienie:

W kontekście stron internetowych wyświetlanych na wielu urządzeniach (smartfony, laptopy, monitory o wysokim DPI) kluczowa jest jakość obrazu po skalowaniu. Odpowiedź "Grafika wektorowa utrzymuje ostrość i jakość obrazu niezależnie od jego rozmiaru." jest poprawna, ponieważ grafika wektorowa nie składa się z siatki pikseli, tylko z opisów kształtów (np. linii, krzywych i wypełnień). Taki opis można przeliczyć na dowolny rozmiar wyświetlania, a krawędzie pozostają gładkie i ostre.

Dlaczego pozostałe stwierdzenia nie są najlepszym uzasadnieniem w tym pytaniu?

  • "Grafika wektorowa ma mniejszy rozmiar pliku." – to nie jest reguła. Prosta ikona wektorowa bywa mała, ale skomplikowana ilustracja wektorowa może mieć duży rozmiar, podobnie jak dobrze skompresowana grafika rastrowa może być niewielka.
  • "Grafika wektorowa jest łatwiejsza do edycji." – często jest to prawda (łatwo zmienić kolor, kształt, grubość obrysu), ale pytanie dotyczy przede wszystkim wyświetlania na różnych urządzeniach, czyli skalowania i ostrości, a nie etapu edycji.
  • "Grafika wektorowa jest bardziej kompatybilna z różnymi przeglądarkami." – kompatybilność zależy głównie od formatu i sposobu użycia (np. osadzenie, fallback), a nie od samej idei "wektorowości". W praktyce przeglądarki dobrze obsługują nowoczesne formaty, ale to nie jest najtrafniejsze uzasadnienie wyboru wektorów do responsywnego skalowania.

Wskazówka egzaminacyjna: jeśli w pytaniu pojawia się motyw "różne urządzenia / różne rozmiary / różne rozdzielczości", szukaj odpowiedzi o skalowaniu bez utraty jakości i niezależności od rozdzielczości. To najczęstszy, najbardziej precyzyjny argument za użyciem grafiki wektorowej w interfejsach WWW.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest grafika wektorowa w projektowaniu stron WWW?
Grafika wektorowa to obraz opisany kształtami (linie, krzywe, wypełnienia), a nie pikselami. Dzięki temu można ją płynnie skalować w interfejsie strony bez "pikselozy". W WWW najczęściej spotkasz ją w ikonach i logotypach, które mają wyglądać ostro na różnych ekranach.
Dlaczego grafika wektorowa nie traci jakości po powiększeniu?
Bo przeglądarka przelicza kształty matematyczne na aktualny rozmiar wyświetlania. Nie rozciąga istniejących pikseli (jak w rastrze), tylko ponownie "rysuje" obiekt w nowej skali. Dzięki temu krawędzie pozostają ostre, nawet gdy element jest wyświetlany dużo większy.
Jakie elementy strony najlepiej robić jako wektorowe?
Najlepiej wektorowo przygotowywać: logotypy, ikony, piktogramy, proste ilustracje, elementy interfejsu (np. symbole w przyciskach). Są to grafiki, które często muszą być skalowane w responsywnym layoucie i powinny wyglądać dobrze zarówno na małym, jak i dużym ekranie.
Co to jest grafika rastrowa i czemu gorzej się skaluje?
Grafika rastrowa składa się z pikseli ułożonych w siatkę. Gdy ją powiększasz ponad oryginalną rozdzielczość, przeglądarka musi "dopowiedzieć" brakujące piksele (interpolacja), co zwykle powoduje rozmycie i utratę ostrości. Dlatego zdjęcia są zwykle rastrowe, ale ikony często lepiej robić wektorowo.
Czy grafika wektorowa zawsze ma mniejszy rozmiar pliku?
Nie. Proste ikony wektorowe potrafią być bardzo lekkie, ale złożone ilustracje z wieloma kształtami mogą ważyć dużo. Z kolei grafika rastrowa po dobrej kompresji też może być mała. Na egzaminie "mniejszy rozmiar" nie jest najpewniejszym argumentem — pewniejsze jest skalowanie bez utraty jakości.
Jakie są typowe błędy w pytaniach o wektor vs raster?
Najczęstsze błędy to: wybieranie "mniejszego rozmiaru pliku" jako reguły, mylenie zalety edycji z celem skalowania na różne urządzenia oraz zakładanie, że kompatybilność zależy wyłącznie od rodzaju grafiki. Warto zawsze wrócić do: ostrość po zmianie rozmiaru.
Kiedy lepiej użyć grafiki rastrowej zamiast wektorowej na WWW?
Grafika rastrowa jest lepsza głównie dla zdjęć i realistycznych obrazów z wieloma detalami i przejściami tonalnymi. Wektory świetnie radzą sobie z kształtami i ikonami, ale nie zawsze są najlepsze do fotografii. Dobór zależy od rodzaju treści, a nie od jednej uniwersalnej zasady.
Jak responsywność strony wiąże się z doborem grafiki wektorowej?
Responsywność oznacza, że elementy strony zmieniają rozmiar i układ zależnie od ekranu. Jeśli grafika ma się skalować razem z komponentem, wektory są korzystne, bo zachowują ostre krawędzie w każdej skali. To szczególnie ważne dla ikon w nawigacji i dla logotypu w nagłówku.
Czy edycja grafiki wektorowej jest łatwiejsza i dlaczego?
Często tak, bo możesz zmieniać pojedyncze obiekty (np. krzywe, kolory, grubości) bez degradacji jakości. To ułatwia przygotowanie wariantów ikon lub logo. Jednak w pytaniach egzaminacyjnych o "różne urządzenia" zwykle ważniejsza jest niezależność od rozdzielczości niż sam komfort edycji.
Jak przygotować się do pytań egzaminacyjnych o grafiki w WWW?
Utrwal różnice: wektor = kształty i skalowanie bez utraty jakości; raster = piksele i ryzyko rozmycia po powiększeniu. Przećwicz dobór typu grafiki do zastosowania (logo/ikona vs zdjęcie). Na egzaminie czytaj słowa-klucze: "różne urządzenia", "skalowanie", "ostrość", "DPI".
info

Około 58% zdających odpowiada poprawnie na to pytanie. średnie

W praktyce zawodowej kluczowe jest to, że grafika wektorowa jest opisana matematycznie (kształty/krzywe), więc może być skalowana do różnych rozmiarów ekranów bez utraty ostrości.

Źródła:

  • MDN Web Docs: "SVG: Scalable Vector Graphics" (opis skalowalności grafiki wektorowej), https://developer.mozilla.org/en-US/docs/Web/SVG (dostęp: 2026-03-01)
  • W3C: "Scalable Vector Graphics (SVG) 2" (specyfikacja formatu wektorowego dla sieci), https://www.w3.org/TR/SVG2/ (dostęp: 2026-03-01)
  • MDN Web Docs: "Raster image" (charakterystyka grafiki rastrowej i zależność od pikseli), https://developer.mozilla.org/en-US/docs/Glossary/Raster_image (dostęp: 2026-03-01)

Materiały:

  • Dokumentacja SVG w MDN (wprowadzenie i podstawy)
  • Specyfikacja W3C SVG (pojęcia skalowania i grafiki niezależnej od rozdzielczości)
  • Materiały kursowe z podstaw grafiki komputerowej (wektor vs raster) dla webdeveloperów
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego