×
文章路径: 开发运维环境

关于图片使用绝对路径还是相对路径的几点思考

发表于2年前(Jun 18, 2016 4:54:56 PM)  阅读 1049  评论 0

分类: 开发运维环境

标签: 绝对路径 相对路径 图片地址 lazyload 云存储

这篇文章主要是说说这么多年,笔者自架博客服务器以来,对于图片存储路径的一些经验。

首先,拥有专门的文件服务器,这是最好的解决方案。大型门户,大型电商毫无疑问都是使用的自己的文件服务器,这些服务器不仅拥有高效的读写性能,往往都合cnd想结合,对于图片很多的网站能提供很好的用户体验。另外很多都能对多媒体进行实时在线处理。举个例子,京东云提供的图片在线处理,以下是其官方说明文档的一部分:

图片处理是京东云提供的包括缩略图、水印、图片旋转等功能在内图片处理服务。用户可以在将图片上传到京东云存储后直接通过Rest API或SDK完成图片的缩放、水印等操作,不需要在本地进行繁琐的重复操作。
例如您上传了名为test.jpg的图片,其链接地址为:
http://s.jcloud.com/my-bucket/test.jpg
我们可以通过访问如下的URL完成图片的缩放和居中裁剪
http://s.jcloud.com/my-bucket/test.jpg?img/s/640/480/cc/300/260
由于通过接口的方式定义图片处理方法会出现较长的URL,我们可以通过控制预先定义图片处理样式,即为如上所示的”/s/640/480/cc/300/260”取一个别名为scale,那么访问
http://s.jcloud.com/my-bucket/test.jpg?imgalias/scale
和http://s.jcloud.com/my-bucket/test.jpg?img/s/640/480/cc/300/260
效果是完全一样的。通过图片样式的方式可以极大缩短请求URL的长度,使URL具有更好的可读性。

同样,阿里云也提供了类似的功能,可以看出这些都是互联网大头这么多年运营,积累下来的,不仅为其自己服务,并以服务的方式出售给客户使用。同时除了这些大头,近几年由于移动互联网的迅猛发展,涌现出了很多专门做云存储的企业,如七牛,又拍云等。当然,这些都是收费的,有些按存储,有些按流量收费,对于商业项目来说,选择一个可靠的云存储是一个比较稳妥的方案,这样,您就不用考虑后期的一些图片性能优化工作了,什么动静分离啊,CDN啊什么的,可以省很多事。如果没有能力选择一个云存储或者专门的图片服务器,那就只能服务器本地存储了。

对于服务器本地存储,是应该存储图片的绝对路径,还是相对路径,这个问题现在还没有统一的定论。对于自架服务器的站长来说,大部分人都是倾向于使用相对路径,因为使用相对路径,在换域名,换服务器的时候,并不影响图片地址的正确性,这是很现实的一个问题,对于很多不盈利的网站,更换域名可能是常有的事。笔者的域名就曾经更换过一次,在使用这个域名之前,还用过一段时间的.com.cn的域名。使用相对路径,对于其他网站转载您的文章,图片将无法直接显示,需要进一步处理,加上域名,这样增加了一些第三方应用的开发难度。举几个例子,百度搜索里面的快照功能,对于图片路径没有进行处理,如果使用相对路径,图片将无法显示。QQ邮箱的订阅功能,对订阅文章的图片地址进行了处理,对于图片会使用下面的地址:https://pic.qqmail.com/pic/8f53be619e1d5b3448d27f2174eb3e6c/?url=http://blog.cangzhitao.com/upload/2016/5/25/dc52c6.png 可以看到url参数是经过处理加上了域名的绝对路径。为了更好地提供用户体验,利于SEO,所以也有不少人提倡应该使用绝对路径。现在主流的做法,不管是使用绝对路径还是相对路径,存储在数据库里面的值都是相对路径,在页面展示时,根据需要决定是否拼成绝对地址。这样可以解决上面说的几个问题。但是很多基于内容的网站,都使用的富文本编辑器,其实主要的问题就是在富文本编辑器中,到底使用绝对路径还是相对路径。

对于文章,后台编辑基本上是一个富文本编辑器,生成了一大段html代码,里面可以包含文字,图片,视频等等,我们将这段html存入数据库里一个字段,页面展现时,直接加载这段html了就行了。而这种情况,要拼图片的绝对地址就比较麻烦了。如果确定了展示时要显示绝对路径,那么有两个方案,一,存储时就存储绝对路径,这样一旦更换域名,这时我们需要对所有文章内容进行一次域名替换。二,存储时存相对路径,显示前,解析html,加上域名。第一种的优势是性能比较好,只需处理一次,第二种则不需要人为干预。

其实笔者最近一直在想,有没有更好地方案。对于多图的文章来说,大部分都使用了lazyload的方式。简单来说,就是图片并不是立即加载的,而是在用户要看它的时候才去请求加载,这时一种比较高效节能的做法。lazyload的原理其实很简单,后台编辑时,或者生成前台页面代码时,图片的地址不给,或者给一个loading的默认图片地址,然后把真实地地址放到图片标签的一个自定义属性里面,这样理论上如果不做任何处理用户看到的所有图片都是一个loading图片。这时,我们在用户将要看到的图片上面做下处理,将正确地地址取出来,重新赋给图片的src,这时,图片就去请求服务器,图片就正常显示了。笔者的想法是可不可以存相对地址,然后图片真正显示时,给地址加上绝对路径呢。这个想法笔者还没有实现,有几个难点,首先需要修改原富文本编辑器插入图片的代码。其次,这对于搜索引擎来说可以说是一个ajax页面了,搜索引擎能否显示正确的图片,会不会全是一个loading图片?

记录最近的一些思考,以待后期有更好地解决方案。

发表评论