高级网站设计中的图像优化撰写 - 北京传诚信

高级网站设计中的图像优化撰写

网站质量图像始终是在使用尽可能小的文件大小同时提供良好图像质量之间的平衡行为。直接从您的数码单反相机上嵌入照片可能看起来不错，但它会减慢您的网站负载的速度，而过度压缩的图像可能会提高您网站的速度，但会损害设计和整体审美。

文件类型以及何时使用它们

我们在网站设计时使用三种图像文件类型：.jpg .png和.svg。

JPG最适合用于风景，风景或人物等照片。对于内容中的图像，例如博客文章图像，我们的目标是20-70kb。较大的背景照片可以达到500kb，但200kb是一个很好的平均值。

JPG是有损的（它们在每次导出时重新压缩并降低图像质量），并且它们不能很好地管理渐变。如果图像中有渐变，有时可以将图像分成两个切割，以便您可以使用CSS渐变在单独的背景中渲染渐变。

PNG最适用于徽标和图标等资源，因为它们支持透明度，因为徽标和图标通常使用更有限的调色板 - 因为PNG通过减少颜色数量来实现压缩。

PNG可能是有损耗的，但我们通常使用无损，这意味着每个像素都可以精确保存而不会降低调色板的质量，从而获得更高质量的图像。

SVG具有最好的质量，并且由于其可扩展性而被用于矢量艺术。我们经常将它们与徽标一起使用，但是，SVG确实为浏览器创建了更多的工作，并且在页面加载时会产生迟缓，因此图像的质量应始终与其复杂性相平衡。

优化技术

优化JPG

我们用于背景面板的图像，我们将尺寸设置为1600x1200px。对于内容照片，例如插入博客文章中的图像，我们将尺寸限制在200-800px宽之间。

调整到最终分辨率后，将使用最佳质量在Photoshop中输出图像。每次我们压缩图像都会失去一些保真度，所以我们更喜欢单独使用ImageOptim进行压缩，而不是让Photoshop进行传递。Photoshop的效率显着降低：它在质量65下的“网络保存”产生的图像文件大小相同但保真度比ImageOptim的质量差85。

优化更大的PNG

对于更复杂的图像，如果我们使用ImageOptim无法生成15kb到50kb之间的文件，我们使用ImageAlpha。ImageAlpha用于处理从PNG 24（数百万种颜色）到PNG 8（最多256种颜色）的PNG，将图像从无损变为有损，最终瞄准具有最少数量颜色的PNG。

这种格式的损耗主要意味着对调色板进行战略性改进，消除最不显着的颜色，以产生仍然看起来很棒的图像，同时降低其复杂性。

优化SVG

我们使用这个automator脚本使其在macOS中更容易使用，允许您在Finder中右键单击SVG文件并通过Services菜单优化SVG。我们经常将字体文件用于单色矢量图形，并使用名为Glyphs的程序。

正确优化图像只是我们改善网站性能，防止浏览器膨胀，减少服务器和带宽资源使用，加快页面加载时间，保持开发基础架构清洁并为最终用户提供更理想体验的另一种方式。

我们希望通过JPG，PNG和SVG文件类型，图像压缩和质量工具来探索我们的经验，因为我们不断完善自己的流程以完善网站设计。