不会破坏布局的计数器

把一张外部的图像并进一个精心搭建起来的网页里，始终带着打乱既有视觉结构的风险。浏览器在构建一个页面时，会把每一个文本块和每一张图形的位置都算出来，好造出一段顺畅的阅读体验。

如果一张图像缺少明确的尺寸说明，浏览器就没法提前把必要的空间留出来。它必须一直等到图像文件被完整地下载下来，才能确定它到底有多高、有多宽。这样的延迟，会引出一种被称作「版式跳动」的现象。

文本突然向下或向侧面跳跃，为新到达的图形腾出空间。对于任何试图阅读文章的人来说，这种突然的移动极具破坏性，并会给人留下技术不稳定的印象。

标签里的两个数字先把位置占住

防止版式跳动的办法非常简单，只需要把固定的属性直接写进 HTML 代码里就行。每一个图像标签都能接受一个特定的高度值和宽度值，以像素来表示。当这些尺寸在源代码里被预先声明出来时，浏览器立刻就准确地知道该在屏幕上留出多少空白——甚至在图像文件本身开始下载之前，它就已经知道了。

在图形到达之前，那块空间始终保持完全的空白，让周围的文本牢牢地钉在原处。要找到正确的尺寸，就得去看从目录里选中的那个具体的设计。

每种设计都有一个精确的、不变的尺寸。将这些精确的数字写入代码完全消除了跳跃效果。无论网络速度如何，它都能保证流畅、不间断的页面加载。

在网络连接卡顿或完全失败的情况下，丢失的图像可能会在屏幕上留下丑陋、破损的图标。为了妥善处理此问题，称为 alt 属性的替代文本属性起着至关重要的作用。

如果图像没法显示出来，浏览器就改为显示这个属性里给出的文本。对于像访客计数这样纯粹属于装饰性或者技术性的元素，这段文本应当写得极其简短，或者干脆用两个中间不带空格的引号把它整个留空。

如果图像无法加载，过长、描述性的替代文本会以不可预测的方式拉伸保留的布局框。空属性只会留下一个空白、不显眼的空间，从而保留页脚或侧栏的结构完整性。

现代网络标准提供了额外的工具来控制外部图形如何影响文档的整体加载速度。两个特定的属性 loading 和 decoding 指示浏览器如何对图像进行优先级排序。

把加载属性设成 lazy，就是在告诉浏览器：把取这个文件的动作往后拖，一直拖到读者真的向下滚动到它附近为止。而把解码属性设成 async，则允许浏览器先去处理正文和版式，不必等着图像的数据被完全解读出来。

由于统计图形在一个教区或者社团的页面上，很少会是最重要的那条信息，这些属性就保证了真正的内容永远排在最前面出现。测量工具静静地在后台占下一席之地，从不拖慢主要讯息的送达。