轩枫阁

首页 / 搜索标签: 图片优化 (第2页)

前端图片优化机制

前言

60%的网站流量来自图片,图片优化可以大幅影响网站流量。

一、现有web图片格式

图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场景
baseline-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景
progressive-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景, 渐进式加载
gif 支持 支持 无损 所有 由帧数和每帧图片大小决定 简单颜色,动画
png 支持 不支持 无损 所有 由png色值位数决定 需要透明时
webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状,浏览器平台可预知
apng 支持 支持 无损 Firefox、Safari、iOS Safari 由每帧图片决定 需要半透明效果的动画
svg 支持 支持 无损 所有(IE8以上) 由内容和特效复杂度决定 简单图形,需要良好的放缩体验,需要动态控制图片特效
bpg 支持 支持 有损 不支持,需要js解码 由画质决定 jpeg上需要极限优化的场景

查看全文

2016/09 20  周二

轩枫阁V3主题设计开发总结—技术篇

前言

轩枫阁V3.0主题已上线,自2013年上线发布,V1-V3,3年。3个月完成V3主题PC端、移动端交互原型、网页重构、功能开发、工具一键上线。

本次主题的更新,对整站进行优化,主要包括设计改版、性能优化、体验优化。

本文主要针对主题各类技术开发进行总结:

  • 主题分离篇
  • 重构篇
  • 图片优化篇
  • 开发篇
  • 构建篇
  • 加载篇

设计篇:轩枫阁V3主题设计开发总结—设计篇 查看全文

2016/09 06  周二

轩枫阁V3主题开发-加载篇

前言

轩枫阁V3主题已上线,本文将介绍本站V3主题关于加载优化的内容。

图片优化

关于图片,这里使用传统的优化方式。本站使用的图片主要有各类图标、大图、文章配图、文章内容图等。

雪碧图

使用雪碧图Sprite,将各图标合并成一张图,可以减少HTTP请求数。

开发过程中,使用单个图标,结合tmt-workflow,在发布时将图片合并。同时移动端支持2倍雪碧图,只需同时将2x图标放至slice目录即可。 查看全文

2016/09 03  周六

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子