返回

存储更划算！网站图片优化指南：资费降低 90% 的秘诀

前端

在新的一年开篇，我想跟大家分享一下我降低个人网站文件存储费用90%的秘诀。

图片优化前的现状

2020年建立了网站之后，这两年一直使用阿里云对象存储。大约一个月能产生500M的文件，费用基本上在20元左右。对于个人站点来说，成本略高。

2022年计划开个好头，所以打算从存储费用这里开始优化。通过这几个月的优化，网站的存储费用基本上控制在2元以内了，下降了90%以上，非常满意。

图片优化前的准备

在优化之前，我们需要明确一些基础概念。

  • 对象存储： 对象存储是一种将数据存储在固定大小的对象中的存储方式。对象存储服务提供商通常按存储的数据量和请求次数收费。
  • CDN： CDN（内容分发网络）是一种将内容缓存到分布在不同地理位置的服务器上的系统。当用户请求内容时，CDN会将内容从最近的服务器提供给用户，从而减少延迟并提高性能。
  • 图片压缩： 图片压缩是一种减少图片文件大小的技术。图片压缩可以通过有损压缩或无损压缩两种方式实现。有损压缩会降低图片质量，但可以显著减小文件大小。无损压缩不会降低图片质量，但减小文件大小的效果较差。
  • 图片格式： 图片格式是指图片文件存储时所使用的文件格式。常用的图片格式包括PNG、JPG和GIF。不同的图片格式具有不同的特点和优势。
  • 懒加载： 懒加载是一种延迟加载技术。当页面加载时，懒加载会延迟加载图片，直到它们出现在视口中。这可以减少页面加载时间并提高性能。

如何优化网站图片

了解了以上基础概念后，我们就可以开始优化网站图片了。

1. 压缩图片

压缩图片是优化网站图片的第一步。压缩图片可以减小图片文件的大小，从而减少存储空间和带宽消耗。

我们可以使用各种工具来压缩图片，例如：

  • TinyPNG： TinyPNG是一个在线图片压缩工具，可以免费压缩PNG和JPG图片。
  • ImageOptim： ImageOptim是一个macOS上的图片压缩工具，可以压缩PNG、JPG和GIF图片。
  • pngquant： pngquant是一个命令行工具，可以压缩PNG图片。

2. 选择合适的图片格式

选择合适的图片格式也是优化网站图片的重要一步。不同的图片格式具有不同的特点和优势。

  • PNG： PNG是一种无损压缩的图片格式，非常适合存储高分辨率的图片。
  • JPG： JPG是一种有损压缩的图片格式，可以显著减小文件大小，但会降低图片质量。
  • GIF： GIF是一种支持动画的图片格式，非常适合存储简单的动画。

3. 使用CDN

使用CDN可以加速网站的图片加载速度，从而提高网站的性能。CDN会将图片缓存到分布在不同地理位置的服务器上，当用户请求图片时，CDN会将图片从最近的服务器提供给用户，从而减少延迟并提高性能。

我们可以使用各种CDN服务，例如：

  • 阿里云CDN： 阿里云CDN是中国最大的CDN服务提供商，提供各种CDN服务，例如静态内容加速、动态内容加速、视频加速等。
  • 腾讯云CDN： 腾讯云CDN是中国第二大CDN服务提供商，提供各种CDN服务，例如静态内容加速、动态内容加速、视频加速等。
  • 七牛云CDN： 七牛云CDN是中国第三大CDN服务提供商，提供各种CDN服务，例如静态内容加速、动态内容加速、视频加速等。

4. 启用懒加载

启用懒加载可以延迟加载图片，直到它们出现在视口中。这可以减少页面加载时间并提高性能。

我们可以使用各种技术来启用懒加载，例如：

  • 原生懒加载： 原生懒加载是HTML5中的一种新特性，可以让我们通过<img>标签的loading属性来启用懒加载。
  • jQuery懒加载： jQuery懒加载是一种使用jQuery实现的懒加载技术。
  • 其他懒加载库： 还有一些其他懒加载库，例如Lazysizes、Lozad.js等。

5. 优化图片的SEO

优化图片的SEO可以帮助图片在搜索引擎中获得更好的排名。我们可以通过以下方法来优化图片的SEO：

  • 添加图片alt属性： 图片的alt属性可以为图片提供文本。当图片无法正常显示时，alt属性中的文本会显示在图片的位置。alt属性中的文本描述可以帮助搜索引擎了解图片的内容，从而提高图片的SEO排名。
  • 添加图片标题和说明： 图片的标题和说明可以为图片提供更多的信息。搜索引擎会使用这些信息来了解图片的内容，从而提高图片的SEO排名。
  • 使用图片文件名： 图片的文件名应该包含相关的关键词。这可以帮助搜索引擎了解图片的内容，从而提高图片的SEO排名。