图片压缩

GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理

有些话、适合烂在心里 提交于 2019-12-20 18:16:34
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>   GIF / PNG /JPG/ WEBP / APNG 都是属于 位图 (位图 ,务必区别于 矢量图 );  GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高, png 和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复, webp 图片格式现在还不普及: GIF(Graphics Interchange Format)   GIF 图形交换格式 是一种位图图形文件格式,以8位色(即256种颜色)重现真彩色的图像。 它实际上是一种压缩文档, 采用LZW压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一。 优点   1. 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。   2. 可插入多帧,从而实现动画效果。   3. 可设置透明色以产生对象浮现于背景之上的效果。 缺点   由于采用了8位压缩,最多只能处理256种颜色(2的8次方),故不宜应用于真彩图像。 PNG(Portable Network Graphics)   便携式网络图片(Portable Network Graphics),简称PNG

PNG图片压缩原理

怎甘沉沦 提交于 2019-12-16 03:00:40
PNG图片压缩原理 png的图片我们每天都在用,可是png到底是什么,它的压缩原理是什么?很好,接下来我将会给大家一一阐述。 什么是PNG? PNG的全称叫做便携式网络图型(Portable Network Graphics)是目前最流行的网络传输和展示的图片格式,原因有如下几点: 无损压缩 :PNG图片采取了基于LZ77派生算法对文件进行压缩,使得它压缩比率更高,生成的文件体积更小,并且不损失数据。 体积小 :它利用特殊的编码方法标记重复出现的数据,使得同样格式的图片体积更小。网络通讯中因受宽带制约,在保证图片清晰、逼真的前提下,优先选择PNG格式的图片。 支持透明效果 :PNG支持对原图像定义256个透明层次,使得图像的边缘能与任何背景平滑融合,这种功能是GIF和JPEG没有的。 PNG类型 PNG图片主要有三个类型,分别为PNG 8/PNG 24/PNG 32。 PNG8 :PNG 8中的8,其实指的是 8bits 相当于用2^8(2的8次方)大小来存储一张图片的颜色种类,2的8次方等于256,也就是说PNG 8能存储256种颜色,一张图如果颜色种类很少,将它设置成PNG 8的图片类型是非常合适的。 PNG24 :PNG 24中的24,相当于3乘以8等于24,就是用三个8bits分别取表示R(红)、G(绿)、B(蓝)。R(0-255),G(0-255)、B(0-255)

图片压缩存储空间

允我心安 提交于 2019-12-13 16:06:41
/** * @Title: compressPicByQuality * @Description: 压缩图片,通过压缩图片质量,保持原图大小 * @param quality:0-1 * @return byte[] * @throws */ public static byte[] compressPicByQuality(File file, float quality) { byte[] inByte = null; try { BufferedImage image = ImageIO.read(file); // 如果图片空,返回空 if (image == null) { return null; } // 得到指定Format图片的writer Iterator<ImageWriter> iter = ImageIO .getImageWritersByFormatName("jpeg");// 得到迭代器 ImageWriter writer = (ImageWriter) iter.next(); // 得到writer // 得到指定writer的输出参数设置(ImageWriteParam ) ImageWriteParam iwp = writer.getDefaultWriteParam(); iwp.setCompressionMode

js 图片压缩和上传(base64转file)

随声附和 提交于 2019-12-12 12:48:26
1 // 文件上传成功 2 function compress(){ 3   var file = document.getElementById('file_cw').files[0]; 4   // 压缩图片需要的一些元素和对象 5   var reader = new FileReader(), 6   //创建一个img对象 7   img = new Image(); 8   reader.readAsDataURL(file); 9   // 文件base64化,以便获知图片原始尺寸 10   reader.onload = function(e) { 11     img.src = e.target.result; 12   }; 13 14 15   // base64地址图片加载完毕后执行 16   img.onload = function () { 17     // 缩放图片需要的canvas(也可以在DOM中直接定义canvas标签,这样就能把压缩完的图片不转base64也能直接显示出来) 18     var canvas = document.createElement('canvas'); 19     var context = canvas.getContext('2d'); 20 21     // 图片原始尺寸 22     var

提高网页的加载速度浅析

谁说胖子不能爱 提交于 2019-12-10 14:15:01
加快网页的加载速度,无疑是提高用户体验的一个很好的方法。但是这里我们如何提高网页的加载速度呢?这里我总结了几点。 当然,这也是我第一天上班来的第一个任务。。。 1、使用良好的结构 比如说XHTML具有很大的优势,至少你的页面会更加的符合标准!但是他大量的使用了标记(<start> , <end>等),而这就意味着浏览器需要下载更多的代码,所以尝试在你的页面中使用较少的XHTML,减少页面的大小。 2、尽量减少HTTP的请求次数 终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢?这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。 合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法,如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改,这可能会相对麻烦点,但即便如此也要把这个方法作为改善页面性能的重要一步。 3、优化网页图片文件 你的网页一定有图片,加载一个网页往往图片的总尺寸是最大的,特别是那些颜色丰富的背景图片和大副广告图片

完美在线无损图片压缩-Web Resizer

柔情痞子 提交于 2019-12-09 14:36:38
完美在线无损图片压缩-Web Resizer 42,761 ℃ 13条回复 ←点击评分,有趣指数: 4.50 星 此网站属专业网站,一般人用不上,比较适合站长、平面设计、网页设计使用,但这个网站使用起来就非常简单了,主要功能就是 在不损伤图片质量的情况下将图片体积缩小 ,专业术语叫无损图片压缩。支持GIF、JPG、PNG图片格式,同时还可以调整图片大小,并提供旋转、增加亮度、边框等等效果的设置。收藏起来,我保证,一定有那么一天你会用到它。。。 传送门 http://www.webresizer.com/ 方法 进入网站后,点击红色的resize photos now现在调整照片,上传图片(最大5M),然后就可以设置选项,主要是 Image quality: 压缩质量,数值越小图片越小质量越不好,自行选择。选好后,点击apply changes应用修改,满意的话可以点击download this image下载图片,搞定。。。 同类型网站,留着备用 PunyPNG http://www.punypng.com/ 看名字就应该知道,这个网站的长项是压缩PNG格式的图片,当然,同时也支持JPG、GIF图片压缩。。。 色彩笔 http://www.secaibi.com/ 国内站长的作品,支持批量处理,很方便。同时还有其它小工具!(站长色彩笔自荐) 后语

android图片压缩的3种方法实例

人盡茶涼 提交于 2019-12-07 14:22:52
android图片压缩的3种方法实例 发布:shangke 字体:[ 增加 减小 ] 类型:转载 这篇文章介绍了android图片压缩的3种方法实例,有需要的朋友可以参考一下 android 图片压缩方法: 第一:质量压缩法: 复制代码 代码如下: private Bitmap compressImage(Bitmap image) { ByteArrayOutputStream baos = new ByteArrayOutputStream(); image.compress(Bitmap.CompressFormat.JPEG, 100, baos);//质量压缩方法,这里100表示不压缩,把压缩后的数据存放到baos中 int options = 100; while ( baos.toByteArray().length / 1024>100) { //循环判断如果压缩后图片是否大于100kb,大于继续压缩 baos.reset();//重置baos即清空baos options -= 10;//每次都减少10 image.compress(Bitmap.CompressFormat.JPEG, options, baos);//这里压缩options%,把压缩后的数据存放到baos中 } ByteArrayInputStream isBm = new

批量图片压缩工具

北城余情 提交于 2019-12-06 06:58:58
针对移动端网络图片加载缓慢,网上又缺少批量压缩图片的工具,于是自己开发了一个,分享出来,希望能给大家带来帮助。 工具:vs2017 创建项目 windowsform 文件压缩方法 /// <summary> /// 获取缩略图 /// </summary> /// <param name="bitmap"></param> /// <param name="width"></param> /// <returns></returns> public static Image GetThumbnailImageByte(Image bitmap, int width) { System.Drawing.Image img = bitmap.Clone() as Image; if (bitmap.RawFormat == System.Drawing.Imaging.ImageFormat.Gif) { #region gif动态图缩放 //不够100*100的不缩放 if (img.Width > width) { System.IO.MemoryStream stream = new System.IO.MemoryStream(); var height = (img.Height * width) / img.Width; //新图第一帧 Image new_img =

js 实现图片压缩

♀尐吖头ヾ 提交于 2019-12-05 19:14:35
function compressImg(file) { // 创建Canvas对象(画布) let canvas = document.createElement('canvas') // 获取对应的CanvasRenderingContext2D对象(画笔) let context = canvas.getContext('2d') // 创建新的图片对象 let img = new Image() // 指定图片的DataURL(图片的base64编码数据) img.src = file.content //画布宽度 let width = 512 // 监听浏览器加载图片完成进行绘制 img.onload = () => { //画布大小按照图片的比例生成 let height = width / (img.naturalWidth / img.naturalHeight) // 指定canvas画布大小,该大小为最后生成图片的大小 canvas.width = width canvas.height = height context.drawImage(img, 0, 0, canvas.width, canvas.height) // 将绘制完成的图片重新转化为base64编码,file.type为图片类型,0.92为默认压缩质量 //返回压缩后的文件 return

HTML5 实现手机拍照上传

只谈情不闲聊 提交于 2019-12-05 07:41:13
背景:移动端H5项目,需要实现调用手机拍照,并将图片压缩上传功能。 页面样式: 上传图片有原生的方法<input type="file" accept="image/*">,如果只想要拍照上传,不希望用户选择图片上传,可以通过添加capture属性,该属性值有camcorder/microphone/camera...,此处选择camera。PS:该属性存在浏览器兼容性问题,不是所有的浏览器都支持。 <input type="file" accept="image/*" capture="camera" > 因为原生file样式不满足要求,需要进行相应的处理,此时使用定位,在input上面放置我们想要的页面效果。然后当点击上面的元素,就可以触发我们的input进行图片上传。此时的问题是:当点击input上面的元素,需要事件穿透,即相当于点击input。则借助于css3新属性pointer-events。 //使用cursor进行事件穿透,来阻止元素成为鼠标事件的目标 button{ cursor:pointer; pointer-events:none; } ----此时图片上传的样式已经处理好了---- 代码片段: <style > *{ padding: 0; margin: 0; } .wrapper{ width: 320px; height: 50px; margin: