Optymalizacja grafiki polega na przygotowaniu obrazów tak, aby miały możliwie mały rozmiar pliku przy zachowaniu akceptowalnej jakości. Ma to bezpośredni wpływ na czas ładowania strony, szczególnie gdy grafika ma duże wymiary, np. 2000×760 px.
Najważniejsza zasada
Jeżeli obraz ma być wyświetlany na stronie w mniejszym rozmiarze, należy zmniejszyć go w programie graficznym, a nie tylko przez HTML lub CSS.
Przykład: jeśli obraz ma szerokość 2000 px, ale na stronie będzie widoczny jako 800 px, warto przygotować plik o szerokości zbliżonej do 800 px. Dzięki temu przeglądarka pobierze mniejszy plik.
Dlaczego HTML i CSS nie wystarczą?
Atrybuty HTML, np. width i height, oraz właściwości CSS, np. width: 800px, zmieniają głównie sposób wyświetlania obrazu. Nie zmniejszają rzeczywistego rozmiaru pliku pobieranego z serwera.
<img src="duzy-obraz.jpg" width="800" alt="Grafika">
W tym przykładzie obraz może być widoczny jako mniejszy, ale jeśli plik nadal ma 2000 px szerokości, przeglądarka i tak pobiera dużą grafikę.
Dobre praktyki
- zmniejsz rzeczywiste wymiary obrazu w edytorze graficznym,
- dobierz odpowiedni format, np. JPEG, PNG, WebP,
- stosuj kompresję obrazu,
- nie używaj grafik większych niż potrzebne,
- przygotowuj osobne wersje dla różnych rozdzielczości, jeśli to konieczne.
Wniosek egzaminacyjny
Aby realnie przyspieszyć ładowanie strony z dużą grafiką, należy zmniejszyć jej rozmiar w programie graficznym, ponieważ tylko wtedy zmniejsza się ilość danych pobieranych przez użytkownika.