Web server doesn't send "entire website", but documents that browsers request.
For example when you access https://www.google.com/ the browser queries server for the document https://www.google.com/
. The server processess the request and sends back some HTML code.
Then the browser checks what the server has sent. In this case it's HTML webpage, so it parses the document and looks for referenced scripts, stylesheets, images, fonts etc.
At this stage the browser has finished downloading that document, but still doesn't have downloaded referenced documents. It can choose to do so or to skip them. Regular browsers will try to download all referenced documents for best viewing experience. If you have an ad blocker (like Adblock) or privacy plugin (Ghostery, NoScript), it may block some resources too.
Then the browser downloads referenced documents one by one, each time asking the server explicitly for a single resource. In our Google example the browser will find following references, just to name a few of them:
(actual files may be different for different users, browsers and sessions and may change over time)
Text-based browsers don't download images, Flash files, HTML5 video etc. so they download less data.
@NathanOsman makes a good point in comments: Sometimes small images are embedded directly in HTML documents and in those cases downloading them cannot be avoided. This is another trick used to reduce number of requests. They are very small, though, otherwise the overhead of encoding binary file in base64 is too big. There are few such images on Google.com: (base64 encoded size / decoded size)
- 19×11 keyboard icon (106 B / 76 B)
- 28×38 microphone icon (334 B / 248 B)
- 1×1 px transparent GIF (62 B / 43 B) which shows up in Chrome Dev Tools Resources tab, but I couldn't find it in the source - probably added later with JavaScript
- 1×1 px corrupted GIF file that appears twice (34 B / 23 B). Its purpose is a mystery to me.