在HTML页面中预留图片占位，可以通过以下是几种常见方法来实现：
1. 使用<img>标签 + src属性
最直接的方式是使用<img>标签，并为其指定一个透明图片（如.gif）或一个将会被替换的真实图片URL作为占位符。
<img src="transparent-placeholder.gif" alt="图片描述" width="300" height="200">
2. CSS背景图片占位
可以为一个div或其他元素设置背景图片作为占位符，并控制其大小。
<div class="image-placeholder" style="width: 300px; height: 200px; background-image: url('placeholder.jpg');"></div>
3. CSS3 Gradients作为占位符
使用CSS3的渐变（Gradients）创造一个纯色或渐变色的背景作为图片占位。
<div class="gradient-placeholder" style="width: 300px; height: 200px; background: linear-gradient(to bottom, #f0f0f0 0%,#f0f0f0 100%);"></div>
4. Flexbox或Grid布局预留空间
在使用Flexbox或CSS Grid布局时，可以直接预留空间，不必要求实际图片立即加载。
<div class="flex-container"> <div class="flex-item placeholder" style="width: 300px; height: 200px;"></div> </div>
5. 使用SVG作为占位符
SVG可以作为一种矢量图形占位符，定义确切的尺寸。
<svg width="300" height="200"></svg>
6. JavaScript动态占位
虽然不是纯粹的HTML方法，但可以利用JavaScript在图片加载前显示一个占位符，加载完成后替换为真实图片。
选择哪种方法取决于具体需求，比如是否需要保持页面布局的一致性、是否需要支持旧浏览器等。在现代Web开发中，CSS3 Gradients是一个既美观又高效的图片占位方案。
总结
请注意使用以上固定长宽尺度的方式设置占位对于响应式不太友好，在拖拽浏览器窗口大小时，设置的图片大小会保持不变以至于很突兀的显示在网页中，解决方法是最好将width设置为auto，这样能达到不受页面横向拖拽的影响。