保持一个主人,并创建一个网站交付副本
保存原始图像与其图像描述和批准记录。 创建单独的交付文件为页面的实际图像区域。 此使您能够更改图像框架或压缩后,而无需重复编辑唯一的源文件。
目前,THE RENDER OFFICE 将 PNG 图像以平方、景观或肖像尺寸返回。 一个大源可能有用完成,但一个小类卡可能需要更少的像素。 图像创建质量设置并不是准备适当的网页出口的替代品。
Match 交付像素到布局
查看图像显示的尺寸在您支持的实际布局和设备密度上。 准备合适的图像变量,网站可以响应性地服务。 单独减少 CSS 宽度不会减少下载文件的字节。
MDN 文件如何图像来源候选人和大小信息帮助浏览器选择合适的资源。 所宣布的布局必须匹配真正的页面;不正确的尺寸信息可以使浏览器选择一个不适合的候选人。
比较压缩到最终视图大小
出口由出版工作流支持的适当格式,然后比较文件大小和外观。 检查格拉迪安,精细的结构,边缘,并在压缩后任何准确的产品细节。 保持透明度只有当布局实际需要它时。
选择最小的合适的文件,保留所需的配置质量。 没有普遍的文件大小目标证明图像是优化。 一个小型装饰卡和一个详细的产品图像有不同的工作,应该根据它进行审查。
| 田野 | 记录值 | 评论问题 |
|---|---|---|
| 定位 | 现行页面和图像区域 | 图像框架是否为此配置服务? |
| 来源与出口 | 硕士文件名和交付选项 | 出口可以再生吗? |
| 尺寸和比特 | 目前的像素大小和文件大小 | 提供的资源是否合适? |
| 视觉评论 | 可接受的品质与所需尺寸 | 压缩是否删除重要信息? |
按重量储存布局空间和负载
提供内在的宽度和高度信息,以便浏览器可以预订图像的外观比例,直到它到达。 MDN 解释了如何减少布局运动。 确认最终图像框架和CSS行为符合预订空间。
使用轻松的加载,以便适当的图像不需要初始视图。 不要对主图像无歧视地应用,一个访问者应该立即看到。 查看实际页面行为,而不是将一个负载属性视为普遍性能调整。
给图像有用的搜索和读者背景
将图像放在相关文本旁边,并选择一个简短的描述文件名。 在此页面上写下图像的目的的字体,避免关键词列表。 Google 将文件名描述为一个轻微的提示,并使用周围页面背景来理解主题;单独的文件名不确定相关性或排名。
通过适当的工具查看发布页面的实际图像请求、布局、可用性和性能。 在比较版本之前记录条件和结果。 更快的交付可以改善体验,但收入仍然取决于报价,观众和完整的转换路径。