Aby zwiększyć szybkość działania strony zawierającej grafikę o wymiarach 2000 px na 760 px, należy zmniejszyć rozmiary grafiki
A. za pomocą właściwości CSS, podając rozmiar w procentach.
B. w programie graficznym.
C. za pomocą atrybutów HTML.
D. za pomocą właściwości CSS, podając rozmiar w pikselach.
Pytanie z egzaminu CKE, czerwiec 2020 (arkusz EE.09-SG-20.06).
Zmniejszenie grafiki w programie graficznym jest najlepszym rozwiązaniem, jeśli celem jest realne przyspieszenie działania strony. Chodzi o to, że przeglądarka musi najpierw pobrać plik z serwera, a dopiero potem może go wyświetlić. Jeżeli obraz ma fizycznie 2000 px na 760 px, ale na stronie jest pokazywany np. jako 500 px szerokości, to bez wcześniejszej obróbki użytkownik i tak pobiera duży plik. To marnuje transfer, wydłuża czas ładowania i pogarsza wyniki w narzędziach typu Lighthouse albo PageSpeed Insights. W programie graficznym, takim jak GIMP, Photoshop, Photopea czy Affinity Photo, można zmienić rzeczywiste wymiary bitmapy, dobrać kompresję i zapisać obraz w odpowiednim formacie, np. WebP, AVIF, JPEG albo PNG zależnie od rodzaju grafiki. Moim zdaniem to jedna z tych rzeczy, które od razu widać w praktyce: mniejszy plik to szybsze ładowanie, szczególnie na telefonie i słabszym internecie. Dobra praktyka webowa mówi, żeby przygotowywać obrazy w rozmiarach zbliżonych do faktycznego użycia w layoucie, a dla responsywności stosować dodatkowo srcset i różne wersje obrazów. HTML i CSS mogą sterować wyglądem, ale optymalizacja źródłowego pliku graficznego robi największą robotę.
Samo zmniejszenie obrazu za pomocą HTML albo CSS nie rozwiązuje problemu szybkości ładowania strony, bo takie metody wpływają głównie na sposób wyświetlania grafiki, a nie na rzeczywisty rozmiar pobieranego pliku. To częsty błąd myślowy: widzimy na ekranie mniejszy obrazek, więc wydaje się, że stał się lżejszy. Niestety przeglądarka nadal musi pobrać oryginalny plik o wymiarach 2000 px na 760 px, razem z całą jego wagą w kilobajtach lub megabajtach. Atrybuty HTML typu width i height mogą być przydatne, bo pomagają przeglądarce zarezerwować miejsce na obraz i ograniczyć przesunięcia układu strony, czyli poprawiają stabilność layoutu. Nie są jednak narzędziem do kompresji ani zmiany fizycznych wymiarów pliku. Podobnie właściwości CSS, niezależnie od tego, czy podamy rozmiar w pikselach, czy w procentach, skalują obraz wizualnie w oknie przeglądarki. Mogą być bardzo ważne dla responsywnego projektowania, ale nie zmniejszają transferu danych. Z mojego doświadczenia wynika, że początkujący często mylą skalowanie na stronie z optymalizacją grafiki. W praktyce branżowej powinno się najpierw przygotować odpowiedni plik w programie graficznym, zmniejszyć jego rzeczywiste wymiary, dobrać format i kompresję, a dopiero potem używać CSS do dopasowania wyglądu w projekcie. Najlepiej też tworzyć kilka wariantów obrazu dla różnych ekranów i korzystać z mechanizmów responsywnych, takich jak srcset. Wtedy strona działa szybciej i jest bardziej przyjazna dla użytkownika.