轩枫阁

首页 / Web前端 (第5页)

关于JPEG存储格式:baseline与progressive

概念

JPEG有两种存储格式:baselineprogressive。Baseline JPEG 会在数据可用时,一行一行自上而下显示。Progressive JPEG会先显示模糊图片,然后逐渐清晰。

e38c96d2-fe0a-11e4-9fc9-5a116df51920

浏览器渲染

Progressive JPEG在所有浏览器都会显示,这里的关注点是如何渲染。 查看全文

2016/10 30  周日

关于WebP接入方案

WebP格式

WebPGoogle推出的意图改变web图片JPGPNGGIF三分天下局势的一种图片格式,可对图像大幅压缩。它不仅支持无损或有损压缩、alpha通道,还支持动画演示。在同画质的情况下,WebP格式图片占用体积相较于jpg图片大约减少40%,相较于无损png图片大约减少30%

浏览器支持

Google浏览器Chrome首先引入WebP,此外Opera 11.10也增加对WebP的支持。

如果你能看见下面的图片,说明你的浏览器支持WebP。 查看全文

2016/10 19  周三

WebP 探寻之路

前言

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

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

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

2016/10 12  周三

Q.js 轻量的前端单页路由框架

前言

前端时间做过一些带有不少逻辑的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

查看全文

2016/10 07  周五

图片压缩工具推荐

前言

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

1. PP鸭 压缩软件

ppduck

简介

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

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

官网http://ppduck.com/

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

优点

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

查看全文

2016/10 06  周四

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]

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