轩枫阁

前言

不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。

但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。

对 WebP 的研究缘起于手机 QQ 原创表情商城，由于表情包体积较大，在 2G/3G 的网络环境下加载较慢。同事小贝恰好因为 2013 Google I/O Event 了解到了 WebP，于是我们便一起开始了没羞没躁的技术预研，期待在原创表情图片的质量与体积之间寻找最美的平衡。 查看全文

前言

前端时间做过一些带有不少逻辑的H5，例如微信运动，如果用H5开发，大概包含排行榜、profile页、点赞页等页面。不简单页不复杂，主要包含3个页面的切换，可以前进后退，是一个单页应用。但是又比较简单，只需要使用一个前端路由就可以解决。

Q.js代码不到百行，使用起来很简单。

Q.js

Q.js 是一个炒鸡轻量的前端单页路由框架。

http://mouto.org/#!54092

轻量、快速、极简

为了更好的利用缓存以及更少的后端支援，Q.js放弃了 HTML5 State，通过#!格式的 url hach 重现了 url 路由功能。

1. 无 JavaScript 库依托，可随意搭配使用
2. 源代码不及百行压缩后 834byte
3. 支持 IE6+ Chrome Safari FF
4. 未做情况判定，使用 Q.js 必然会注册 window.Q

查看全文

前言

本文主要介绍前端相关的图片优化工具及方法

1. PP鸭 压缩软件

简介：

PP鸭 图片压缩神器，帮你的图片减减肥。

PP鸭整合了业内最优秀的数种开源的图片压缩算法，会自动根据图片特征自动选择压缩参数。只需要将图片拖入PP鸭，就能自动批量压缩，省时省心。

官网：http://ppduck.com/

特点：极致的图片压缩效果，经过长时间反复调校和对比各种算法，PP鸭在品质，体积，速度三者间，帮你定位完美的平衡点

优点：

• 跨平台图片压缩软件（win&Mac），图片压缩能够在保证质量的情况下使图片容量更小。需要付费激活，但能免费试用10次（可循环）。
• 适合独立的小项目，在发布之前进行手动优化，省时简单

查看全文

前言

图片通常占据网页上下载字节的绝大部分，通常，也占据了大量的视觉空间。因此，优化图片通常可以最大程度地减少网站下载的字节数以及提高性能：浏览器下载的字节数越少，占用客户端的带宽就越少，浏览器下载并在屏幕上呈现有用内容的速度就越快。

图片优化既是一门艺术，也是一门科学：图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。

删除和替换图片

• 删除不必要的图片资源
• 尽可能利用 CSS3 效果
• 使用网络字体取代在图片中进行文字编码

第一个要问您自己的问题应该是，要实现所需的效果，是否确实需要图片。好的设计应是简单的设计，而且始终可以提供最佳的性能。如果可以删除图片资源（与网页上的 HTML、CSS、 JavaScript 和其他资源相比，图片资源通常需要大量的字节），这始终是最佳的优化策略。俗话说，好的图片所传达的信息胜过千言万语，所以，您需要找到平衡点。 查看全文

前言

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

一、现有web图片格式

查看全文