Aby przyspieszyć ładowanie strony z dużą grafiką (2000×760 px), należy zmniejszyć jej rozmiar:
Źle. Atrybuty HTML zmieniają tylko wyświetlanie - plik nadal pobiera się w pełnym rozmiarze.
Źle. CSS skaluje obraz na ekranie, ale przeglądarka i tak pobiera oryginalny, duży plik.
Źle. Skalowanie w CSS nie zmniejsza wagi pliku - pobierany jest ten sam duży obraz.
Dobrze. Zmniejszenie wymiarów i wagi pliku w edytorze graficznym realnie skraca czas pobierania.
Aby naprawdę przyspieszyć stronę, trzeba zmniejszyć wagę i wymiary pliku graficznego w programie graficznym (np. zmienić rozmiar do faktycznie potrzebnych pikseli i zoptymalizować kompresję). Dopiero wtedy przeglądarka pobiera mniejszy plik. Skalowanie w HTML czy CSS zmienia jedynie sposób wyświetlania, nie wielkość pobieranych danych. Dlatego grafikę zmniejsza się w programie graficznym.
Pozostałe sposoby nie zmniejszają tego, co przeglądarka musi pobrać. Atrybuty HTML (width/height) oraz właściwości CSS - czy to w pikselach, czy w procentach - sterują tylko rozmiarem wyświetlania obrazu na ekranie. Plik źródłowy nadal waży tyle samo i w całości jest ściągany, więc czas ładowania się nie poprawia, a obraz bywa dodatkowo skalowany „w locie”. Realne przyspieszenie daje zmniejszenie wymiarów i kompresja pliku w programie graficznym, dlatego to ta odpowiedź jest poprawna.