¿Como funciona el sistema de cache en el navegador?

Suponiendo que mi navegador entra a una web (pagina1.com) que tiene esta imagen:

<img src="http://ejemplo.com/imagen.png">

La imagen se queda guardada en cache, osea al recargar web el navegador no vuelve a descargarla.

Mi duda es la siguiente:


Si luego entro por primera vez a una web distinta (pagina2.com) que también tiene la misma imagen:

<img src="http://ejemplo.com/imagen.png">

Significa que el navegador tomara imagen.png del cache o hará una nueva petición?


Quisiera saber si tambien seria igual para los archivos CSS

En el caso que mencionas el navegador utilizaría la copia guardada siempre y cuando no haya expirado el tiempo de caché.
Es por eso que se recomienda utilizar CDN para librerías como bootstrap, jquery, angular, etc, porque es probable que el usuario que visite tu sitio ya tenga guardada una copia del archivo en su caché, aparte de que le ahorras ancho de banda a tu servidor y generalmente los CDN's tienen un tiempo de respuesta menor. 😱nthego: