If I use the same image within a single page multiple times, will each load separately, taking up the bandwidth and traffic, or will only one be loaded and rest embed code will reuse the image?
For example, let’s say I did this:
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
...
<img src="http://img.to/image.jpg"/>
<img src="http://img.to/image.jpg"/>
and image.jpg is 100kb. When the browser loads this page, will it waste up (100Kb * # of img tags) of traffic? or will it just load one image.jpg and reuse it for the rest of the tags?
Try it — when looking into caching issues, a tool like Firebug for Firefox or the Developer Tools within Chrome are very beneficial. If you open the ‘Net’ panel in either and reload a page, you will see what HTTP status code was sent for each item. 304 (Not modified) means that the item was retrieved locally from the cache.
As dthorpe says above, cache headers are important here. As well as making sure that ‘no-cache’ hasn’t been set, if you have access to your server configuration you should be pro-active — if you know a resource isn’t going to change you should make sure to set either an ‘Expires’ header (which tells browsers a date after which the cached copy should be considered stale) or a ‘Cache-Control: max-age’ header (which gives a number of days/hours rather than a set date).
You can set different time-scales for different mime-types/folders too, which allows you to get clients data to refresh HTML content often, but images and stylesheets rarely.
Here’s a nice intro video/article by Google that’s worth checking out.