| 页面位置 | 显示宽度 | 出图尺寸 | 屏幕适配 | 建议格式 | 说明 |
|---|
使用说明
- 按位置搜（横幅、头像、文章插图）找到对应行。
- 「出图尺寸」就是你在设计软件里该建的画布大小 —— 通常是显示宽度的 2 倍，适配高分屏。
- 图片做好后用「在线图片压缩」把体积压到推荐范围，再用「图片格式转换」统一转成 WebP。
常见问题
为什么要出 2 倍图？
因为现在手机和笔记本大多是高分屏（DPR 2 或 3）。同一个 400px 宽的容器，2 倍屏上有 800 个物理像素，只给 400px 的图会被拉糊。
2 倍图会不会让页面变慢？
会，所以要用 srcset 告诉浏览器「小屏只需要 1 倍图」。浏览器会自己挑合适的那张，不会无脑加载大图。
所有图都要转 WebP 吗？
优先用，但要留兜底。老设备（Win7 上的 IE、老 Safari）不认 WebP，用 picture 标签同时提供 JPEG 版本最稳。
相关工具
图片格式对照表
10 种常见图片格式横向对照：压缩方式、是否支持透明和动画、各自最适合的场景，以及每种的坑
图片文件头签名对照表
常见图片与文件格式的文件头签名（Magic Number）对照表，含十六进制字节、ASCII
图片分辨率对照表
从 VGA 到 8K 的常见分辨率对照表，含像素尺寸、宽高比、总像素数（百万像素）和典型用途
社交平台图片尺寸
微信公众号、朋友圈、小红书、抖音、微博、B站、淘宝等平台常用图片尺寸对照表，含推荐像素、宽高
屏幕分辨率对照表
电脑显示器和手机屏幕的常见分辨率对照表，含别名、宽高比、典型设备和逻辑分辨率说明，做响应式设
颜色名称与色值对照表
47 种常用颜色的中英文名称、HEX 色值和 RGB 值对照表，支持中英文和色值搜索，取色命
图片文件 · 该分类共 66 个工具，展开查看全部
在线图片压缩图片转 Base64图片格式转换图片尺寸缩放图片裁剪图片按比例裁剪图片旋转图片翻转镜像图片转黑白图片反色（负片）图片怀旧复古图片亮度对比度饱和度图片色阶压缩图片双色调图片模糊打码图片锐化图片边缘检测图片马赛克像素化图片暗角效果图片圆角处理图片圆形裁剪图片加边框图片加文字水印图片自动裁白边图片白底转透明图片压缩到指定大小图片转 ICO 图标图片主色提取图片明度分布分析查看图片 EXIF 信息清除图片元数据图片取色器图片格式对照表图片文件头签名对照表图片分辨率对照表社交平台图片尺寸证件照尺寸标准屏幕分辨率对照表颜色名称与色值对照表DPI 与打印尺寸对照图片压缩参数参考网站图片尺寸建议宽高比对照表色温对照表相机画幅尺寸对照表图片拼接图片九宫格切割证件照尺寸裁剪图片批量重命名图片二值化图片体积分析图片转 PDFPDF 合并PDF 拆分PDF 加水印PDF 加页码PDF 旋转页面PDF 转图片PDF 提取文字PDF 压缩GIF 拆帧GIF 合成GIF 压缩GIF 转 MP4视频转 GIF图片 OCR 识别