码迷,mamicode.com
首页 > Web开发 > 详细

WEB前端优化CSS,JS,图片

时间:2016-04-08 07:53:09      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:图片压缩   css   js压缩   

做网站优化的运维都知道,为了提高网站的访问速度,一般会开启Apache/Nginx gzip功能,将文件压缩,但是这个压缩与我要说的压缩不在一个层面。网上也提供一些在线css、js文件压缩功能。今天介绍一款linux工具来实现这个功能
安装JAVA

YUI Compressor由java开发,所有我们必须先有java环境。一般系统都会自带java,如果没带,那么

yum安装一个openjava
# yum install java
确认是否安装成功
[root@iZ288zwmtk4Z vhost]# java -version
java version "1.7.0_85"
OpenJDK Runtime Environment (rhel-2.6.1.3.el6_7-x86_64 u85-b01)
OpenJDK 64-Bit Server VM (build 24.85-b03, mixed mode)

下载安装YUI Compressor

# mkdir -p /usr/share/java
# wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar 
创建脚本yui
# cat /usr/bin/yui
#!/bin/sh
java -jar /usr/share/java/yuicompressor-2.4.8.jar "$@"
给yui执行权限
# chmod +x /usr/bin/yui

yui压缩js、css

压缩css命令
# yui style.css -o style-mini.css  #两者文件相同也是可以的 yui style.css -o style.css
压缩js文件命令
# yui jquery.js -o jquery-mini.js #两者文件名相同也是可以的 yui jquery.js -o jquery.js

如果觉得每次都要去压缩文件很麻烦,我推荐你使用Google的pagespeed插件,能够自动压缩文件、优化代码以及合并css、js等等,功能非常强大


为什么要优化图片

想象一下,如果TTLSA每篇文章图片都是1M,一篇文章有10个图片,你看一篇文章是一种什么体验。不仅仅体验差,TTLSA的CDN流量也是蹭蹭蹭的往上涨,涨的是流量,掉的是钱。一个图片100k和1MB的现实的效果差不多,为什么不用100K呢
如何优化图片

有如下几种方法

    1.打开大图,QQ截屏然后保存下来
    2.ngx_pagespeed插件,自动化优化图片质量/尺寸
    3.firework、ps等工具导出图片
    4.jpegoptim、pngcrush

介绍下第四种在linux下压缩图片,并且图片质量不会太差,而且可以写脚本批量压缩图片。
jpegotim压缩图片

安装jpegotim

如果你有epel yum源,使用如下命令即可

# yum install jpegoptim



压缩图片命令

# jpegoptim ttlsa.jpg 
ttlsa.jpg 1425x823 24bit N JFIF  [OK] 1074449 --> 853514 bytes (20.56%), optimized.

可以看到ttlsa.jpg自动被压缩了20.56%。

再压缩一次

# jpegoptim ttlsa.jpg 
ttlsa.jpg 1425x823 24bit N JFIF  [OK] 853514 --> 853514 bytes (0.00%), skipped.

图片已经被压缩过了,所以提示跳过,不需要在被压缩。

提供一个批量压缩的脚本
for i in /data/site/image.ttlsa.com/images/*.jpg; do jpegoptim $i; done

pngcrush优化PNG图片

项目地址:http://pmt.sourceforge.net/pngcrush/
# wget http://downloads.sourceforge.net/project/pmt/pngcrush/1.7.88/pngcrush-1.7.88.tar.gz
# tar -xzvf pngcrush-1.7.88.tar.gz
# cd pngcrush-1.7.88
# make
# cp pngcrush /usr/bin
pngcrush使用语法
usage: pngcrush [options except for -e -d] infile.png outfile.png
       pngcrush -e ext [other options] file.png ...
       pngcrush -d dir/ [other options] file.png ...
       pngcrush -ow [other options] file.png [tempfile.png]
       pngcrush -n -v file.png ...
options:
         -bail (bail out of trial when size exceeds best size found
    -bit_depth depth (deprecated)
      -blacken (zero samples underlying fully-transparent pixels)
        -brute (use brute-force: try 148 different methods)
........更多内容请自己看帮助......

pngcrush简单命令

pngcrush -brute -e "myimage_compressed.png" myimage.png
.........省略.....
   Best pngcrush method        = 123 (ws 15 fm 4 zl 9 zs 1) =    124820
     for output to ttlsattlsa_new.png
     (1.63% critical chunk reduction)
     (1.63% filesize reduction)
   CPU time decoding 1.560, encoding 7.640, other 0.030, total 9.230 sec.

批量优化PNG图片

pngcrush -brute -d "/data/site/image.ttlsa.com/images" *.png



本文出自 “孜孜不倦的学习着...” 博客,请务必保留此出处http://jonyisme.blog.51cto.com/3690784/1761559

WEB前端优化CSS,JS,图片

标签:图片压缩   css   js压缩   

原文地址:http://jonyisme.blog.51cto.com/3690784/1761559

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!