W kontekście stron responsywnych kluczowe jest, aby grafika wyglądała dobrze w wielu rozmiarach i na różnych gęstościach pikseli (HiDPI). SVG (Scalable Vector Graphics) opisuje obraz za pomocą kształtów, krzywych i parametrów matematycznych, a nie siatki pikseli. Dzięki temu skalowanie SVG nie powoduje "rozmycia" – obiekt jest renderowany na nowo w żądanym rozmiarze.
Formaty JPEG, GIF oraz BMP są formatami rastrowymi. Oznacza to, że obraz składa się z pikseli zapisanych dla konkretnej rozdzielczości. Gdy taka bitmapa zostanie powiększona ponad rozmiar źródłowy, przeglądarka musi "dopiszać" brakujące piksele (interpolacja), co zwykle skutkuje spadkiem ostrości i widocznymi artefaktami.
- "JPEG" sprawdza się głównie dla fotografii (kompresja stratna), ale nie daje skalowalności bez utraty jakości.
- "GIF" bywa używany dla prostych animacji, jednak ma ograniczoną paletę barw i nadal jest bitmapą, więc powiększanie pogarsza jakość.
- "BMP" to ciężki format bitmapowy (zwykle słabo skompresowany), nie jest typowym wyborem dla WWW i również nie jest wektorowy.
W praktyce w responsywnym interfejsie SVG jest szczególnie dobry dla ikon, logotypów, prostych ilustracji i elementów UI. Dla zdjęć nadal częściej wybiera się formaty rastrowe (np. JPEG/nowocześniejsze), ale wtedy stosuje się techniki dostarczania różnych rozdzielczości (np. warianty obrazów) zamiast oczekiwać "idealnego" skalowania jednego pliku.
