图片优化(Pixel-fitting, 压缩)

昨晚看了一篇关于图片优化的文章 里面提到了一个熟悉的东西 Pixel-fitting

先帖上这一篇文章 http://sixrevisions.com/web-development/advanced-image-optimization/

还有关于 Pixel-fitting 的一篇 http://dcurt.is/pixel-fitting

然后上网查了一下 关于这方面的教程好像不多 所以就自己弄了一个文字版的 有点粗糙 如果哪个步骤不清楚或者不对都可以提出

首先Pixel-fitting 是针对图标的 一些简单的曲直线勾勒出来的东西 这个教程的例子就用我之前自己为自己弄的一个图标

在Ai里打开图标并选中 如果你想对非矢量图标进行操作 就要在Ai里先用钢笔工具勾选 这个方法网上Ai教程也有 我就不多说了

Ctrl + C 复制 到 Ps 中粘贴到一个文件上 为了对比 我粘贴了两个同样大小的 注 粘贴进来的时候一定要选择形状图层

然后就正式开始啦 选中你想要修改的图层 我选中的是右边那个 然后使用 直接选择工具

放大右边的图层 你会看到图标模糊的原因 选中最上面的两个锚点 (注: 被选中的锚点为实心黑)

选中之后 简单的使用方向键 上上下下按几下之后 你就全部都懂了 调整后

把所有的直边调整好之后 再对比一下

你会发现右边看起来锐利很多 而且更加的清晰

图片优化当然不仅仅提高质量 在大小上也有提高

我最常用的两个图片压缩:

Smush  http://www.smushit.com/ysmush.it/

TinyPNG https://tinypng.com/

Smush很强大 尽管很小很小的图片(png) 都总能挤出可以压缩的部分 而且压缩出来之后 即使放到最大看,也和原图几乎一样 (其实我是看不出有什么不同 只是不敢用"完全一样"的字眼而已)

TinyPNG的压缩力更强大 只是有时候压缩出来的放得很大之后 就会与原图有区别 (边缘问题)

所以建议都通过他们处理之后 再对比衡量一下 选择你心仪的那一个

当然如果你有更好的工具 也可以分享出来~

PS: Smush处理之后下载下来是一个解压包 解压就可以得到你的文件 如果你上传的时候文件名为中文 解压得到的文件可能是乱码 改名.后缀 就可以正常显示了

如有错误 欢迎指正 : )

时间: 2024-10-11 10:45:29

图片优化(Pixel-fitting, 压缩)的相关文章

Web性能优化:图片优化

程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://blog.cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片.从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择.到尚未被

图片优化也很重要——seo课程

SEO优化其实早已走入了一个尴尬的灰色地带.算法不断变化升级,许多站长朋友都表只有不断创新,改进方法,你的网站才有可能脱颖而出.今天的seo课程就是要来教大家如何做图片优化.(本文来自于e良师益友网) 世界万物都是有逻辑.有规律可循的.图片优化也不仅仅是在文章中插入一张图片,然后设置关键词搜索就可以了的.它有自身的规律和逻辑,我们不仅要在网页中添加图片满足用户需求,还应通过对图片的一些必要优化设置满足搜索引擎需求,努力提高网站的排名.下面笔者就简单说明一下. "读图时代"告诉你:紧随时

合肥SEO网站的代码优化和图片优化

作者:合肥SEO 合肥seo优化中的网站的代码优化对页面优化的一个重要环节,也是网站优化的基础.代码优化包括:精简代码,头部优化和权重标签,图片优化.一,精简代码主要分下面几种:1)删除页面中的冗余代码和删除页面的垃圾代码,垃圾代码的删除对页面没有任何影响.精简代码可以节约空间,当然主要还是加快客户访问网站的速度,提高用户体验.2)HTML标签转换,这个主要是使用短标签替换在网页中的实现同样效果的长标签.比如用<b>代替<strong>,用<i>代替<em>

图片优化调研之理论篇

前言 内容较多,理论部分比较基础.对于新人而言,从浅入深,比较好理解:对于老手而言,可跳过,可直接看实践部分. 总之,希望对大家有所帮助. 1. 收益 为了提升网站性能,保持网站处于“节食”状态非常重要——确保所有新引入的资源都是最精简的,图像优化就是这样一项工作. 大家不妨猜猜图片流量占总流量的百分比.简单对知名网站中图片在整个页面大小中所占比例做了一个调研. 计算其平均值:44.94%. 不一定绝对精确, 但是非常接近.当然,这里的数据主要以首屏时间段采集数据. 从这个数据可以看出,对于图像

android开发中图片优化步骤

android开发中图片优化方法 1.图片加载方法,方便用户加载图片 /*** * 加载本地图片 * @param context:主运行函数实例 * @param bitAdress:图片地址,一般指向R下的drawable目录 * @return */ public final Bitmap CreatImage(Context context, int bitAdress) { Bitmap bitmaptemp = null; bitmaptemp = BitmapFactory.dec

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

RecyclerView使用 及 滑动时加载图片优化方案

RecyclerView使用 及 滑动时加载图片优化方案 简述 本篇博文主要给大家分享关于RecyclerView控件的使用及通过继承RecyclerView来实现滑动时加载图片的优化方案,也同样能解决防止图片乱序的问题,之前有在网上有看到大神对Android中ListView异步加载图片乱序问题进行过分析,并深入剖析原理后分别给出了3种对应的解决方案:一 .使用findViewWithTag.二.使用弱引用关联.三.使用Volley框架提供的NetworkImageView. 看了之后思索了很

php图片水印添加,压缩,剪切类的封装

php对图片文件的操作主要是利用GD库扩展.当我们频繁利用php对图片进行操作时,会自然封装很多函数,否则会写太多重复的代码.当有很多对图片的相关函数的时候,我们可以考虑将这些函数也整理一下,因而就有了封装成类的想法. 操作图片主要历经四个步骤: 打开图片 操作图片 输出图片 销毁图片 1,3,4三个步骤每次都要写,每次又都差不多.真正需要变通的只有操作图片的这一步骤了.操作图片又往往通过1或多个主要的GD函数来完成. 本文封装类里面的四种方法,文字水印(imagettftext()),图片水印

最新javascript自动按比例显示图片,按比例压缩图片显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ