Godzilla. 2018-10-17
网站建设
干货！高级Web开发中的图像优化
Web质量图像始终是在使用尽可能小的文件大小同时提供良好图像质量之间的平衡行为。直接从您的数码单反相机上嵌入照片可能看起来不错，但它会减慢您的网站的负载，而过度压缩的图像可能会提高您网站的速度，但会损害设计和整体审美。
对于我们主要处理的两种类型的图像资产：照片和图标/插图。我们执行图像质量检查和压缩技术的混合，在大多数情况下都能很好地工作。
文件类型以及何时使用它们
我们在构建网站时使用三种图像文件类型：jpg 、png和svg。
JPG最适合用于风景，风景或人物等照片。对于内容中的图像，例如博客文章图像，我们的目标是20-70kb。较大的背景照片可以达到500kb，但200kb是一个很好的平均值。
JPG是有损的（每次导出时它们会重新压缩并降低图像质量），并且它们不能很好地管理渐变。如果图像中有渐变，有时可以将图像分成两个切割，以便您可以使用CSS渐变在单独的背景中渲染渐变。
PNG最适用于徽标和图标等资产，因为它们支持透明度，因为徽标和图标通常使用更有限的调色板，因为PNG通过减少颜色数量来实现压缩。PNG可能是有损耗的，但我们通常使用是无损，这意味着每个像素都可以精确保存而不会降低调色板的质量，从而获得更高质量的图像。
SVG具有最好的质量，并且由于其可扩展性而被用于矢量艺术。我们经常将它们与徽标一起使用，但是，SVG确实为浏览器创建了更多的工作，并且可以在页面加载时产生迟缓，因此图像的质量应始终与其复杂性相平衡。
作为我们使用PNG和SVG的示例，请比较Silver Screen Insider和Bozeman网站的徽标。对于前者，我们使用了SVG。对于博兹曼网站，由于用户向下滚动时CSS动画引入了复杂性，我们选择使用PNG，以免影响浏览器性能。
有时最好的解决方案是两者的结合：对于JTech网站上的标识，“JT”组件是PNG，但“庆祝20年”图像是SVG，以便在所有视口大小中保持其质量。
优化技术
为了获得最佳结果，优化图像非常重要。为此这些软件设计功能打破了我们的大脑和业务，我们使用三个程序：ImageOptim（用于JPG和PNG），ImageAlpha（用于PNG）和Scour（用于SVG）。
优化JPG
ImageOptim减少了JPG和PNG的文件大小。对于大图像，例如我们用于背景面板的图像，我们将尺寸设置为16001200px。对于内容照片，例如插入博客文章中的图像，我们将尺寸限制在200-800像素宽之间。
调整到最终分辨率后，将使用最佳质量在Photoshop中输出图像。每次我们压缩图像都会失去一些保真度，所以我们更喜欢单独使用ImageOptim进行压缩，而不是让Photoshop进行传递。 Photoshop的效率显着降低：质量为65的“网络保存”会产生相同文件大小的图像，但保真度比ImageOptim的质量差85。
Retina JPGs
当针对视网膜或其他高密度显示器时，我们发现最好以两倍的分辨率保存单个JPG，但使用更高的压缩，在ImageOptim中约50-60，这可以产生看起来很好的高质量图像在视网膜和标准，低密度显示器上。这在之前的分享现代国外响应式设计的卓越典范也可以看出，这种技术允许我们将单个资产用于视网膜和标准显示，而不是切割和加载多个版本，而不会使图像的大小翻两番。
优化PNG
对于PNG，我们使用PNG24在“save for web”选项中输出Photoshop，然后通过ImageOptim运行。如果它检测到图像使用少于256种颜色，ImageOptim将无损地将图像转换为PNG8，这是一种更简单的文件格式，可以生成非常轻量级的文件。
使用ImageOptim，我们的图像最终输出没有太多的复杂性（最小的颜色，简单的形状和低于200200px的分辨率），其大小范围可以从15kb到1kb以下。
优化更大的PNG
对于更复杂的图像，如果我们无法使用ImageOptim生成介于15kb和50kb之间的文件，我们使用ImageAlpha。 ImageAlpha用于处理从PNG 24（数百万种颜色）到PNG8（最多256种颜色）的PNG，将图像从无损变为有损，最终瞄准具有最少颜色数量的PNG。
这种格式的损耗主要意味着对调色板进行战略性改进，消除最不显着的颜色，从而产生仍然看起来很棒的图像，同时降低其复杂性。从ImageAlpha导出后，我们通过ImageOptim运行它，以便进一步优化。
优化SVG
在SVG中，我们在从Illustrator导出图像之前尽可能减少复杂性。由于它们的大小，这是一个经常繁琐的过程，我们首先尝试将层数减少到最小，同时仍然准确地显示艺术品。然后将其保存为Illustrator中的SVG，并使用名为Scour的程序进行优化。
我们使用此automator脚本使其在macOS中更容易使用，允许您在Finder中右键单击SVG文件并通过“服务”菜单优化SVG。我们经常将字体文件用于单色矢量图形，并使用名为Glyphs的程序。
结论
正确优化图像只是我们改善网站性能，防止浏览器膨胀，减少服务器和带宽资源使用，加快页面加载时间，保持开发基础架构清洁并为最终用户提供更理想体验的另一种方式。
我们希望通过JPG，PNG和SVG文件类型，图像压缩和质量工具来探索我们的经验，因为我们不断完善自己的流程以生产高质量的网站。
浏览次数： 1331 次
文章评论：