63 lines
1.8 KiB
Markdown
63 lines
1.8 KiB
Markdown
|
|
# 图片资源目录
|
|||
|
|
|
|||
|
|
此目录用于存放网站所需的图片资源。
|
|||
|
|
|
|||
|
|
## 必需图片文件
|
|||
|
|
|
|||
|
|
请将以下图片文件放置在此目录中:
|
|||
|
|
|
|||
|
|
### 1. logo.png
|
|||
|
|
- **用途**: 网站Logo,显示在页眉左侧
|
|||
|
|
- **规格**: 建议尺寸 200x60px 或等比例,高度48px显示
|
|||
|
|
- **格式**: PNG(支持透明背景)
|
|||
|
|
- **文件名**: `logo.png`
|
|||
|
|
|
|||
|
|
### 2. avatar.png
|
|||
|
|
- **用途**: 默认用户头像,显示在页眉右侧
|
|||
|
|
- **规格**: 正方形,建议 80x80px 或更高分辨率
|
|||
|
|
- **格式**: PNG/JPG
|
|||
|
|
- **文件名**: `avatar.png`
|
|||
|
|
|
|||
|
|
### 3. placeholder.png (可选)
|
|||
|
|
- **用途**: 图片加载失败时的占位符
|
|||
|
|
- **规格**: 通用尺寸,建议 200x200px
|
|||
|
|
- **格式**: PNG
|
|||
|
|
- **文件名**: `placeholder.png`
|
|||
|
|
|
|||
|
|
## 图片优化建议
|
|||
|
|
|
|||
|
|
1. **文件大小**: 尽量压缩图片大小,建议单个文件不超过100KB
|
|||
|
|
2. **格式选择**:
|
|||
|
|
- Logo: 使用PNG格式保持透明背景
|
|||
|
|
- 照片类: 使用JPG格式
|
|||
|
|
- 图标类: 使用PNG或SVG格式
|
|||
|
|
3. **分辨率**: 考虑高分辨率屏幕,建议提供2x版本
|
|||
|
|
|
|||
|
|
## 目录结构示例
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
images/
|
|||
|
|
├── logo.png # 网站Logo
|
|||
|
|
├── avatar.png # 默认用户头像
|
|||
|
|
├── placeholder.png # 占位符图片
|
|||
|
|
├── icons/ # 图标文件夹
|
|||
|
|
│ ├── home.svg
|
|||
|
|
│ ├── user.svg
|
|||
|
|
│ └── settings.svg
|
|||
|
|
└── backgrounds/ # 背景图片文件夹
|
|||
|
|
├── hero-bg.jpg
|
|||
|
|
└── pattern.png
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用说明
|
|||
|
|
|
|||
|
|
1. 确保图片文件名与HTML/CSS中引用的路径一致
|
|||
|
|
2. 所有图片都应该有合适的alt属性描述
|
|||
|
|
3. 考虑为重要图片添加懒加载属性
|
|||
|
|
4. 定期检查图片链接是否有效
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
- 请确保图片版权合规
|
|||
|
|
- 避免使用过大的图片文件影响加载速度
|
|||
|
|
- 建议定期清理未使用的图片文件
|