找回密码
 加入怎通
查看: 424|回复: 2

[其他] 图片优化做的好也能带来不菲的流量

[复制链接]
爱吃鱼的猫老师 发表于 2017-08-14 09:35:05 | 显示全部楼层 |阅读模式
  图片优化做的好也能带来不菲的流量,图文并茂可以说是所有站长默认的创作方式,然而图片过大对页面的打开速度影响是很大的,由此才需要我们也给图片做优化。图片优化不仅仅是为了吸引潜在消费者,另一个目的就是增加图片搜索所带来的流量,又或是提升网站加载速度,图片优化图片优化起着至关重要的作用。说到图片优化,最常用的就是给图片加alt属性,图片压缩等,这些只是比较粗线条的优化,想要做好图片优化只是这样是不够的,远远没有这么简单,这只是开始。

图片优化做的好也能带来不菲的流量

图片优化做的好也能带来不菲的流量
, h; o; W) J0 X" f# K
  要做图片优化,首先我们需要先给图片减减肥。

0 o2 Z+ _9 o% J) j4 X: T
  我们先来看看这些数据,大部分PC用户不会等待超过3秒的网站加载速度,而在移动设备上则不会等待超过5秒钟,5秒还没有加载出来,结果就是用户关掉页面,还会给用户留下不好的印象。

/ ~% E: s, f6 z4 H6 U3 q3 d
  亚马逊发现如果他们的网站加载速度慢了1秒钟,他们一年将损失16亿美元。

! S8 O5 K8 ~- Y3 T
  搜索引擎已经将网站加载速度列入了排名算法之中,如果你网站有大量的图片致使网站非常臃肿,将严重影响网站加载速度,如果超过10秒钟,那你等着和你的客户说拜拜吧。
+ i' j! ~3 `% m5 |
  有些理论说图片的大小应该保持在70kb以下,这个到没有明确的规格,有的时候为了保证图片的清晰度,图片稍微大点是在所难免的。个人觉得,不要用一个标准去限制每一张图片的大小,我们的最终目的只是保证在不影响清晰度的情况下,尽可能的降低图片大小来保证页面的打开速度。
/ v) s4 U9 o/ m! k& M3 ^9 A4 _
  不同的图片格式对图片优化也是有影响的。
# o+ g$ W- I1 z5 Z1 D; A/ S, r
  目前最流行的三种图片格式就是:JPEGGIFPNG
# _. f9 K6 ]9 }7 v: v( t
  JPEG (或者说 .jpg) 是最常用的图片压缩格式,支持最高级别的压缩。通常,对于显示要求比较高的图片来说,JPEG格式展示的图片效果较GIFPNG有明显的优势。

. i  {+ B" {" J' J, {8 A+ s% \
  GIF (.gif) 的图片显示质量要比JPEG逊色很多,通常用作非常简单的图片展示,比如素材或者装饰性图案,gif也可以用来制作动画。gif不适合用作高显示质量的图片。

: _. T9 z- E" P8 ^1 `( [+ K
  PNG(.png)图片是比GIF更好的选择,因为PNG图片支持的色彩要比GIF多。和JPEG一样,PNG反复保存也不会影响图片质量,而且对于小图来说,PNG占用的体积极小,PNG完美支持透明背景,一般logo或一般装饰性图案都会选择PNG格式。注意PNG-24图片体积是PNG-8版本的3倍,对待PNG你要十分小心,看仔细了。
* g! g9 T& k# }* ]
  如下是一个例子,通过对比相同体积下(都是24kb)不同格式的图片

' B3 O) z! p1 m$ a& p/ i7 y
  可以很清楚的看到,JPEG显然是获胜者,在同样的体积下,GIFPNG必须以牺牲图片质量为代价。不过话又说回来,对于非常小的图片来说(比如小于5K)PNG是比较好的选择,相比GIFPNG可以在体积很小的情况下依然不会让图片失真。

: v+ P5 L5 Y" a$ C' u" I( N
  对于那些对图片质量要求极高的站长来说,JPEG毫无疑问是首选,绝对不要用GIF来当做产品大图。不然的话文件尺寸会非常大不说,也没有很好的办法去压缩它(一压缩就失真)。可以用GIFs做动画或是装饰性小图。
* y* D4 B& Y, B6 D8 k. {+ Z
  PNG可以作为JPEGGIF的替代,如果你想把产品图片做成PNG格式,尽量用PNG-8而非PNG-24PNG同时也擅长处理简单地装饰图而只需很小的体积,PNG将会变得越来越流行。当然了,大部分的图片编辑软件可以转换以上三种形式的图片格式。
  J* _) E1 o5 ^9 c" P. s$ I0 Z
  如果你希望提供更大的图片让用户欣赏,不建议将大图直接放在网页上然后用css将图片缩小,虽然看上去图片变小了,但是图片的真实尺寸还是没有变的,这会严重影响页面加载速度。相反,你可以先放一张较小的图片,然后提供查看大图的功能,不管是点击弹出大图还是另外新页面显示,都是极好的。
4 Z& c. }: M. \0 C" K/ ]5 q4 e  s
  还有一些人会把一张大图切成一张张的小图做拼接,这样做虽然可以让图片快速显示,但这样做会增加服务器的请求数,从而会影响网页加载速度。所以,如果对图片的要求非常高的话,建议为图片专门配置专门的服务器。

- P3 w8 Q1 ~2 U8 C; ^9 k% r2 j4 c* q
  首页显示缩略图是个不错的选择。

& S% g2 p8 k0 `: u. B
  尽可能压缩缩略图体积,缩略图的图片不要过分追求显示质量,当用户点击到下一层详情页面的时候再给他一张高质量的图片。
9 u* U5 \. g6 r, L% m
  不要为缩略图设置alt标签,我们并不希望搜索引擎索引的是缩略图而应是详情页的高质量原图。

6 G) |* s  ?, m1 _, j
  背景图、按钮图,边框图等都可算作装饰图,作为一名SEOer,你需要仔细去检查这些图片的体积是否过大,是否会影响网站载入速度。

/ I+ T' D5 j/ H8 D9 |. d3 {& _
  如果只是一些边框类的、或是简单的样式图片,使用PNG-8或者GIF,可以创建非常好看的图片并且只占几百byte的体积。如果可能的话,尽量使用css来创建一些特殊效果,而非图片。
  P! n- M( o: `2 u6 q+ g
  不建议为网站设置背景图片,如果一定要有的话,在保证清晰度的前提下最大程度去压缩体积。你还可以把背景图当中镂空或保持透明来压缩体积。

- y- @% X3 d! n7 L1 F
更多的免费友情链接交换,流量交换尽在:2898站长资源平台
5 L) g5 Y: _9 W% \

图片优化做的好也能带来不菲的流量

图片优化做的好也能带来不菲的流量
. ]% D% q+ G/ G" [* `8 t
. a4 U( D2 ^2 P! ~: e3 m+ G7 E, C

暂时无法加载帖子列表

回复

使用道具 举报

radarxu 发表于 2026-03-17 23:29:42 | 显示全部楼层
楼主太厉害了,整理得这么详细,必须支持
回复

使用道具 举报

ptntk2010 发表于 2026-08-29 03:04:58 | 显示全部楼层
分析得很透彻,很多细节都说到点子上了~
回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-9-14 03:14 , Processed in 0.039959 second(s), 28 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表