Czy przeglądarka pobierze obraz dwukrotnie, jeśli jest używany zarówno w obrazie src, jak i obrazie tła div?

Question

Z powodów, które są konieczne, ale trudne do wytłumaczenia, ustawiam zarówno obraz absolutnie pozycjonowany, jak i obraz tła na div.

Chcę się upewnić, że gdy przeglądarka złapie te obrazy (są one bardzo duże), nie będzie ich ponownie pobierać.

Udawajmy, że obraz bg.jpg w poniższym kodzie wynosi 500 KB. Czy poniższy kod powoduje, że przeglądarka pobiera obraz w całości dwukrotnie, co daje łącznie 1000 KB?

<style> 
    header { 
     background: url(img/bg.jpg) center center fixed transparent; 
    } 
</style> 

<header> 
    <img src="img/bg.jpg" width="500" height="500"> 
</header> 

EDIT: Dziękuję wszystkim za doskonałe odpowiedzi. Chciałem tylko dwukrotnie sprawdzić i upewnić się, że nie zmuszałem użytkownika do ponownego pobrania tych bardzo dużych obrazów.

Answer 1

Przeglądarki są dość inteligentne, jeśli chodzi o buforowanie. Powinno się go prosić tylko raz.

Dodatkowo, gdy prosi serwer o obraz, zwykle wysyła z prośbą o obraz, kilka nagłówków, które przekazują serwerowi .. Hej, chcę tego obrazu, ale mam już taki, który ma te atrybuty że mi powiedziałeś o tym ostatnim razem, kiedy mi to wysłałeś.

Serwer może następnie reagować z 200 co oznacza, że ​​jest inaczej zawartość 304 czyli ten, którego masz to samo, więc nie będę wysyłać go ponownie, użyj jednego co masz ..

Jedną z tych metod używa ETAG header, ale jest ich jeszcze kilka.

Twój serwer musi obsługiwać to, ale większość robi.

Dodatkowo interweb składa się z bandą skrytek, które będą również spojrzeć na ten rodzaj wartości nagłówka i zwrot rzeczy dla was .. Dlatego Wagi wstęga tak dobrze ;-)

Answer 2

Nie, przeglądarka zrobi to w pamięci podręcznej. Jednak w zależności od ustawień użytkownika przeglądarka może zażądać obrazu ponownie przy następnym żądaniu strony, na przykład jeśli użytkownik wyczyści pamięć podręczną między odwiedzinami strony.

Answer 3

Nie, zostanie pobrany raz, a następnie umieszczony w pamięci podręcznej przeglądarki. Przy następnym odwołaniu do adresu URL będzie on wyszukiwał obraz z pamięci podręcznej zamiast pobierać go z serwera.