但如果在导出为正确格式之前

和之后对每个设计进行优化和压缩，以图像为主导的设计仍然是可能的。始终确保使用适当的图像类型。浓彩色照片作为 JPEG 文件效果更好，而平面彩色图形则应采用 PNG8。渐变和更复杂的图标最适合使用带有 alpha 透明度的 PNG24/32 或 SVG。 Photoshop和Fireworks可以帮助您自定义图像不同区域的优化级别。这意味着主要主题可以保持高质量，而其余主题则进行优化以提高性能。ImageOptim和TinyPNG等无损图像压缩工具可以最大限度地利用文件大小，而不会损失图像质量。 您还可以使用新的 HTML5<picture>元素和srcset图像size属性。这两个语言新增功能可帮助您直接在 HTML 中定义响应式图像，因此浏览器将仅下载与给定条件匹配的图像。 浏览器和 IE10/11（及更。



早版本）不支持。Polyfill 替代方案可以使此方法在旧版浏览器上工作，但这些是必须单独加载的外部 JavaScript 库，并且考虑到其他技术可用，可能不值得。值得考虑您的目标受众以及他们将使用哪些技术，以了解是否需要额外的填充材料。 数据 URL 是最后一个选项。图像数据可以转换为 base64（或 ASCII）编码字符串并直接嵌入到 CSS 或 HTML 文件中，而不是链接到外部图像文件。有一个简单的在线转换工具可用。数据 URL 很有用，因为 Whatsapp 号码列表 它们可以节省 请求并可以更快地传输小文件。但是，如下所示，嵌入的代码大小比链接到外部图像更大。增加的长度会使 HTML 和 CSS 文档更难以维护，并且每次图像更改都必须重新编码和嵌入。 复制 自动化 CMS 媒体优化 应用上一节中的资产优化技术意味着我们可以为BAM选。



择经典的、以图像为主导的设计，使他们能够展示新的建筑项目摄影。 但我们还需要给予 BAM 更新内容的自由，而不需要我们优化每个图像。当然，没有任何解决方案比手动优化更有效，但我们确实设法实现了合理程度的自动化优化。我们重新配置了他们现有的Sitefinity CMS 以创造灵活性。标准选项用于自动调整图像大小（和优化），以适应每个网页的上下文： 复制 Sitefinity 还可以使用 URL 参数调整 URL 中的图像大小，并且可以通过使用以下选项缓存调整大小的图像来实现更快的渲染： /images/image-opt.jpg?size=480 复制 移动设备上的 BAM 网站 BAM 网站的主页依赖于定期的项目摄影更新，因此我们实施了自动图像优化。（大预览） 大多数 CMS 系统都允许一定程度的媒体优化。例如，您可以定义媒体设置，以确保未来用户仅添加适合网站模板的图像。这是WordPress的一个简单示例。 WordPress 媒体设置 在 WordPress 中，实施此类媒体设置，以确保将来的图像上传适合网站模板。