KWALIFIKACJA INF3 - STYCZEŃ 2017

PYTANIE NR 13.
W ramce przedstawiono właściwości pliku graficznego. W celu optymalizacji czasu ładowania rysunku na stronę WWW należy
Ilustracja przedstawia ramkę z informacjami na temat właściwości pliku graficznego.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Zmniejszenie wymiarów rysunku (liczby pikseli) zwykle zmniejsza ilość danych do pobrania przez przeglądarkę, więc plik szybciej się ładuje.
Zwiększenie rozdzielczości lub zmiana proporcji nie skraca pobierania, a format CDR nie jest typowym formatem publikacji obrazów w WWW.

Pełne wyjaśnienie:

Czas ładowania grafiki na stronę WWW zależy przede wszystkim od tego, ile danych musi zostać pobrane i zdekodowane przez przeglądarkę. W praktyce kluczowe są: rozmiar pliku (w bajtach), wymiary w pikselach oraz zastosowana kompresja i format.

Zmniejszenie wymiarów rysunku (np. z 4000×3000 do 1200×900) redukuje liczbę pikseli, a to zwykle zmniejsza ilość informacji do zapisania w pliku. Dzięki temu plik jest lżejszy, szybciej się pobiera, a często także szybciej renderuje, co poprawia odczuwalną wydajność strony.

Dlaczego pozostałe odpowiedzi są nieprawidłowe?

  • Zwiększyć rozdzielczość – potocznie kojarzy się z "lepszą jakością", ale w typowych zastosowaniach WWW zwiększenie parametrów prowadzi do większej ilości danych (większej wagi) i dłuższego pobierania. To działa przeciw celowi optymalizacji.
  • Zmienić format grafiki na CDR – CDR jest formatem edycyjnym, charakterystycznym dla wybranych programów graficznych, a nie standardowym formatem dystrybucji obrazów w przeglądarkach. Taka zmiana nie jest typową metodą przyspieszania wczytywania obrazu w WWW.
  • Zmienić proporcje szerokości do wysokości – zmiana proporcji dotyczy wyglądu (kadrowania/rozciągania) i nie gwarantuje zmniejszenia wagi pliku. Bez redukcji liczby pikseli lub kompresji czas pobierania zwykle się nie poprawi.

W zadaniach egzaminacyjnych warto myśleć: aby przyspieszyć ładowanie, należy zmniejszyć ilość przesyłanych danych (mniej pikseli, lepsza kompresja, właściwy format).

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Mniejsze wymiary (mniej pikseli) zwykle oznaczają mniej danych do zapisania i przesłania. Przeglądarka pobiera lżejszy plik szybciej, a potem szybciej go dekoduje i renderuje. To prosta i często najskuteczniejsza metoda przyspieszania ładowania grafik w WWW.
W praktyce WWW liczy się ilość danych do pobrania. Zwiększanie rozdzielczości/wymiarów zwykle podnosi liczbę pikseli lub poziom szczegółów, co zwiększa rozmiar pliku. Większy plik pobiera się dłużej, więc efekt jest odwrotny do optymalizacji.
Dla stron WWW kluczowe są wymiary w pikselach oraz rozmiar pliku. DPI/PPI ma większe znaczenie w druku, bo opisuje gęstość punktów na fizycznym wydruku. W przeglądarce obraz wyświetla się przede wszystkim na podstawie pikseli i stylów CSS.
W praktyce WWW spotyka się formaty rastrowe i wektorowe obsługiwane przez przeglądarki, dobierane pod jakość i kompresję. Format edycyjny (np. projektowy) nie jest dobrym wyborem do publikacji. Na egzaminie zwracaj uwagę, czy format jest przeznaczony do dystrybucji w WWW.
Sama zmiana proporcji (np. 4:3 na 16:9) nie gwarantuje mniejszej wagi pliku. Jeśli nadal zapisujesz podobną liczbę pikseli lub brak jest kompresji, rozmiar pliku może pozostać podobny. Proporcje dotyczą głównie kadru i wyglądu, a nie ilości danych.
Porównaj rzeczywisty rozmiar pliku i jego wymiary z tym, jak duży jest renderowany na stronie (np. w narzędziach deweloperskich przeglądarki). Jeśli obraz ma znacznie większe wymiary niż obszar wyświetlania, to typowy sygnał do zmniejszenia wymiarów i ponownego eksportu.
Typowe błędy to: wgrywanie zdjęć prosto z aparatu (zbyt duże wymiary), mylenie DPI z rozmiarem w pikselach, brak kompresji lub użycie nieadekwatnego formatu, a także poleganie wyłącznie na skalowaniu CSS zamiast przygotowania właściwego pliku źródłowego.
Kompresja ma wpływ na jakość, ale często można dobrać poziom tak, by różnica była niewidoczna dla użytkownika, a rozmiar pliku znacząco spadł. W praktyce dąży się do kompromisu: akceptowalna jakość przy możliwie małej wadze pliku, bo to skraca pobieranie.
Gdy potrzebujesz ostrych krawędzi przy różnych rozmiarach (np. logo, ikony, proste ilustracje), format wektorowy bywa korzystny, bo skaluje się bez utraty jakości. Dla zdjęć i bogatych tekstur zwykle stosuje się grafikę rastrową, optymalizując jej wymiary i kompresję.
Ćwicz na przykładach: eksportuj ten sam obraz w różnych wymiarach, porównuj rozmiar pliku i jakość. Naucz się rozróżniać wymiary w pikselach od DPI/PPI oraz rozumieć, że celem jest zmniejszenie ilości danych do pobrania. Analizuj też typowe "pułapki" w odpowiedziach.
info

Około 78% zdających odpowiada poprawnie na to pytanie. średnio łatwe

Źródła:

  • Google web.dev – Images: Serve images in appropriate sizes, https://web.dev/articles/serve-images-in-correct-dimensions (dostęp: 2026-02-18)
  • MDN Web Docs – Images in HTML (wydajność i dobór rozmiaru), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img (dostęp: 2026-02-18)
  • Google web.dev – Optimize images, https://web.dev/learn/performance/optimize-images/ (dostęp: 2026-02-18)

Materiały:

  • Dokumentacja web.dev o optymalizacji obrazów i wydajności
  • MDN Web Docs: obrazy w sieci i wydajność ładowania zasobów
  • Materiały o Core Web Vitals (LCP) i wpływie zasobów graficznych

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego