图片内容精简减少无意义像素剥离冗余元素

移动端屏幕空间有限图片需去繁就简，PC端可能包含完整模特 + 背景 + 文案），移动端可裁剪为仅保留产品+核心文案减少背景细节，降低分辨率需求PC端复杂图片直接缩小，到移动端会导致细节模糊，需为移动端单独设计简化版本。

文字转文本减少图片承载信息，避免将标题按钮说明文字嵌入图片立即购买按钮做成图片，改用CSS+HTML实现文字样式，适配不同屏幕的字体大小，图片仅保留视觉元素背景图产品图，减少图片体积文字占图体积，且文字可被搜索引擎识别提升SEO效果。

视觉设计适配用设计规律降低分辨率依赖，色彩与对比度优化低饱和度色彩，高饱和度图片压缩后易出现色块失真，柔和色调在压缩后视觉损失更小避免渐变细节，复杂渐变色压缩后易出现色带，改用2-3色渐变或纯色块，减少压缩算法的处理压力，简化纹理与细节移动端屏幕小，用户对细节感知弱，背景图用纯色轻微噪点替代复杂纹理，压缩后体积可减少60%以上。图标设计用简约线条描边替代精细渐变或阴影，确保低分辨率下仍清晰。

比例与构图适配移动端竖屏优先，图片构图采用垂直居中产品图主体居中，上下留白避免横屏宽图在手机上被裁剪关键内容，安全区域设计参考手机刘海屏底部导航栏尺寸，确保核心视觉元素产品主体处于屏幕安全区，避免缩放或裁剪导致信息丢失。

响应式布局协同让图片与布局 “动态适配图片与容器等比例缩放,为图片容器设置固定宽高比通过属性实现,无论屏幕尺寸如何变化，图片始终填满容器且不变形，减少因拉伸导致的分辨率浪费，移动端采用上图下文或左图右文的单列布局，避免多图并列减少图片总量，PC端用3张图并排展示产品细节，移动端改为3张图纵向排列，每张图尺寸缩小宽度屏幕宽，总像素量降低50%图标、Logo、简单插图等用SVG格式，支持无损缩放在任何分辨率下清晰，体积通常比PNG小50%-80%，可通过CSS直接修改颜色、尺寸适配不同屏幕，无需生成多版本图片。