当相同图像的多个实例嵌入到 HTML 中时，是否会加载一次图像? [英] When multiple instances of same images are embedded in an HTML, does that load the image once?

问题描述

如果我在一个页面内多次使用同一张图片，每个图片会单独加载，占用带宽和流量，还是只加载一张，其余嵌入代码会重复使用图片?

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"/>

和 image.jpg 是 100kb.当浏览器加载此页面时，是否会浪费(100Kb * # of img 标签)流量?还是只加载一个 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?

推荐答案

尝试一下 — 在查看缓存问题时，Firefox 的 Firebug 或 Chrome 中的开发人员工具之类的工具非常有用.如果您打开任一中的网络"面板并重新加载页面，您将看到为每个项目发送的 HTTP 状态代码.304(未修改)表示该项目是从缓存本地检索的.

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.

正如上面 dthorpe 所说，缓存头在这里很重要.除了确保未设置无缓存"外，如果您有权访问服务器配置，则应该主动 – 如果您知道资源不会更改，则应确保设置一个Expires"标头(它告诉浏览器一个日期，在该日期之后缓存的副本应该被认为是陈旧的)或一个Cache-Control: max-age"标头(它给出了天数/小时数而不是设定日期).

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).

您也可以为不同的 MIME 类型/文件夹设置不同的时间尺度，这使您可以获取客户端数据以经常刷新 HTML 内容，但很少刷新图像和样式表.

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.

这是 Google 的一个不错的介绍视频/文章，值得一看.

Here's a nice intro video/article by Google that's worth checking out.

这篇关于当相同图像的多个实例嵌入到 HTML 中时，是否会加载一次图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！