图片优化工具

lordharrd 发布于2019-05-29 17:48 / 698人阅读

摘要：下面就介绍一些这样的工具吧当然，并不是所有人都使用，那么我们就来看一下独立的图片优化工具，你可以根据自己的需要来选择。

在网页中运用图片的成本并非新的问题，只是我们现在把焦点放在了js脚本对页面加载的阻碍影响当做了罪魁祸首。
Mike Taylor 曾经在throneofjs大会上关于前端性能优化上提出的观点：

The solution to worrying about JS lib/framework size: include one less .jpg on your site. #throneofjs.
11:05 PM - 22 Jul 2012

在进行图片优化之前，我们首先应该能够选择合适的图片类型，这样可以适当地减少图片的体积。这也是能够后续优化的前提。选择合适的图片类型最主要的就是考虑图片里面的色彩多寡，其中有一些经验可以借鉴：

对于照片类型的图片，因为它里面的颜色比较多，一般要选择JPG格式，图片品质在80以上就可以保真

对于图标，色彩范围一般都在256位一下，选择gif格式比较合适

如果对图片有背景透明的要求，应该选择PNG格式

对于图片优化的最优方式，就是能够尽可能地实现自动化，这样就可以避免我们分别对每张图片进行多带带处理。

下面就介绍一些这样的工具吧！

Grunt Tasks

Recompressing JPG/PNG/GIF to save on bytes:

OptiPNG/jpegtran/gifsicle: grunt-contrib-imagemin

ImageOptim-CLI companion: grunt-imageoptim

Convert to WebP: grunt-webp

Spriting to reduce HTTP requests:

grunt-spritefiles

grunt-montage

Prescaling (normalization) to avoid excessive image resize/decode work:

grunt-imageNormalize

grunt-image-resize

Responsive image generation/handling:

Generate multi-resolution images: grunt-responsive-images

Clowncar technique: grunt-clowncar

Inline images as data URIs (careful as costly on mobile):

grunt-image-embed

当然，并不是所有人都使用grunt，那么我们就来看一下独立的图片优化工具，你可以根据自己的需要来选择。

PNG

pngcrush

optipng

advpng

For Windows, see pngout and pngwolf

zopfli-png and Pngnq S9 by Kornel

PNG Quantizer

pngquant ~ recommended

pngnq

JPG

jpegmini

jpegcrush

jpegoptim

jpgtran

GIF

gifsicle.此工具NPM 安装模块https://github.com/yeoman/node-gifsicle

idc机房托管专线服务优化工具图片优化云主机优化工具 cdn图片优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/8962.html

Java Web 前端高性能优化（一）

摘要：一引言前端的高性能部分，主要是指减少请求数减少传输的数据以及提高用户体验，在这个部分，图片的优化显得至关重要。 Web 发展的速度让许多人叹为观止，层出不穷的组件、技术，只需要合理的组合、恰当的设置，就可以让 Web 程序性能不断飞跃。所有 Web 的思想都是通用的，它们也可以运用到 Java Web。这一系列的文章，主要讲解网页前端性能优化，是与用户最直接接触的。事实证明，与其消耗...

lemon 2019-08-14 12:53 评论0 收藏0
<转载>图片流量节省60%：基于CDN的sharpP自适应图片技术实践

摘要：开启验证上传一张新图片，使用手安卓版本访问已支持域名的图片，如果请求带了，检查返回图片格式是否为如果旧的图片未按预期返回，返回了或原图可能是结点缓存，正常天后过期回源则会返回图片。对于图片较多的网站，本文结合具体案例给出了如何基于CDN的sharpP自适应图片无痛接入方案，据统计效果可在原图基础上节省60%-75%的流量。作者：陈忱出处：腾云阁文章目前移动端运营素材大部分依赖图...

JerryZou 2019-06-28 10:53 评论0 收藏0
Google I/O 2016 笔记之图像压缩

摘要：写在前面开发中的图像压缩是一个很重要的部分。而这篇文章会让我们从另外一个角度来认识平台下的图像压缩和优化。所以，它是你图像压缩和优化的首选，尽可能的去使用吧。写在前面 Android开发中的图像压缩是一个很重要的部分。而这篇文章会让我们从另外一个角度来认识Android平台下的图像压缩和优化。这篇文章更适合和设计师一起来看，所以，如果你和你的设计师是好基友的话，不妨叫上他，倒两杯咖...

BWrong 2019-08-14 14:19 评论0 收藏0