5个简单快捷的技巧在不影响你的带宽和网站速度的情况下优化图像

一定要使用Photoshop的"Save for Web & Devices"选项

到目前为止,Adobe Photoshop是最受欢迎的位图图像编辑器,大多数网页设计师和网站所有者都使用它。在许多其他功能中,Photoshop提供了一个高效的图像优化器, 用于图像的在线使用。

尽管我认识的大多数网民都在使用Photoshop,但我总是惊讶地发现很少有人真正使用“Save for Web”功能。 这个非常方便的工具允许您保存任何图像的网络优化副本, 确保一个足够的质量, 同时大幅度减少图像的大小。

为了优化你的图片, 使用Adobe Photoshop工具,只需打开你的图片,然后导航到文件保存网页和设备。选择想要的图像格式,保存你的图像。简单而有效的方法,使您的网站加载更快和节省带宽。

通过防止hotlink来节省带宽

热链接（hotlink）是在不是你自己的网站上非法使用和显示一张图片的做法。最大的问题是, 当他们的网站上显示你的图片时, 他们正在使用你的带宽。 因此, 你为他们的网站支付带宽。

不用说, 为了节省带宽和降低相关成本, 应该禁用热链。 他们有几种方法可以做到。

使用 Apache

在 Apache 服务器上, 您可以使用下面的代码来禁用热链接, 并用你选择的图片替换热链接图像。 在使用之前, 请确保在第3行更新域名和在第7行的 URL。

使用 Nginx

在 Nginx 服务器上, 可以通过使用 config 文件下面的代码轻松地禁用热链接。 在开始之前, 请确保在第2行更新域名。

实现图像的本地缓存

与文本不同的是, 图片一旦显示在你的网站上, 就很少被更新。 出于这个原因, 你的浏览器每次访问你的网站时都下载相同的图片是完全没有必要的。

需要做的只是告诉浏览器它不需要每次访问你的站点时重新下载图片, 而是使用本地缓存副本。 要做到这一点, 我们需要在你的网站中添加下面的代码片段。在Htaccess 文件:

上面的代码告诉浏览器, 如果一个文件是上述类型(CSS, JPG, JPEG, PNG, GIF, JS 或者 ICO) , 它应该缓存一个月(2592000秒)。

实现这种被称为杠杆浏览器缓存的解决方案可以让你的网站更快的加载, 并且减少你的网站所使用的带宽。

使用WordPress？安装WP Smush插件

如果你使用 WordPress, 我肯定会推荐使用 WP Smush 插件。 这个非常方便的插件优化了通过 WordPress 媒体上传器上传的每一张图片, 让你可以在不影响图片质量的情况下显示更轻的图片。

也允许你批量处理你之前上传过的图片, 这是一个很棒的节省带宽的方法, 让你的网站更快, 而不需要花费数小时手动更换网站上的每一张图片。

不要使用图片来做你可以用CSS实现的东西

曾经有一段时间, 使用图像资产来处理诸如背景图像、按钮或者容器之类的东西是很常见的。 这是有道理的, 因为CSS技术在当时并不像现在这样复杂和强大。不幸的是, 许多人仍然依赖图片资源来处理那些可以通过CSS来轻松实现的东西, 比如渐变。所以建议大家尽可能地使用css，减少图片的使用。