苏州网站建设:先进创意Web开发中的图像优化

在提供良好的图像质量的同时，在使用最小可能的文件大小之间总是使用最小可能的文件大小之间的平衡动作。将照片直接从你的DSLR中嵌入可能看起来不错，但这会使你的网站的加载速度减慢到爬行，而过度压缩的图像可能会提高你的网站的速度，同时使设计和整体美学失去信誉。

对于我们主要处理的两种图像资产-照片和图标/插图-我们执行图像质量检查和压缩技术的混合操作，这些技术在大多数情况下都能很好地工作。

文件类型和何时使用它们

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

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

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

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

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

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

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

有时最好的解决方案是：对于JTech南沅网站建设的网站上的徽标，“JT”组件是PNG，但“庆祝20年”是SVG，以便在所有视口大小中保留其质量。

Optimization Techniques

为了获得最佳效果，必须优化您的图像。为此，我们利用三个程序：ImageOptim（用于JPGS和PNGS）、ImageAlpha（针对PNGS）和冲刷（用于SVGS）。

优化JPGS

ImageOptim减少了JPGS和PNG的文件大小。对于大型图像，比如我们用于背景面板的图像，我们将尺寸限制在1600x1200px。对于在博客文章中插入的南沅网站建设:先进Web开发中的图像优化之类的内容照片，我们将尺寸限制在200到800 px之间。

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

视网膜JPGS

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

优化PNG

对于PNGS，我们使用其“为Web保存”选项中的PNG24从P南沅网站建设hotoshop中输出，然后通过ImageOptim运行它。如果它检测到图像使用的颜色少于256色，ImageOptim将无损地将图像转换为PNG8，更简单的文件格式可以产生非常轻的文件。

使用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的程序进行优化。

我们使用这个Automator脚本使其在MacOS中更容易使用，允许您右键单击Finder中的SVG文件，并通过“服务”菜单优化SVG。我们经常使用字体文件的矢量图形，是单色的程序，称为符号.

Conclusion

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

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