如何优化网站图像,提示减小图像文件大小，以提高网站的性能和速度
现在网站已经成为令人难以置信的臃肿，以网页的平均规模现在超过2MB大小！这是一个网站，只有5年前，比大的网站约有150次是20年前的平均页面只有14.1k当规模扩大一倍！是什么原因造成这个戏剧性的增加？有许多因素，包括脚本，CSS文件，字体，广告和社交部件，但是＃1贡献者重网页是图像。
图片占了近62％的页面的整体规模。目前的设计趋势有利于巨大，屏幕图像跨越帮助推动这一情况，因为这是在物理尺寸大的图像文件的大小一般大的为好。当图像的网站上使用，无需为Web交付第一个被优化这个问题更加复杂。
如果你想你的网站是用户友好的，并且运作良好的所有设备上的所有游客，那么该网站必须快速加载。由于图像可能占有超过您网页的大小的一半，最好的地方开始优化获得更高的性能网站通过与网站的图片开始的。
使用正确的尺寸
首先要牢记，当谈到对网站的图像优化是确保您使用的是正确的大小为您添加到该网站的任何图像。直接从数码相机拍摄的照片或从股票图像站点下载它没有调整的形象因此是过大的图像的常见原因。
此方案是一个经常发生一旦公司接替谁创造了它的网络团队网站。
在使用他们的CMS增加新的内容/网页到网站，他们通常包括不适当大小的图像。该网站的CSS可能会限制这些图像的显示大小，以便该网站的布局不破，但图像本身比它需要大得多。例如，如果一个图像将在网站上显示的最大大小是1000个像素宽，则图像本身不应尺寸比大。
如果您高品质的数码相机拍摄的你，而不是我们一个4000像素宽的形象，那么即使该网站挤压图像的显示时，它仍然会下载一个4000像素宽的图像，这将完全摧毁该网站的表现。
添加任何图片到网站之前，请确保您了解这些图像的最佳大小（这应该是如何管理自己的网站你训练的一部分），并确保根据需要调整您的文件。您可以使用Adobe Photoshop等工具为这个，或者，如果你没有该软件的许可证，就像一个免费的在线替代Pixlr等也将这样的伎俩。
使用正确的图像格式
此外，右图像的大小，你也应该确保使用正确的图像格式。由于不同的图像格式在不同情况下的理想，使用正确的格式，可以帮助保持文件大小可控。举例来说，如果你的形象是一本图文并茂的元素，就像一个标志或图标，使用SVG文件可显著减少图像的文件大小，而在如何大，图像显示方面还允许完全的灵活性。这是因为，SVG文件是矢量图形，所以它们是可以调整大小没有任何质量损失较大的小尺寸的图像。说到图像质量…
考虑图像质量
您保存在问题的图像很大，当涉及到图像的文件大小的质量。有一种诱惑，保存最高质量的可能，这样在网页上使用时，它们看起来非常伟大的所有图像，但这种行动会离开你笨拙的大尺寸的影像。相反，你需要找到良好的品质和合理的文件大小之间取得平衡。
您为您的图像进行比较质量设置的方式将取决于您所使用的软件。在我自己的工作，我用Adobe Photoshop和它的“另存为网页”功能。这让我比较我有不同的设置图像找到完美的balance.Often，你会发现，与“5”画质设定的图像看起来就像当你设置质量为“10”一样好，但减少文件大小是巨大的！保存图像作为“10”就没有实际的好处到你的网站或它的外观，而是将其保存为“5”绝对可以帮助该网站加载更快！
选择图像质量时我考虑的一件事是怎样的形象本身将在网站上使用。如果这是一个背景或更小的挑逗式的形象，我会经常与低质量的设置去拯救尽可能多的大小，我可以。如果图像是一个大英雄出手就是在主页功能，不过，我可能会选择稍高的设置，因为图像是页面的焦点，我想这种形象，真正使产生影响。
进一步优化图片
找到一个最佳的质量设置是很重要的，但一旦你发现那些设置并保存图像，仍有进一步优化，你可以通过无损压缩所有文件做的。
图像具有包含在其文件的元数据。此数据不影响图像本身的显示，所以包括它在文件中没有用处为您的网站。您可以删除这个数据（而不是改变图像质量），通过使用类似的工具ImageOptim（适用于Mac）或FileOptimizer（适用于Windows）。通过这些工具运行您的图片，你可以刮掉一些显著的文件大小。较大的图像将仅略微降低（10％左右），但较小的图片可看到戏剧文件减少。当我跑这一个网站上最近，我看到了一些图片只是无损压缩其图像降低到原来的大小和该网站的主页独显1/3的规模削减12％。
考虑响应图像技术
确保你在你的网站上使用的图像优化是很重要的，但仍存在挑战，尤其是当你考虑网站的响应。尽管这些网站上的图像可以调整为不同的屏幕尺寸，最大的尺寸是常常需要什么，以确保图像的质量保持了最大的屏幕。这意味着，在小屏幕装置将下载比实际需要的大得多的图像，同时在此过程中打了一个性能。这一挑战是一个正在会见了新的回应图像技术。
有些是网络专业人员现在使用的响应网站技术包括新的HTML元素和属性类似的<图片>元素，或在“srcset”和“大小”属性。这些都让您在图像更多的控制和尺寸被交付到屏幕。
为更好的响应图像其他可能的解决方案是基于JavaScript的，像自适应图像解决方案，由马特·威尔科克斯创建。该解决方案有一定的要求（了Apache，PHP，JavaScript）的，但它绝对是你可以考虑添加到您的方法来优化网站来传递图像的工具箱。
在测试注意事项
一旦你有你的图像优化，并上传到你的网站，一定要测试网站的性能。您可能会发现性能提升，让你让你的网站更快其他的机会！