KWALIFIKACJA INF3 - CZERWIEC 2015

PYTANIE NR 13.
Jeśli rozmiar pliku graficznego jest zbyt duży do publikacji w Internecie, należy
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Zmniejszenie rozdzielczości (w praktyce: liczby pikseli/wymiarów obrazu) redukuje ilość danych do zapisania, więc typowo zmniejsza rozmiar pliku do publikacji w WWW.
Pozostałe działania zwykle zwiększają rozmiar: większa głębia kolorów, format BMP (często bez kompresji) i dodanie kanału alfa.

Pełne wyjaśnienie:

W publikacji internetowej najczęściej dąży się do możliwie małego rozmiaru pliku graficznego przy akceptowalnej jakości. Rozmiar pliku zależy głównie od tego, ile informacji trzeba zapisać (liczba pikseli, liczba kanałów, głębia kolorów) oraz jak te dane są kompresowane przez wybrany format.

Odpowiedź "zmniejszyć jego rozdzielczość" jest zasadna, bo redukcja liczby szczegółów obrazu (najczęściej przez zmniejszenie wymiarów w pikselach, np. 4000×3000 → 1600×1200) zmniejsza liczbę pikseli, a więc ilość danych. Mniej danych do zapisania zwykle oznacza mniejszy plik i szybsze ładowanie strony.

Dlaczego pozostałe opcje są błędne w kontekście zmniejszania rozmiaru pliku?

  • "zwiększyć jego głębię kolorów" zwiększa liczbę bitów potrzebnych do opisu koloru piksela (więcej możliwych barw), co zazwyczaj zwiększa ilość danych i rozmiar pliku.
  • "zapisać w formacie BMP" jest niekorzystne, bo BMP jest kojarzony z zapisem mało efektywnym pod względem rozmiaru (często brak kompresji lub prosta kompresja), więc pliki bywają bardzo duże w porównaniu z formatami webowymi.
  • "dodać kanał alfa" (przezroczystość) oznacza dodatkową informację na piksel (kolejny kanał), co zwykle zwiększa ilość danych, a więc nie jest typową metodą redukcji rozmiaru.

W praktyce webowej, oprócz zmniejszania rozdzielczości/wymiarów, stosuje się też dobór formatu i kompresji (np. eksport do formatów webowych i kontrola jakości). Kluczowe jest rozumienie zależności: mniej pikseli i mniej informacji na piksel to zwykle mniejszy plik.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Najczęściej wpływa: liczba pikseli (wymiary obrazu), ilość informacji na piksel (głębia kolorów, kanały) oraz rodzaj kompresji w formacie pliku. Duży obraz o wielu pikselach i bez efektywnej kompresji będzie ważył znacznie więcej.
Najpierw dopasuj wymiary w pikselach do realnego miejsca na stronie (nie wstawiaj 4000 px, jeśli wyświetlasz 1200 px). Następnie użyj kompresji przy eksporcie do formatu webowego i sprawdź efekt wizualny na typowych ekranach.
BMP jest zwykle mało efektywny rozmiarowo, bo często przechowuje dane obrazu bez nowoczesnej kompresji. To powoduje bardzo duże pliki i wolniejsze ładowanie strony. W WWW standardowo wybiera się formaty projektowane pod mniejszy transfer danych.
Głębia kolorów określa, ile bitów opisuje kolor piksela (czyli ile możliwych barw można zapisać). Większa głębia to zwykle więcej danych do zapisania, a więc potencjalnie większy rozmiar pliku. Zmiana głębi ma sens tylko, gdy jest potrzebna jakościowo.
Kanał alfa to informacja o przezroczystości piksela. Jest przydatny np. w ikonach, logotypach i elementach UI, które muszą "nakładać się" na tło. Trzeba jednak pamiętać, że dodatkowy kanał może zwiększać ilość danych, więc nie jest to metoda redukcji rozmiaru.
Zazwyczaj nie. W WWW kluczowe są wymiary w pikselach i kompresja, a nie wartość DPI, która ma większe znaczenie w druku. Jeśli zmienisz tylko DPI bez zmiany liczby pikseli, plik często pozostanie podobnej wielkości i będzie tak samo ciężki do pobrania.
Typowe błędy to: wgrywanie zbyt dużych obrazów i poleganie na skalowaniu w CSS, wybór nieefektywnych formatów (np. bardzo ciężkich), ustawianie zbyt wysokiej jakości kompresji "na zapas" oraz brak testu na urządzeniach mobilnych. Skutkiem są wolniejsze strony.
Zmniejsz wymiary, gdy obraz ma więcej pikseli niż potrzebujesz do wyświetlania. Zmień format, gdy problemem jest sposób zapisu/kompresji (np. nieefektywny format) albo gdy potrzebujesz konkretnej cechy, jak przezroczystość. Często najlepszy efekt daje połączenie obu kroków.
Sprawdź rozmiar pliku (KB/MB) i porównaj z innymi zasobami strony, a także zmierz czas ładowania w narzędziach deweloperskich przeglądarki. Jeśli obrazy dominują w transferze i opóźniają renderowanie, warto je zmniejszyć (wymiary/kompresja/format) i przetestować ponownie.
Opanuj podstawy: wymiary w pikselach, pojęcie rozdzielczości, głębia kolorów, przezroczystość i wpływ formatu na kompresję. Rób ćwiczenia: eksportuj tę samą grafikę w różnych ustawieniach i porównuj rozmiar oraz jakość. To ułatwia szybkie wybory na teście.
info

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

Źródła:

  • MDN Web Docs: "Images" / "Responsive images" (omówienie doboru rozmiarów i optymalizacji), https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML — dostęp 2026-02-27
  • Google web.dev: "Fast load times" / zagadnienia optymalizacji zasobów i obrazów, https://web.dev/fast/ — dostęp 2026-02-27
  • MDN Web Docs: "Image file type and format guide" (porównanie formatów i ich cech), https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types — dostęp 2026-02-27

Materiały:

  • Dokumentacja MDN dotycząca optymalizacji obrazów w WWW
  • Materiały o formatach graficznych i kompresji (PNG/JPEG/WebP/AVIF)
  • Kursy front-end o wydajności (performance) i optymalizacji zasobów

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego