`
fantaxy025025
  • 浏览: 1329360 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

web前端的图片压缩

 
阅读更多

 

From:http://www.zhihu.com/question/20027708

来自 yahoo 的一个 ppt 全面的介绍了网页图片的压缩技术,其中提到很多有用的方法和工具。
大纲列这:
  1. 优先用 png 而不是 gif
  2. 压缩 png
  3. 去掉 jpg 的 metadata
  4. 压缩 gif 动画
  5. 尝试使用 png8
  6. 避免使用 AlphaImageLoader
  7. 压缩动态生成的图像
  8. 使 favicon 更小 可缓存
  9. 使用 CSS Sprites
  10. 作者:任文龙

=====================================================

From: 抱歉忘记粘贴url了,然后百度找不到了。

无损压缩网站上的图片

写在前面,如果你并不是经常需要压缩网站上的图片,yahoo有一个线上的服务Smush.it就能满足你的功能,如果你和我一样在mac下工作,可以考虑使用这个压缩软件http://imageoptim.com/
它每次能压缩一个文件夹下的图片(不支持嵌套的文件夹),并且会将单帧的gif强制转换为png。
如果你有下面某一情况:
1.经常需要压缩网站上的图片
2.你的图片文件夹有嵌套
3.想进一步把压缩图片的功能并入压缩工具中
4.想要自己控制是否将单帧gif图片转化为png
就要参考下面的这些步骤。

安装

首先,你需要一台unix或者liunx机器,用如下操作来一个一个安装

1.pngcrush

这个工具用来压缩png

1.下载

下载地址为: http://pmt.sourceforge.net/pngcrush/
点击左上角的Download,进入下载页面,复制安装包的连接地址(http://sourceforge.net/projects/pmt/files/latest/download?source=files)

1
wget http://sourceforge.net/projects/pmt/files/latest/download?source=files

2.解压

下载后的文件为pngcrush-1.7.41.tar.xz;
要进行两次解压:

1
2
xz -d pngcrush-1.7.41.tar.xz
tar -xvf pngcrush-1.7.41.tar

解压后的文件夹名称为pngcrush-1.7.41

3.编译运行

1
2
cd pngcrush-1.7.41
make

编译完成后会出现类似于下面的信息
-rwxr-xr-x 1 root root 472987 12-05 19:14 pngcrush
即可执行的程序算是成功
在当前路径下输入

1
./pngcrush

会出现版本以及help信息,代表安装成功。
为了使它在任何路径都可以直接使用
可以给它增加一个”软链“

1
2
cd /usr/local/sbin
ln -s /search/pngcrush-1.7.41/pngcrush pngcrush

这样就可以在任意路径使用pngcrush命令

2.jpegtran的部署

1.下载

1
wget http://www.ijg.org/files/jpegsrc.v8d.tar.gz

2.解压

1
tar xzvf jpegsrc.v8d.tar.gz

3.编译安装

1
2
3
4
cd jpeg-8d
vi install.txt #这个路径下有一个安装提示,install.txt 按照里面的操作步骤执行即可
./configure
make -n install # 或者make 即可

会发现/usr/bin/下已经有了jpegtran

1
jpegtran -copy none -optimize src.jpg >dest.jpg

可以试试是否安装成功

3.ImageMagick

1
2
wget http://www.imagemagick.org/download/linux/CentOS/x86_64/ImageMagick-6.8.0-7.x86_64.rpm
rpm -Uvh ImageMagick-6.8.0-7.x86_64.rpm

我遇到的情况是报错缺少依赖库的支持

1
rpm -Uvh ImageMagick-6.8.0-7.i386.rpm --nodeps --force

虽然不报错了但是没有安装成功
报错缺少的lib文件依次安装好后再执行

1
rpm -Uvh ImageMagick-6.8.0-7.i386.rpm

就没问题了

4.gifsicle

1
2
3
4
5
wget http://www.lcdf.org/gifsicle/gifsicle-1.68.tar.gz
tar -xvf gifsicle-1.68.tar.gz
cd gifsicle-1.68
./configure
make

此时/usr/local/bin/已经有gifsicle,即已安装成功

写一个脚本将它们串起来操作,并且能自动区分图片文件类型

随后我写了一个shell脚本来区分图片文件类型并使用对用的压缩工具压缩

源代码托管到了github上:https://github.com/jieyou/compress.sh

将compress.sh下载下来后,用下面的方法使用:

1.建立工作文件夹,将compress.sh拷贝至这个文件夹

2.测试使用

在上述目录下有一个测试用的图片包的文件夹,名称为test_img_bak,用于我自己调试,对于新用户,你依然可以使用它来测试使用方法

1
2
rsync -atv test_img_bak/* test_img/ #复制test_img_bak里面的图片文件到test_img,请注意,不要直接修改test_img_bak里面的文件
sh compress.sh test_img #使用脚本压缩test_img文件夹内的各类图片文件

3.压缩你自己的图片

本节以使用svn管理项目的图片源文件为例,别的方式也可以
使用compress.sh来压缩你自己的图片
首先建立并进入svn_dir目录,以你自己的名字建立一个文件夹并进入该文件夹,如

1
2
3
4
mkdir svn_dir
cd svn_dir
mkdir yourname
cd yourname

然后将你的项目文件里的图片文件夹check out出来

1
svn co http://your_svn_path/your_app_name/images

然后运行压缩脚本

1
2
3
cd .. #退回到 /search/youyo
sh compress.sh svn_dir/yourname/your_app_name/images #压缩你的项目文件里面的图片,此处的参数为要压缩的图片的路径
svn ci --m ‘after compress’ #压缩后提交到svn

4.高级用法,将一帧的gif转换为png

对于一帧的图像,png在各个方面都胜于gif,在压缩率上也是,因此,我建议对于一帧的非动画的图标,尽量使用png而不是gif
在sh时,带入第二个参数“gif2png”可以将一帧的gif转换为png格式

1
sh compress.sh test_img gif2png #使用脚本压缩test_img文件夹内的各类图片文件,并且将一帧的gif转换为png格式以便于获得更大的压缩率

不用担心,所有被转换为png格式的gif都会在终端提示你,如
“test_img/gif_one_frame.gif convert to png;compress ratio is 67.78%”

它压缩了什么

请注意,这个工具以任何算法压缩的任何格式的图像文件都是无损的

1.对于jpg或jpeg

剥离元数据(如注释、应用程序内部信息—如photoshop、EXIT—–如相机型号、拍摄日期等)
对霍夫曼表进行优化,等

2.对于png

删除除了控制透明的alpha块的其它所有块
尝试减少调色板中的颜色数量
使用超过100种算法来压缩,不冗述

3.对于多帧gif

将动画里连续帧的重复像素删除
压缩索引颜色表,等

4.对于单帧gif

如果有gif2png参数,则转换为png后再使用png的算法压缩
如果没有gif2png参数,则算法同多帧gif

 

+

+

+

=

+

+

=

 

 

 

分享到:
评论

相关推荐

    web-image-compression:一款轻量且简单的web前端图片压缩插件

    rem-fit一个轻量级的简单的web前端图片压缩插件npm install web-image-compressionimport ImageCompression from "web-image-compression"var imageCompression = new ImageCompression({width:1920,quality:0.6,...

    前端图片压缩base64后台还原图片

    本文将深入探讨“前端图片压缩base64”这一主题,以及如何在后台还原这些压缩后的图片。 一、前端图片压缩 前端图片压缩的主要目标是减小图片大小,从而减少HTTP请求的数据量,加快网页加载速度。这通常通过以下两...

    js前端图片压缩

    "js前端图片压缩"就是解决这个问题的一种技术,它允许我们在用户的浏览器上对图片进行压缩,从而减少图片大小,提升网页加载速度,同时节省用户的数据流量。 在JavaScript中实现前端图片压缩,主要涉及到以下几个...

    纯前端图片压缩和预览工具

    本篇文章将详细探讨“纯前端图片压缩和预览工具”的相关知识点。 首先,我们要了解“纯前端”意味着所有处理都在用户的浏览器中进行,不依赖服务器端的处理。这通常涉及JavaScript库或框架,如jQuery(在给定的文件...

    WEB前端大图片压缩并上传例子

    在大图片压缩的场景中,我们主要利用`toDataURL()`方法,它可以将Canvas的内容转换成Data URL,即一个包含图片数据的base64编码字符串。通过调整Canvas的大小,我们可以控制图片的压缩比例,从而实现图片的压缩。 ...

    前端压缩图片

    前端图片压缩主要有以下几种方式: 1. **HTML5 Canvas压缩**:利用HTML5的Canvas API,可以读取图片数据并调整其质量和大小。通过修改Canvas的toDataURL方法的第二个参数(quality),可以控制压缩级别,然后将压缩...

    web 前端项目 压缩文件

    【标题】:“Web前端项目”压缩文件 在Web开发领域,前端部分是用户与网站交互的界面,负责呈现内容和处理用户输入。这个“Web前端项目”压缩文件很可能包含了实现一个完整前端应用所需的所有资源和代码。让我们...

    web前端图片资源

    本文将深入探讨Web前端图片资源的使用、优化以及与后端交互的相关技术。 首先,Web前端中的图片资源主要包括静态图像(如JPEG、PNG、SVG等)、动画(如GIF、CSS3动画或WebP)以及图标(如Font Awesome图标库或SVG...

    Web前端开发中级样题一理+实.zip

    【标题】"Web前端开发中级样题一理+实.zip" 涵盖了Web前端开发的理论与实践,这是一份针对1+x Web前端开发技能等级考试的中期练习题目集合。1+x标准旨在衡量和提升学员在Web前端领域的专业技能,确保他们具备企业级...

    web前端期末大作业源码.zip

    【标题】"Web前端期末大作业源码.zip"是一个包含前端开发项目的压缩文件,这个项目很可能是学生在学期末完成的一项课程任务。它涉及到的主要技术包括HTML、CSS和JavaScript,这些都是构建网页和交互式用户体验的核心...

    jQuery前端图片压缩插件.rar

    "jQuery前端图片压缩插件.rar" 提供了一种解决方案,它是一个基于jQuery库的前端图片压缩工具,旨在减小图片文件大小,从而提高网页加载效率。这款插件简单易用,适合快速集成到现有的jQuery项目中。 首先,让我们...

    Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip

    Web前端技术是现代互联网开发的重要组成部分,主要负责构建用户在浏览器中看到和交互的网站界面。这份名为"Web前端技术(期末复习 选填、判断、简答、编程等超全总结).zip"的压缩包文件包含了全面的Web前端学习资源...

    WEB前端开发.pdf

    ### WEB前端开发性能优化知识点详解 #### 一、性能优化 **1. 减少HTTP请求数** - **背景**: 在网页加载过程中,每个图片、CSS文件、JavaScript文件、Flash对象等都会产生一个HTTP请求,这会显著增加网页加载时间...

    1+x 证书 Web 前端开发初级实操考试.zip

    "1+x 证书 Web 前端开发初级实操考试"是一个针对初学者设计的实践考核,旨在检验学习者在Web前端开发领域的基础技能和理解程度。这个考核可能包括HTML、CSS、JavaScript等核心技术的运用,以及对网页布局、响应式...

    移动互联Web前端项目3_using566_web前端_

    在“移动互联Web前端项目3_using566_web前端_”这个主题中,我们主要探讨的是针对移动电子商务的Web前端开发技术。Web前端是构建互联网应用程序的重要组成部分,它负责用户与应用之间的交互,特别是在移动设备上,...

    web前端开发png图片资源包

    这个“web前端开发png图片资源包”包含了多种可能用于前端页面设计的PNG图片,它们可以帮助开发者构建丰富的交互式用户体验。 PNG图片格式有以下几个关键特点: 1. **透明度支持**:PNG支持24位颜色以及一个额外的...

    Web前端期末大作业,旅游网页设计

    在本项目中,"Web前端期末大作业,旅游网页设计"是一个典型的Web开发实践任务,主要涉及前端技术在创建一个以餐饮旅游为主题的网页中的应用。这个任务旨在让学生掌握Web前端开发的基本技能,包括HTML、CSS、...

    web前端-Web前端性能优化的研究与应用.pdf

    前端优化的技术方法包括优先级队列、缓存机制、页面压缩、图片优化、JavaScript 优化等。这些方法可以有效地提升 Web 站点的性能。 知识点六: Ajax 异步工作方式的影响 Ajax 异步工作方式使得浏览器的 2 连接请求...

    web前端开发综合实例

    在IT行业中,Web前端开发是构建互联网应用的重要组成部分,它主要负责用户与应用程序之间的交互界面。本综合实例将深入探讨“响应式页面”这一关键概念,这是现代网页设计的基石,确保网页能在不同设备和屏幕尺寸上...

Global site tag (gtag.js) - Google Analytics