背景图既要清晰,又要加载速度快,有什么折衷的方法吗?

Vagor
  • 716

我背景图想要清晰的图,但又想要加载速度快一些,有什么折衷的方法吗
举例:demo,这是我做的404网页,base64转码过了.

回复
阅读 5.7k
6 个回答

用ps保存的时候,选“连续”,不要选“优化”;

图片描述

那就只能用预加载来解决加载速度快了

如果是比较简单的图片,转成svg会省不少size,间接就加快加载速度了

  1. 大图片base64转码,不推荐,而且转码、解码也需要时间

  2. 服务器端做缓存,比如nginx或者apache配置,静态文件缓存

  3. 使用HTTP的cache-control

  4. 开启服务器GZIP压缩,减小网络流量

整张网页的加载,最耗时的就是,服务器端文件I/O和网络传输I/O。反正就是减少传输的数据量,然后做缓存

CDN+缓存。你好多页面都用了大背景,整个网站的速度都很慢。比如你这个网站http://vagor.cc/project/softwareProject/login.html。不知道你是男生还是女生,可以用纯色或者小图片repeat来实现一些背景。大图的做背景不推荐。

首先,根据不同的图片资源特点选择不同的图片格式。demo 中这样的背景图使用 png 格式能够实现比较理想的压缩效率。开启png的交错功能能够比较好的兼顾加载速度和图片质量。另外,webp 也是个不错的选择。
其次,从前端优化的角度来讲,使用 cdn 来进行资源分发能够有效提高加载速度。而 gzip 对已经是压缩资源的图片效果不会太明显。
最后,还可以根据项目实际情况尝试 h2 等全新技术。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏