河小马 
每个网站都应该使用图片。从屏幕截图到产品图片，原始照片等等，视觉元素真正提高了用户体验，并为您的网站增加了专业性。
不幸的是，图片可能会降低网站的速度和性能。
如果您的加载时间太慢以至于没有人能够看到它们，那么在您的网站上拥有高质量的图片就是没有意义的。这就是为什么我们创建了这个指南。我们将解释如何在不牺牲速度、性能或用户体验的情况下添加图片到您的网站。
什么是网站图片？
网站图片相当直观。任何网站上的可视化图形都可以定义为网站图片。
这包括照片、动画、标志、图形、图表、屏幕截图等等。即使是像gif一样的位图图像也属于网站图片的范畴。
无论您使用的是哪种类型的cms，都有一种方法可以向您的网站添加图片。但是为了高性能而优化这些图片是一个完全不同的过程。
5个改进网站图片的工具
我们管理的网站每个月都会添加数百，甚至数千张图片。在这个类别中有如此丰富的经验，我们已经将我们的前五个最喜欢的工具缩小到了一起，以帮助改进您的网站图片。
#1-optimole
optimole是一个全能的wordpress和其他平台的图像优化工具。这是一个让任何人实时处理图像文件的简单方法。由于optimole完全基于云，它不会耗尽您的服务器资源并减慢速度。
到目前为止，已有超过16亿个图像使用这个工具进行转换，使其成为当今市场上最受欢迎的网站图片解决方案之一。在其核心，optimole是一个图像优化器和图像cdn，但这只是这个工具所能做的东西的一小部分。
注册和开始使用这个工具非常简单。无论您的访问者使用何种屏幕尺寸或设备，该工具都能很好地工作。
optimole的其他功能、优势和值得注意的亮点包括延迟加载、图像调整大小、滤镜、优化统计数据等等。即使您的网站访问者连接弱，该软件也可以正常工作。
在这种情况下，optimole会自动降低图像的质量。使用此工具可以向您的图像添加水印，更改亮度、对比度或饱和度。optimole对每月访问量低于5000次的用户是免费的。超过这个数量的，计划从每月19.08美元开始。
#2-adobe photoshop
adobe photoshop是照片、图像和设计编辑软件领域的领导者。这个工具非常受欢迎，以至于“photoshop”一词基本上已经成为一个动词，在任何给定的句子中都可以代替“编辑”或“裁剪”。
这个工具是为摄影师、设计师和创意专业人士设计的。如果您想利用一种能够完全控制图像编辑的软件，那么photoshop是无与伦比的。
更改图像的背景，选择个性化的预设滤镜，并使用协作编辑功能与您的团队合作。photoshop的可能性几乎是无限的。
在编辑工具之外，photoshop仍然非常适合优化网站图片。当您完成编辑时，您将能够将图片保存为web格式。当保存图片时，photoshop还可以创建优化版本的图片。您甚至可以选择图像质量。
总的来说，adobe photoshop是创意专业人士工具包中必不可少的资源。但如果您只是运营个人博客并且不进行大量的图片编辑，那么这个软件可能对您的需求来说过于复杂。
#3 — tinypng
tinypng可能是市场上最简单的网站图片工具。这个基于web的平台非常易于使用，您不需要任何设计技巧或技术背景来使用。只需访问该网站，拖放您想要压缩的图片，tinypng将处理剩下的事情。
几秒钟之内，您将获得一个压缩了50-80%的文件，这将在您的网站上节省大量空间。您可以使用这个软件同时压缩20个以上的文件，因此非常适合批量压缩。
我们之所以喜欢tinypng，还有一个原因是，与其他图片编辑器相比，您几乎看不到质量的差异。即使文件大小更小，肉眼看上去的图像质量几乎没有变化。
对于需要顶级质量的图形设计师或图像，您可能会注意到一些微小的变化。但对于屏幕截图、照片和日常图像，这种差异是无法察觉的。
tinypng已经压缩了超过十亿个png和jpeg图像。它受到全球数千家公司的信任，包括三星、索尼、乐高、美国银行和赫兹等知名品牌。
这是一个我们经常使用的免费工具。专业版的价格从每年25美元起。
#4 — skitch
我们每天都使用 skitch。作为博客作者，这个工具随时打开在我们的电脑上。我们最喜欢skitch的部分是标记图像的功能。市场上有很多具有这个功能的图像编辑工具，但skitch非常易于使用。
此外，默认的粉红色标记非常醒目，非常适合突出显示图像的某些部分。它非常适合撰写教程或指南的人使用。skitch的箭头和方框可以通过视觉线索引导读者完成一个过程。
您可以使用skitch截屏、调整图像大小、注释图像、突出显示图像，甚至对照片的某些部分进行像素化处理。
通常我们使用skitch来更改图像的尺寸并做标记。然后我们将其通过图片压缩器发布到网络上。所以如果您想压缩图像，您将需要进行额外的步骤。
值得一提的是，skitch只兼容mac、ipad和iphone。我们从未使用过移动应用程序，但桌面版本在mac上运行良好。如果您使用windows或linux，skitch不适合您。最重要的是，skitch可以免费下载和使用100%。
#5 — smush pro
smush pro是当今市场上最强大的wordpress插件之一。它已经被下载超过250万次，目前拥有130+万的活跃安装量。更令人印象深刻的是，这个工具自问世以来已经优化了586.9+亿张图片。
该插件允许您通过“超级压缩”将压缩效果提高一倍，以获得更多节省。原始图像会备份，并且您可以通过单击一次来优化无限量的网站图像。原始图像和优化图像之间几乎没有区别，所以您不必担心您网站访问者的体验。
您还将从smush pro cdn中受益，图像从全球45个位置提供服务。这确保了您的图像将快速加载，无论访问者从哪里浏览。软件会根据google的建议自动调整图像的大小和比例。
smush pro允许您配置延迟加载，并自动将png文件转换为jpeg。计划从每月3美元起。如果您还在犹豫，可以免费试用smush pro，试用期为7天。
网站图像的基础知识
让我们花点时间来分析网站图像的核心组成部分。这将让您更好地了解您在此类别中需要了解的内容。
图像优化
首先，图像优化是任何网站图像中最重要的部分。图像优化实质上是以最小的尺寸传递图像而不影响质量。
虽然这听起来很复杂，但实际上非常简单。如今市场上有数十种工具可以自动压缩图像而不会明显降低质量。一些最好的图像优化工具可以将图像压缩高达80%。
优化的图像可以带来更快的页面加载时间，更好的seo排名，减少带宽，并且最终需要更少的网站存储空间。
文件格式
存在许多不同的文件格式。但对于网站而言，您只需要关注png，jpeg和gif。png适用于简单图像，jpeg适用于照片或颜色密集的图像，而gif适用于动画。
png是一种无损格式，具有更高的质量。jpeg是经过压缩的，这会导致尺寸略微减小。总体而言，gif将是这三种格式中最大的。
我们通常使用png图像，并确保在将其发布到网络上之前通过压缩或优化工具运行它们。
尺寸
图像尺寸在质量和大小方面非常重要。手动更改尺寸可能会扭曲图像，这显然是您要避免的。因此，如果您更改图像的高度，您需要确保宽度按比例变化。
通过减小图像的尺寸，可以大大减小文件大小。对于使用智能手机或数码相机拍摄的图像尤其如此，因为这些图像通常具有比其他图像类型更高的分辨率。
编辑
并非每个图像都以其原始形式发布。除了压缩或更改尺寸外，您可能还想编辑图像。
我们指的是像裁剪、标记或甚至更改亮度、对比度或饱和度等事物。有些人可能想要进一步编辑背景，插入不在图像中的组件，或者使其看起来像大象在飞行。根据您的编辑需求，市场上有不同的工具可以为您完成工作。
在最终压缩之前最好编辑图片。这样，您的新编辑不会增加文件大小。编辑内容也会被压缩。
网站图片的3个技巧
以下是我们喜欢的一些网站图片的技巧和快速技巧。这些策略很容易实施，您可以立即开始使用。
技巧1：使用可靠的托管提供商
优化网站图片的整个目的是减少加载时间，改善您网站的用户体验。但是，如果您使用低质量的托管解决方案，所有这些都不会起作用。
优化图片只能发生有限的改变。其余的取决于您的网站所托管的服务器。
查看我们的“最佳网络托管提供商”列表。如果您目前没有使用本指南中提到的解决方案之一，那么现在可能是时候切换了。特别是如果即使在优化图片之后，您的网站仍然运行缓慢。
您还应确保您选择了适合您需求的正确网络托管计划。有时候，增加存储空间和带宽可以产生巨大的差异。如果您目前使用的是共享服务器，并且遇到大量流量问题，那么现在可能是时候升级到vps或独立服务器了。
技巧2：使用延迟加载
延迟加载是提高网站速度的绝佳策略。这是适用于单个页面上有大量图片的网站的完美策略。
使用延迟加载，页面上的所有图片不会同时呈现。相反，只有当用户开始滚动时，图片才会在视野中加载。有几个工具具有延迟加载功能，包括本指南中提到的一些工具。或者，您还可以安装独立的延迟加载插件。
技巧3：不要在网站上使用过多的图片
图片是很好的。我们现在生活在一个访问者期望在网站上看到图片和其他视觉元素的时代。即使您只是编写长篇博客，图片也是打破内容和改善用户体验的完美方式。
话虽如此，过多的图片是存在的。过多的图片不仅会使页面混乱，破坏用户体验，还会减慢加载时间。
我们通常不建议在任何给定时间内查看超过一张图片。根据您运行的网站类型，最多允许两到三张图片。但超过这个数量，会造成过多的混乱，对网站有害无益。
