W jaki sposób przeglądarki renderują obrazy?

Question

Chociaż brzmi to proste pytanie, o którym myślałem.

Jak dokładnie przeglądarki renderują obrazy? Na przykład, co mam na myśli, powiedzmy, że mam obraz 1MB, który ma 3000px x 1500px. Następnie decyduję się umieścić ten obraz w pojemniku, który jest ustawiony na szerokość: 100%; oznacza to, że będzie on skalowad się w sposób reponsywny. Czy przeglądarka załaduje całe 1 MB, a następnie przeskaluje obraz, aby dopasować go do kontenera, czy zmniejszy go, a następnie załaduje?

Pytam, ponieważ jest to w dużej mierze moja sytuacja i jeśli działa to pierwsze (najpierw ładuję 1Mb), to chyba muszę podać oddzielny obraz na urządzeniach mobilnych?

Dzięki

EDIT: Ponieważ ludzie mówią, że to będzie załadować obraz 1MB pierwsze, jak proponujesz służę duży obraz dla użytkownika? Skaluj go na komórki i zainstaluj wersję mobilną/komputerową?

Answer 1

Przeglądarka (oczywiście) nie można skalować (czy cokolwiek) z obrazu przed załadowaniem.

Answer 2

Obraz jest pobierany najpierw za pomocą żądania HTTP, np.

GET /images/myimage.png 

, a następnie stosowane są skalowania/transformacje. Więc jeśli chcesz mieć różne obrazy dla różnych platform, powinieneś poprosić o takie.

Answer 3

CSS jest stosowane po obraz jest w pełni załadowany. Krótko mówiąc, najpierw powinien załadować obraz o wielkości 1 MB, a następnie zastosować wymiary. Obrazy są również przechowywane po stronie serwera. Znalazłem bardzo użyteczny obraz, który opisuje w ten sposób: -

Na marginesie:

Przeglądarki często czynią tę samą stronę kilka razy w bardzo krótkim okresie czasu, szczególnie po przeczytaniu metadane obrazu.