轩枫阁

前言

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

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

删除和替换图片

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

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

前言

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

一、现有web图片格式

查看全文

一、gulp简介

1.gulp是什么？

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

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

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

前言

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

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

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

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

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

前言

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

移动端

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

表格处理

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

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

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

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