在使用尽可能小的文件来提供高质量图像的同时，Web质量图像总是保持一种平衡。数码单反相机中直接嵌入图片看起来可能很好，但是这会降低网站的负荷，而图片压缩过大可能会提高网站的速度，但是会损害网站的设计和整体美观。
主要涉及到两类图像资源：照片和图标/插图。通过对图像质量的检测，并结合压缩技术，我们可以很好地完成大部分的工作。
什么时候使用这些文件类型。
构建网站时，我们使用了三种图像文件类型：jpg、png和svg。
JPG最适合拍摄风景、景物、人物等照片。对一张图片来说，比如一篇博文，目标是20-70kb。更大的背景图片可以达到500kb，但是200kb是个不错的平均值。
JPG是有缺陷的(每次输出时都会重新压缩，降低图像质量)，它们无法很好地管理渐变。有时候，如果图片中有渐变，你可以把它分成两部分，这样你就可以用CSS渐变在一个单独的背景中渲染渐变。
最适合于像徽标和图标这样的资产，因为它们支持透明性，因为PNG通过减少颜色数量来实现压缩，因此通常使用较有限的调色板。虽然PNG可能是有损耗的，但是我们通常使用的是无损耗，这意味着每一个像素都能精确地保持图像的质量，从而得到更高质量的图像。
由于SVG的可扩展性，SVG被用来进行矢量美术设计。虽然SVG经常和logo一起使用，但它的确为浏览器带来了更多的工作，而且在加载页面时也会出现延迟，所以图像的质量应该始终和它的复杂性保持平衡。
以PNG和SVG为例，比较一下SilverScreenInsider和Bozeman网站的标志。我们用SVG来处理前者。在Bozman网站上，由于用户滚动时引入CSS动画的复杂性，为了不影响浏览器性能，我们选择使用PNG。
有时候，最佳的解决方法是将二者结合起来：对于JTech网站的标识，“JT”组件是PNG，而“欢庆20年”的图像是SVG，以保证其在所有视图入口大小中的质量。
对于视网膜或其他高密度显示器，我们发现单个JPG最好保留在两倍分辨率，但是使用更高的压缩，ImageOptim压缩大约为50-60，这样可以在视网膜和标准低密度显示器上生成看上去不错的高质量图像。郑州网站开发公司从以前分享现代国外响应式设计的优秀模式中也
可以看出，这项技术允许我们在视网膜和标准显示器上使用单个资产，而不是切割和加载多个版本，而不会使图像的尺寸增加四倍。
至于PNG，我们使用PNG24来将Photoshop输出到“saveforweb”选项，然后通过ImageOptim运行。当检测到图像使用的颜色少于256种时，ImageOptim会将图像无损地转换成PNG8格式，这种更简单的文件格式能够产生非常轻量的文件。
有了ImageOptim，我们的图像最终输出并不复杂(颜色很少，形状简单，分辨率在200200px以下)，而且它的大小可以在15kb到1kb之间。
最优大PNG。
如果我们不能使用ImageOptim生成15kb到50kb之间的文件，则使用ImageAlpha来处理更复杂的图像。用ImageAlpha处理从PNG24(百万种颜色)到PNG8(256种颜色)的PNG，使图像从无损伤变成有损伤，最后用最少的颜色来定位。
这一格式的损失主要意味着在战略上改善调色板，去除最不明显的颜色，从而在降低图像复杂性的同时，生成看上去依然不错的图像。导出ImageAlpha之后，我们将通过ImageOptim运行它以进行进一步优化。
优化SVG
对于SVG，我们在从Illustrator导出图片之前尽量减少了复杂性。郑州网站开发因为他们的尺寸，这个过程常常很麻烦，我们首先尝试把层数减到最小，同时仍然能精确地显示作品。之后在Illustrator中将其保存为SVG，并使用称为Scour的程序对其进行优化。
在macOS中，我们使用这个automator脚本使它更易于使用，允许您在Finder中右击SVG文件，并通过Service菜单优化SVG。字体文件通常用在单一颜色的矢量图形和称为Glyphs的程序中。
总结。
对图像进行适当的优化只是提高网站性能、防止浏览器膨胀、减少服务器和带宽资源使用、加快页面加载时间、保持开发基础干净、为终端用户提供更理想的体验的另一个方法。
随着JPG、PNG和SVG文件类型、图像压缩和质量工具的不断完善，我们希望探索我们的经验，从而制作出高质量的网站。
