网站配图,图片压缩以及图床选择小结

Author Avatar
Crown 6月 17, 2017
  • 在其它设备中阅读本文章

受限于篇幅原因,这里只是贴出了我在自己博客以及日常中的使用,如果大家有更好的想法,欢迎到下面留言指出,谢谢!!

文章配图选择

一个比较好的高清图片网站是写文章时必不可少的,在这里我只列出我自己收藏的几个可以免费用于上用的图片网站(部分需要科学上网).

  1. Unsplash: 这里的图片基本上来自于世界各地的摄影师,质量普遍很高,强烈推荐.但缺点就是图片的大小普遍很大,用于自己网页应用时可能需要自己去压缩调整一下(后面会介绍一些压缩工具).
  2. WallpaperBetter: 跟上一个相比,这个图片的尺寸就比较正常了,而且可以在线调整下载的尺寸以及质量,比起上个来说会方便很多.

下面这几个都是网友推荐的几个比较赞的网站,我自己实际上使用的并不多,所以在这里就不多加评论了.大家有兴趣的也可以去看看.

  1. Pexels - 免费的照片库
  2. Magdeleine - 为您的灵感精心挑选的免费照片
  3. Foter - 免费的照片库和图像

图片压缩

部分参考于该篇文章,但由于该文章完成时间离现在已经有一段时间了,所以文章部分观点已经不再适用于当前情况,有兴趣的可以去了解一下相关知识.

现在大家选择图片压缩的方式基本是找一些在线压缩网站去压缩自己的图片,下面这几个是大家使用比较多的网站,大家可以参考一下.

  • tinypng: 这个国外网站推荐人数最多,反应也普遍比较好,但现在部分功能需要付费使用了,不过这并不影响大家的日常使用,付费区别大家可以自己去官网仔细查看.
  • CompressPNG - 在线压缩 PNG 图像: 这个也蛮不错的,有中文界面.

多余的我就不一一推荐了,大家可以自己去找一下相关资源.我推荐一个我自己使用的压缩软件 – 智 图,这个是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式。同时,智图平台还会为用户转换一份webp格式的图片。

点击下载

WebP是Google在2010年发布的一种新型图片格式,支持无损和有损压缩。在无损压缩方面,同质量的WebP图片比PNG的体积小26%,而在有损压缩方面,同质量的WebP图片比JPEG小25-34%。WebP在不降低图片质量的同时,减少了约三分之一的体积。详细可参考谷歌官方,什么情况下使用WebP大家也可以去看下这篇文章

智图 mac 操作界面

支持 Win 和 Mac 操作平台,自动转换格式以及导出 WebP 格式很实用,而且使用起来比较方便,而且提供了gulp插件供大家使用,推荐有这方面需求的大家去尝试一下.更多的大家可以去看下官方介绍.

更多的工具大家可以去这篇文章查看.


2017-06-18

图床推荐

现在文章中使用的图片一般都会放在图床上面使用,如果有对图床不是很了解的童鞋可以自行去 google 一下相关知识.这里推荐大家去使用新浪的图床和七牛云的图床,这两个图床在国内应该是使用人数最多的两个了,两家各有各的好处,大家可以看情况去选择适合自己的.

  • 新浪图床: 推荐大家配合这个 chrome 插件 — 新浪微博图床 (需要翻墙下载)来使用,直接将需要上传的图片拖过去就行,会自动在剪贴板里复制新的图片地址,可以直接复制来使用.
    • 新浪图床优点: 应该是目前国内最为稳定快速的图床了,而且完全免费!``免费!!``免费!!!,没有流量限制等.
    • 缺点: 上床的图片据说会有压缩,自动打水印等烦心事.
  • 七牛云存储(自己目前在使用): 这个严格意义来说并不只是图床,可以用来作 cdn 加速很多东西,例如css,js等,推荐 mac 搭配 iPic (mac 下的一个图床管理工具,可以使用管理多个图床,但使用除微博图床以外的会收费)这个软甲来使用,也可以去寻找一些免费的 mac 工具来使用; win 下可以使用MPic(个人没使用过,就不多做评价了).
    • 优点: 稳定,高效,但每个用户都只有10G的免费流量(注意,不是空间).
    • 缺点: 10G过后就会收费,但对普通用户来说,完全绰绰有余.

iPic 的使用方法可以看这里,软件关于七牛云的配置可以看这里.

2017-09-18更新

在我把我的博客搬到了个人服务器上以后,怎么去优化我的网站加载速度也提前被拿上议程,在我不断在 chrome 的调试工具中查看我的网页加载后,发现其中最大的一个问题便是图片的大小严重影响到了我的网页加载速度,虽然我已经去尽量压缩他的大小了,但明显看来,这依然不够…

在查看了其他人的网站后,我发现他们的图片大小往往只有几十 kb 的大小,而我的往往会有接近1M, 我们之间最大的区别不是别的,而是我的原图像素大小没有调到合适的地步,我的常常会有几千像素,而别人的一般会控制到1千以内…

所以最后我结合智图里面现有的对图片等比裁剪功能,去把我的题图大小限制在了900*470这个尺寸, 然后无损压缩一下就可以直接拿来使用了. 而我的网站再加上一些 cdn 设置后, 其加载速度也由最开始的将近6s到现在的1.5s以内…撒花!!!

现在个人文章中使用配图的过程如下:

  1. 在上述网站中找到自己需要的图片下载下来
  2. 如果图片大小过大,使用智图将其压缩到自己满意的大小,一般大图不会超过1M大小即可,小图看自己个人喜好.使用智图限制大小后进行压缩一遍即可.
  3. 使用图床工具将其上传到网上,然后直接在文章中粘贴自动生成好的连接就行

效果如下:


随着我自己个人的技术水平的提高,我也会尽最大力量去原创一些有价值有内容的文章出来。在此期间我的文章会同步更新在以下地方,欢迎大家在自己长逛的网站中关注或者star我的Github来了解我的最新消息!!!

未经允许,不准转载