KWALIFIKACJA AUD2 - TEST WIEDZY NR 5

PYTANIE NR 36.
Jak przygotować pliki miniatur do galerii na stronie internetowej, aby wszystkie miały identyczne proporcje i wymiary, gdy zdjęcia źródłowe mają różne proporcje (bez użycia CSS do kadrowania)?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Aby miniatury w galerii miały ten sam kształt i rozmiar, przy różnych proporcjach zdjęć trzeba najpierw ujednolicić proporcje przez kadrowanie, a dopiero potem wykonać skalowanie do wspólnych wymiarów.
Samo skalowanie zachowujące proporcje nie da identycznych kafelków, a skalowanie bez proporcji zniekształca obraz.

Pełne wyjaśnienie:

W galerii internetowej "spójny wygląd" zwykle oznacza, że wszystkie miniatury tworzą regularną siatkę: mają ten sam kształt (proporcje) i te same wymiary. Gdy zdjęcia źródłowe mają różne proporcje (np. 3:2, 4:3, 16:9), nie da się uzyskać identycznych kafelków samym skalowaniem bez kompromisów.

Poprawne podejście w przygotowaniu plików graficznych to: najpierw kadrowanie (crop) do jednego formatu (np. wszystkie do 1:1 albo 4:3), a następnie skalowanie (resize) do docelowych pikseli miniatur. Kadrowanie rozwiązuje problem różnych proporcji, a skalowanie ujednolica fizyczny rozmiar plików i wygląd siatki.

Dlaczego pozostałe odpowiedzi są błędne?

  • "Przeskalować … bez zachowania proporcji" prowadzi do rozciągania lub ściskania obrazu. Efektem są zniekształcone twarze i przedmioty, co obniża jakość publikacji.
  • "Przeskalować … zachowując proporcje, bez przycinania" zachowuje geometrię, ale przy różnych proporcjach nie zapewni jednocześnie identycznej szerokości i wysokości wszystkich miniatur. Aby utrzymać stały kafelek, trzeba by dodać puste marginesy (letterboxing) lub jednak zastosować kadrowanie.
  • "Pozostawić w oryginalnych wymiarach" oznacza brak kontroli nad układem: miniatury będą różne, siatka się "rozjedzie", a strona może ładować cięższe pliki niż potrzeba.

W praktyce zawodowej fotograf przygotowujący materiał do publikacji zyskuje na metodzie crop+resize, bo ma kontrolę nad kadrem (ważne elementy nie zostaną ucięte przypadkowo) oraz może równocześnie zadbać o optymalny rozmiar i jakość plików.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Proporcje (aspect ratio) to stosunek szerokości do wysokości, np. 3:2 lub 16:9. Jeśli miniatury mają różne proporcje, ich wysokość lub szerokość będzie się różnić przy skalowaniu, więc siatka galerii traci równe "kafelki". Ujednolicenie proporcji stabilizuje układ.
Najszybciej osiągniesz identyczne miniatury przez dwa kroki: kadrowanie do jednego formatu (np. 1:1), a potem skalowanie do docelowych pikseli. Kadrowanie zapobiega różnym kształtom, a skalowanie ujednolica rozmiar i wagę plików.
Skalowanie "na siłę" do tej samej szerokości i wysokości bez zachowania proporcji deformuje obraz. Koła stają się owalami, a twarze są nienaturalnie rozciągnięte. Taki efekt wygląda nieprofesjonalnie i obniża wiarygodność portfolio lub sklepu.
Nie zawsze. Gdy zdjęcia mają różne proporcje, zachowanie proporcji powoduje, że przy tej samej szerokości zmieni się wysokość (lub odwrotnie). W efekcie miniatury nie będą miały identycznych wymiarów. Do równych kafelków potrzebujesz kadrowania lub pustych marginesów.
Kadrowanie usuwa fragmenty zdjęcia, aby uzyskać ustalony kształt, np. kwadrat. Dzięki temu wszystkie miniatury mają te same proporcje, a fotograf zachowuje kontrolę nad tym, co zostaje w kadrze. To ważne przy zdjęciach ludzi, produktów i architektury.
CSS (np. dopasowanie obrazu do kontenera) bywa wygodny, gdy układ jest dynamiczny i nie chcesz generować wielu wersji plików. Minusem jest mniejsza kontrola nad kadrem w każdej miniaturze. W zadaniach o przygotowaniu plików najczęściej zakłada się pracę w edytorze.
Najczęstsze błędy to: rozciąganie zdjęć (deformacja), mieszanie różnych proporcji miniatur w jednej siatce, eksport zbyt dużych plików (wolne ładowanie) oraz brak spójnego kadru (np. głowy "ucięte" losowo). Pomaga stały format i kontrolowane crop+resize.
Dobierz wymiary miniatur do realnego rozmiaru wyświetlania w układzie strony (np. szerokość kafelka w CSS). Nie ma sensu publikować miniatur 2000 px, jeśli w galerii mają 300 px. Po resize zastosuj odpowiednią kompresję i format, aby ograniczyć wagę pliku.
W galerii produktowej liczy się powtarzalność. Ustal jeden format (często 1:1), wykonaj kadrowanie tak, by produkt był podobnej wielkości w kadrze, a następnie przeskaluj do jednego rozmiaru. Na końcu sprawdź serię zdjęć obok siebie, czy "trzymają" linię i marginesy.
W praktyce stosuje się podejście wielorozmiarowe: przygotowujesz kilka wersji (np. mała/średnia/duża) i dobierasz je zależnie od ekranu. Niezależnie od tego, miniatury powinny mieć spójne proporcje (crop) i odpowiednie wymiary (resize), by siatka była równa.
info

To pytanie poprawnie rozwiązuje 45% zdających egzamin. trudne

Źródła:

  • MDN Web Docs: "object-fit" (CSS) — opis dopasowania i kadrowania obrazu w kontenerze, https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit (dostęp 2026-03-05)
  • W3C: CSS Images Module Level 3 — definicje dopasowania obiektów i relacji proporcji, https://www.w3.org/TR/css-images-3/ (dostęp 2026-03-05)
  • MDN Web Docs: "Responsive images" — kontekst przygotowania obrazów do WWW i różnych rozmiarów, https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images (dostęp 2026-03-05)

Materiały:

  • Dokumentacja edytora graficznego (narzędzia Crop/Resize/Export for Web)
  • Poradniki o przygotowaniu zdjęć do internetu (optymalizacja rozdzielczości, formaty, kompresja)
  • Dokumentacja CSS dotycząca dopasowania obrazów (dla kontekstu alternatyw, np. object-fit)

Aktualizacja pytania: 03.04.2026



Aktualizacja pytania: 03.04.2026
📡 Brak połączenia internetowego