docs/functional_docs/logo_optimization_guide.md

Logo优化指南

当前Logo问题

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

优化建议

方法1：使用在线工具

1. 访问 TinyPNG
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代码：

# 安装包
# 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. 使用小尺寸版本:

   # 如果有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优化防止布局跳动