docs/functional_docs/logo_optimization_guide.md

# Logo优化指南

## 当前Logo问题
- **文件大小**: 4MB (过大)
- **分辨率**: 2048x2048像素 (对于UI显示过高)
- **加载时间**: 可能导致UI颤动和缓慢加载

## 优化建议

### 方法1：使用在线工具
1. 访问 [TinyPNG](https://tinypng.com/)
2. 上传你的logo.png文件
3. 下载压缩后的文件
4. 替换 `www/logo.png`

### 方法2：使用Photoshop/GIMP
1. 打开logo.png
2. 调整尺寸为200x50像素
3. 导出为PNG-8格式
4. 质量设置为80-90%
5. 保存并替换 `www/logo.png`

### 方法3：使用R代码优化
如果你安装了图像处理包，可以使用R代码：

```r
# 安装包
# install.packages("magick")
library(magick)

# 读取并优化logo
logo <- image_read("www/logo.png")
logo_resized <- image_scale(logo, "200x50")
logo_compressed <- image_write(logo_resized, "www/logo_optimized.png", quality = 85)

# 替换原文件
file.rename("www/logo_optimized.png", "www/logo.png")
```

## 目标规格
- **文件大小**: <100KB
- **尺寸**: 200x50像素 (或保持比例)
- **格式**: PNG (透明背景)
- **加载时间**: <1秒

## 临时解决方案
如果暂时无法优化logo文件，可以考虑：

1. **使用小尺寸版本**:
   ```bash
   # 如果有convert工具 (ImageMagick)
   convert www/logo.png -resize 200x50 www/logo_small.png
   mv www/logo_small.png www/logo.png
   ```

2. **或使用备用方案**:
   - 暂时重命名logo文件，让应用显示DNA图标
   - 等logo优化后再改回来

现在应用有了以下改进：
- ✅ 固定高度容器防止颤动
- ✅ 默认显示DNA图标，logo加载完成后替换
- ✅ 更好的错误处理
- ✅ CSS优化防止布局跳动