网络质量的图像总是在使用尽可能小的文件大小同时提供良好的图像质量之间的平衡。直接从DSLR上嵌入一张照片看起来不错，但它会减缓网站的爬行速度，而过度压缩的图像可能会提高网站的速度，同时也会使您的设计和整体美学蒙羞。

巴音郭楞专业建站对于我们主要处理的两类图像资产--照片和图标/插图--我们执行图像质量检查和图像质量检查的混合操作。压缩技术在大多数情况下，这种方法效果很好。

文件类型和何时使用它们

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

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

JPGS是有损的(每次导出时它们都会重新压缩和降低图像质量)，而且它们不能很好地管理梯度。如果图像中有梯度，有时可以将图像分割成两个切分，这样就可以使用CSS梯度在单独的背景中呈现渐变。

PNGs对于像徽标和图标这样的资产来说是最好的，因为它们支持透明性，而且徽标和图标通常使用一个更有限的调色板--因为PNG通过减少颜色来实现压缩。

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

SVGS有最好的质量，并被用于矢量艺术，因为他们的可伸缩性。我们经常将它们与徽标一起使用，但是，SVGS确实会为浏览器创建更多的呈现工作，并且在页面加载时会造成延迟，因此图像的质量应该始终与其复杂性保持平衡。

作为我们使用png和svg时的一个例子，比较一下银幕内部和Bozeman网站。对于前者，我们使用了SVG。对于Bozeman网站，由于CSS动画在用户滚动时引入的复杂性，我们选择使用PNG以避免影响浏览器性能。

有时，最好的解决方案是两者的结合：对于JTech网站上的徽标，“JT”组件是PNG，而“庆祝20周年”是SVG，以便在所有视口大小中保持其质量。

优化技术

为了得到最好的结果，优化你的图像是很重要的。为此，我们利用三个程序：ImageOptim(针对初级专业人员和初级专业人员)，ImageAlpha(适用于PNG)和冲刷(特别志愿人员)。

优化JPGS

ImageOptim减少了JPGS和PNG的文件大小。对于大型图像，比如我们用于背景面板的图像，我们将尺寸限制在1600x1200px。对于在博客文章中插入的图片之类的内容照片，我们将尺寸限制在200到800 px之间。

在调整到其最终分辨率后，图像将使用现有的最佳质量在Photoshop中输出。每次压缩图像时，它都会失去一定的保真度，因此我们更愿意完全依靠ImageOptim来进行压缩，而不是让Photoshop进行一次传递。Photoshop的效率明显较低：它的“网页保存”质量为65，它产生的图像文件大小相等，但保真度比ImageOptim的质量85差。

视网膜JPGS

当我们瞄准视网膜或其他高密度显示器时，我们发现最好是以两倍的分辨率保存一个JPG，但是在ImageOptim中使用更高的压缩，大约50-60，这可以产生一个高质量的图像，在视网膜和标准的低密度显示器上看起来都很好。这项技术允许我们使用视网膜和标准显示器的单一资产，而不是切割和加载多个版本，而不翻两番我们的图像。

优化PNG

对于PNG，我们巴音郭楞专业建站使用PNG 24在其“为web保存”选项中从Photoshop输出，然后通过ImageOptim运行它。如果检测到图像使用的颜色少于256种，ImageOptim将无损地将图像转换为PNG 8，这是一种更简单的文件格式，可以生成非常轻的文件。

使用ImageOptim，我们最终输出的图像没有太多的复杂性(最小的颜色、简单的形状和分辨率小于200 x 200 px)，大小可以从15 kb到1kb以下。

优化大型PNG

对于更复杂的图像，如果我们不能用ImageOptim生成一个介于15 kb到50 kb之间的文件，我们就使用ImageAlpha。ImageAlpha用于处理PNG 24(百万种颜色)到PNG 8(最大256种颜色)的PNGs，将图像从无损变为有损，最终目标是颜色数量最少的PNG 8。

这种格式的丢失主要意味着对调色板的战略性细化，消除了最不引人注目的颜色，以产生一个仍然看起来很好的图像，同时降低了它的复杂性。

从ImageAlpha导出之后，我们通过ImageOptim运行它，以便进一步优化它。

优化SVGS

当涉及到SVG时，在从IlluStrator导出图像之前，我们尽可能地降低复杂性。这是一个通常繁琐的过程，因为它们的大小，我们首先尝试将图层的数量减少到最小，同时仍然准确地显示艺术品。然后将其保存为IlluStrator中的SVG，并使用一个名为scour的程序进行优化。

我们用这个自动脚本为了使它在MacOS中更容易使用，允许您右键单击Finder中的SVG文件，并通过“服务”菜单优化SVG。我们经常使用字体文件来处理单一颜色的矢量图形，这个程序名为字形.

结语

正确地优化图像只是我们提高网站性能、防止浏览器膨胀、减少服务器和带宽资源使用、加快页面加载时间、保持开发基础设施清洁和为最终用户提供更好体验的另一种方法。

我们巴音郭楞专业建站希望这次探索我们的经验与JPG，PNG和SVG文件类型，图像压缩和质量工具，为您提供一个资源，因为我们不断完善我们自己的过程，以生产高质量的网站。