在其他媒体中，图像本身代表加载网页时下载的每种内容类型的平均字节的60％以上。以下是使用图像时使用的5个简单但非常有效的提示，以确保节省带宽和快速加载网站。
始终使用Photoshop的“Save for Web＆Devices”选项
Adobe Photoshop是目前最流行的光栅图形编辑器，被大多数网页设计师和网站所有者使用。在众多其他功能中，Photoshop为在线使用的图像提供了高效的图像优化器。
虽然我认识的大多数网络用户都在使用Photoshop，但我总是震惊地发现实际上很少有人使用Save for Web功能。这个非常方便的工具允许您保存任何图像的Web优化副本，确保足够的质量，同时大幅减少图像的大小。
要优化图像以便在线使用Adobe Photoshop，只需打开图像并导航到文件 →存储为Web和设备。选择所需的图像格式并保存图像。简单而有效的方式，使您的网站加载速度更快，节省带宽。
通过阻止热链接来节省带宽
Hotlinking是在您自己的网站上非法使用和显示图像的做法，托管在另一个网站上。最大的问题是，当网站在他们的网站上显示您的图像时，他们正在使用您的带宽。因此，您正在为其网站支付带宽。
不言而喻，应该禁用热链接，以便节省带宽并降低相关成本。他们有几种方法可以做到这一点。
使用Apache
在Apache服务器上，您可以使用以下代码禁用热链接，并用您选择的图像替换热链接图像。确保在使用之前更新第3行的域和第7行的URL。
RewriteEngine on
RewriteCond％{HTTP_REFERER}！^ $
RewriteCond％{HTTP_REFERER}！^ http（s）？：//（www /。）？yoursite.com [NC]
RewriteCond％{HTTP_REFERER}！^ http（s）？：//（www /。）？google.com [NC]
RewriteCond％{HTTP_REFERER}！^ http（s）？：//（www /。）？bing.com [NC]
RewriteCond％{HTTP_REFERER}！^ http（s）？：//（www /。）？yahoo.com [NC]
RewriteRule /。（jpg | jpeg | png | gif | svg）$ http://yoursite.com/hotlink.jpg [NC，R，L]
使用Nginx
在Nginx服务器上，可以使用配置文件中的以下代码轻松禁用热链接。在继续之前，请确保在第2行更新域名。
location ~ .(gif|png|jpeg|jpg|svg)$ {
valid_referers none blocked ~.google. ~.bing. ~.yahoo yoursite.com *.yoursite.com;
if ($invalid_referer) {
return 403;
}
}
实现图像的本地缓存
与文本不同，图像在您的网站上显示后很少更新。因此，访问者的浏览器每次访问您的网站时都不必下载相同的图片。
需要做的只是告诉浏览器每次访问您的站点时都不需要重新下载图像，而是可以使用本地缓存副本。为此，我们需要将以下代码段添加到您网站的.htaccess文件中：
上面的代码告诉浏览器，如果文件是上述类型之一（CSS，JPG，JPEG，PNG，GIF，JS或ICO），它应缓存一个月（2592000秒）。
实施此解决方案称为杠杆浏览器缓存将使您的网站加载速度更快，并将减少您的网站使用的带宽量。
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
使用WordPress？安装WP Smush插件
如果您使用的是WordPress，我绝对推荐使用WP Smush插件。这个非常方便的插件优化了通过WordPress媒体上传器上传的每个图像，使您可以显示更轻的图像，而不会影响其质量。
WP Smush还允许您批量处理之前上传的图像，这是一种节省带宽并使您的网站更快速的惊人方式，而无需花费数小时手动替换您网站上的每个图像。
WP Smush还可作为高级插件提供，具有更多选项和高级压缩功能。遗憾的是，我没有机会尝试它。
不要将图像用于使用CSS可以实现的功能
曾经有一段时间将图像资源用于背景图像，按钮或容器等常见问题。这是合理的，因为CSS技术当时并不像现在这样复杂和强大。
不幸的是，许多人仍然依赖图像资源来处理可以使用CSS轻松完成的事情，例如渐变。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/262878.html