轩枫阁

首页 / Web前端 (第6页)

关于图片优化

前言

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

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

删除和替换图片

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

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

2016/09 29  周四

前端图片优化机制

前言

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  周二

gulp详细入门教程

一、gulp简介

1.gulp是什么?

gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器, 它能自动化地完成 javascriptcoffeesasslesshtml/imagecss 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。

gulpgrunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。 查看全文

2016/09 17  周六

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

前言

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

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

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

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

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

2016/09 06  周二

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

前言

本文介绍关于轩枫阁V3主题开发内容,分为移动端和PC端。

移动端

针对移动端主题的开发处理主要有表格滚动条、纯文本简介、搜索标签、文件模块、loading加载、判断页面类型、微信图片预览等。

表格处理

文章里面的表格,经常宽度会大于移动设备屏幕的宽度,所以给表格加上滚动条尤为重要。

WP在编辑文章插入表格时,会插入table标签,外层并没有特殊的class来标记含有表格,所以无法直接通过CSS的方式加上横向滚动条。

1. JS判断表格,给外层加上指定Class。这种方法实现的会比较不友好。

2. 通过PHP给table表格加上class 查看全文

2016/09 06  周二

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]

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