精华内容
下载资源
问答
  • 之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证... 不同图片格式常用的业务场景 2. jpg 图片的解析过程 1.

    本文主要介绍了 “前端性能优化” 图片相关内容, 介绍了各种开发中常用的图片格式, 以及各种图片对性能的影响 。


    废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

    性能优化 - - - 上篇文章: 性能优化: 资源合并与压缩 – 文件合并(CSS与JavaScript 文件合并提升前端性能)

    性能优化 - - - 下篇文章: 性能优化: 图片的相关优化 – 优化项 : 图片压缩


    1. 图片的相关优化 – 概述
      1. jpg 图片的解析过程
    
      2. png8/png24/png32 之间的区别
    
      3. 不同图片格式常用的业务场景
      
    

    2. jpg 图片的解析过程
     1. 对 jpg/jpeg 图片 compression(压缩) / Decompression(解压) 的整个过程 (有图例)2. jpeg 在我们的使用过程中实际上使用的是 jepg compression image data (JEPG压缩图像数据) 的压缩方式的图片数据 。
    
     3. 对于原图片数据首先要进行颜色空间的转换, 将它从 rgb 颜色空间转到其它的颜色空间;
        1. 然后进行重采样区分 高屏与低屏 的颜色变换;
        2. 然后再进行 DCT 的过程, 也就是高屏的颜色 变换压缩;
        3. 然后对我们的数据进行一个量化,
        4. 再进行一个 Encoding (编码);
        4. 最后得到一个 jepg compression image data (JEPG压缩图像数据)4. jpg 这边它比较大的特点是: 有损压缩 。
        1. 有损压缩: 实际上他存储的数据和图片, 与真实的原生图片的有数据是有差异的 。
        2. 很多时候这些损失的数据在我们 采样压缩 的过程中不是很重要, 我们的肉眼一般是识别不出来的, 所以我们这部分损失丢弃的数据在我们使用的时候还是 OK 的 。
        
    

    图片示例
    O-1.png

    3. png8/png24/png32 之间的区别
     1. png8 -- 256+ 支持透明
        1. png8 之所以是 256, 就是因为 png 它在内部的文件格式中他有一个调色板, 这个调色板实际上是建立了颜色的索引, 它会建立一个索引表, 256种颜色, 这个索引表实际上就支持 2^8 的索引 。
        2. png8 格式的图片颜色只能在 256 种颜色中出, 所以它颜色的支持度会比较少, 不会有那么丰富的色彩, 但是相应的这种格式的图片大小会小很多 。
    
     2. png24 -- 2^24+ 不支持透明
    
     3. png32 -- 2^24+ 支持透明
    
     4. 决定我们使用 png 的那种格式, 是需要我们的具体业务场景的, 即图片需要的色彩丰富度 。
    
     5. png 图片是无损压缩的 。
     
    

    4. 不同图片格式常用的业务场景
     1. 特点:
        1. jpg 有损压缩, 压缩率高, 不支持透明 。
            1. jpg 相对 png 来说它的压缩率是更高的 。
        2. png 支持透明, 浏览器兼容好 。
        3. webp 压缩程度更好, 在 ios webview 有兼容性问题 。
            1. 2010 年谷歌提出来的一种图片格式; 在安卓中的支持比较好 。
        4. svg 矢量图, 代码内嵌, 相对较小, 图片样式相对简单的场景 。
            1. svg 矢量图实际上就是使用 svg 标签, 在我们的 html 中进行相关图片的绘制 。
            2. 质量比较好, 不会随着图片缩放出现马赛克的问题; 代码内嵌在 html 中, 相对会比较小一些 。
            3. 库的支持: RaphaelJS / Polygon
    
     2. 场景:
        1. jpg  -- 大部分不需要透明图片的业务场景 。
        2. png  -- 大部分需要透明图片的业务场景 。
        3. webp -- 安卓全部 。
        4. svg矢量图 -- 图片样式相对简单的业务场景 。
        
    

    之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端性能优化” 的相关专栏; 不积跬步,无以至千里, 戒焦戒躁 。

    如果对你有所帮助,喜欢的可以点个关注, 必然回关; 文章会持续打磨 。
    有什么想要了解的前端知识吗? 可以评论区留言, 会及时跟进分享所提内容 。
    整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教,本人会及时更改 (本文原创, 如需转载,请注明出处) 。
    展开全文
  • 【kimol君的无聊小发明】—用python写图片格式批量处理工具前言一、思路分析二、调整尺寸三、调整大小四、整合代码写在最后 前言 某个夜深人静的夜晚,夜微凉风微扬,月光照进我的书房~ 当我打开文件夹以回顾往事之...

    【kimol君的无聊小发明】—用python写图片格式批量处理工具

    前言

    某个夜深人静的夜晚,夜微凉风微扬,月光照进我的书房~
    当我打开文件夹以回顾往事之余,惊现许多看似杂乱的无聊代码。我拍腿正坐,一个想法油然而生:“生活已然很无聊,不如再无聊些叭”。
    于是,我决定开一个专题,便称之为kimol君的无聊小发明
    妙…啊~~~

    就在昨天,正当我在刺激战场厮杀时,“叮叮叮”,微信来消息了。我心想:“这是肾马情况?” 我打开一看,原来是小姐姐让我帮忙处理照片~ 乐于助人的我(小声嘀咕:“我信你个鬼,坏得很”),自然是立马放下游戏,奔向助人的前线,于是:
    在这里插入图片描述
    没有错~ 面对来自小姐姐的任务,kimol君自是当仍不让,打开美图秀秀,嗖嗖两下便搞定了,成功收获两颗小爱心❤️❤️~

    正当我沾沾自喜的时候,小姐姐又发来一个压缩包,说是同学和闺蜜的,让我帮忙一起弄一下。我打开一看:
    在这里插入图片描述
    37张照片,我能怎么办? 我也很绝望呀…

    毕竟有一颗炙热助人的心(画外音:“毕竟是小姐姐让帮忙”),不可能放着不管,但总不能一张一张的调叭,看来只能写一个小工具来批量处理了。

    一、思路分析

    其实,照片处理要求很简单,主要是两个方面:一个是调整图片尺寸(即宽x高),另一个是调整图片的大小(即压缩)。为了实现这两个功能,利用python中的PIL库即可,其安装方法如下:

    pip install pillow
    

    说明:PIL官方版不支持python3,不过非官方pillow可作为其替代品。
    导入相关的库:

    from PIL import Image
    

    读取图片:

    image = Image.open('xxx.jpg')
    

    利用resize()函数即可对图片的尺寸进行调整:

    image = image.resize((width, height))
    

    其中width和height分别为预期调整的图片宽和图片高。

    利用save()函数即可对图片进行压缩,进而调整其大小:

    image.save('out.jpg', quality=60)
    

    其中quality表示压缩的比例。

    二、调整尺寸

    首先一个函数,用于调整图片的尺寸:

    def resize(inImage, width, height, inplace=False):
        '''
        将图片调整为指定尺寸
        ----------------------------
        参数 inImage:需要处理的图片地址
        参数   width:预期图片宽度
        参数  height:预期图片高度
        参数 inplace:是否覆盖原文件
        ----------------------------
        返回 outImage:压缩后的图片地址
        '''
        if not inplace: # 如果不覆盖
            outImage = '%s-out.%s'%(inImage.split('.')[0],inImage.split('.')[1])
        else:
            outImage = inImage
        image = Image.open(inImage)
        image = image.resize((width, height))
        image.save(outImage)
        print('"%s"调整成功!(尺寸:%dx%d)'%(inImage, width, height))
        return outImage
    

    三、调整大小

    首先定义一个函数,用于获取图片的文件大小:

    def get_size(fileName):
        '''
        获取图片文件的大小(KB)
        --------------------
        参数 fileName: 文件名
        --------------------
        返回 fileSize:文件的大小
        '''
        fileSize = os.path.getsize(fileName)
        fileSize /= 1024 # 将单位转为KB
        return fileSize
    

    然后,通过不断调整压缩比率quality,来使得图片到达指定的大小,具体过程如下:

    def compress(inImage, targetSize, step=5, quality=75, inplace=False):
        '''
        将图片压缩到指定的大小
        -------------------------------
        参数    inImage:需要处理的图片地址
        参数 targetSize:预期压缩的大小
        参数       step:每次迭代的压缩比
        参数    quality:初始压缩比
        参数    inplace:是否覆盖原文件
        -------------------------------
        返回 outImage:压缩后的图片地址
        '''
        if not inplace: # 如果不覆盖
            outImage = '%s-out.%s'%(inImage.split('.')[0], inImage.split('.')[1])
        else:
            outImage = inImage
        fileSize = get_size(inImage)
        while fileSize > targetSize:
            image = Image.open(inImage)
            image.save('temp.jpg', quality=quality)
            fileSize = get_size('temp.jpg')
            quality -= step # 调整压缩比
            if quality < 0:
                print('"%s"压缩失败!(请调整step)'%inImage)
                return 
        if os.path.exists('temp.jpg'):
            copyfile('temp.jpg',outImage)
            os.remove('temp.jpg') # 移处临时文件
        print('"%s"压缩成功!(大小:%.2fKB)'%(inImage, fileSize))
        return outImage
    

    四、整合代码

    将resize()和compress()两个函数整合到一起:

    def adjust(inImage, width, height, targetSize, inplace=False):
        '''
        将图片调整为指定格式(包括尺寸及大小)
        -------------------------------
        参数    inImage:需要处理的图片地址
        参数      width:预期图片宽度
        参数     height:预期图片高度
        参数 targetSize:预期压缩的大小
        参数    inplace:是否覆盖原文件
        -------------------------------
        返回 outImage:调整后的图片地址
        '''
        if not inplace: # 如果不覆盖
            outImage = '%s-out.%s'%(inImage.split('.')[0],inImage.split('.')[1])
        else:
            outImage = inImage
        resize(inImage, width, height, inplace=inplace)
        compress(outImage, targetSize, inplace=True)
        return outImage
    

    调用方法如下:

    if __name__ == '__main__':
        adjust('xxx.jpg', 600, 800, 100)
    

    随后,通过写一个循环,将压缩包里的所有图片进行处理,便得到了预期的格式。
    在这里插入图片描述

    写在最后

    其实,这个小工具还有许多可以完善的地方,比如针对压缩方式、图片质量、效率等等都能做一些优化。此外,当然也可以考虑做一个GUI以更加方便的操作。感兴趣的小伙伴,可以试试哦,没准哪天就有小姐姐找上门了呢~😋

    我是kimol君,咋们下次再会~
    在这里插入图片描述
    创作不易,大侠请留步… 动起可爱的双手,来个赞再走呗 (๑◕ܫ←๑)

    展开全文
  • base64编码转图片格式

    万次阅读 2020-12-31 15:42:34
    base64编码转图片格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...

    base64编码转图片格式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <img src="data:image/png;base64,XXX" alt="">
    </body>
    </html>
    

    备注:文中XXX是放置图片编码的地方

    展开全文
  • Java修改图片格式

    千次阅读 2019-03-13 10:21:27
    Java修改图片格式 Java修改图片格式,支持bmp|gif|jpg|jpeg|png之间的转换 工具代码 /** * 修改原图的文件格式 * @param srcPath 原图路径 * @param destPath 新图路径 * @param formatName 图片格式,...

    Java修改图片格式

    Java修改图片格式,支持bmp|gif|jpg|jpeg|png之间的转换

    工具代码

    /**
    	 * 修改原图的文件格式
    	 * @param srcPath 原图路径
    	 * @param destPath 新图路径
    	 * @param formatName 图片格式,支持bmp|gif|jpg|jpeg|png
    	 * @return
    	 */
    	public static boolean modifyImageFormat(String srcPath, String destPath, String formatName) {
    		boolean isSuccess = false;
    		InputStream fis = null;
    		try {
    			fis = new FileInputStream(srcPath); 
    			BufferedImage bufferedImg = ImageIO.read(fis);
    			isSuccess = ImageIO.write(bufferedImg, formatName, new File(destPath));
    		} catch (FileNotFoundException e) {
    			e.printStackTrace();
    		} catch (IOException e) {
    			e.printStackTrace();
    		} finally {
    			if (fis != null) {
    				try {
    					fis.close();
    				} catch (IOException e) {
    					e.printStackTrace();
    				}
    			}
    		}
    		return isSuccess;
    	}

    测试代码

    /**
    	 * 测试修改图片格式
    	 * @throws FileNotFoundException
    	 */
    	@Test
    	public void testModifyImageFormat() throws FileNotFoundException {
    		String imageName = "java_coffee.jpg";
    		String srcPath = IMAGE_PATH + imageName;
    		
    		imageName = "java_coffee_midify.gif";
    		String destPath = IMAGE_PATH + imageName;
    		Assert.assertTrue(ImageUtil.modifyImageFormat(srcPath, destPath, "gif"));
    		
    		Assert.assertEquals(ImageUtil.getImageType(new File(destPath)),  "gif");
    	}

     完整源码:https://github.com/ConstXiong/xtools

     


    【Java面试题与答案】整理推荐

     

    展开全文
  • android图片格式

    千次阅读 2018-03-09 15:44:27
    android图片格式 * 目前移动端Android平台原生支持的图片格式主要有:JPEG、PNG、GIF、BMP和WebP(自从android4.0开始支持),但是在Android应用开发中能够使用的编解码格式只有其中的三种: JPEG、PNG、WebP ...
  • Python代码:批量将BMP图片格式转换为JPG图片格式,即BMP转JPG格式。
  • 判断文件是否为图片格式

    千次阅读 2019-03-07 19:09:10
    判断文件是否为图片格式 原理:1、使用JDK类库解析文件数据,如果能解析成功,获得图片长宽,即为正确的图片格式 2、解析文件头信息,判断图片类型 工具代码 /** * 判断文件后缀是否为图片文件格式,bmp|...
  • js上传图片之前验证图片格式,同时实现预览,代码很简单,希望大家提出宝贵的意见。
  • 各种图片格式的图片清晰程度排序

    千次阅读 2019-11-07 11:53:30
    各种图片格式清晰程度排序图片存储格式的区别jpg和jpegpng和bmp和tiffeps和ai和cdr合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格...
  • Java-图片格式

    千次阅读 2016-12-02 23:26:29
    Java图片格式这两天在处理网络图片数据时,需要对不同格式的图片采用不用的处理办法,这就需要掌握图片的格式识别。结合这两天的学习内容,对其进行总结,以备将来不是之需。通过 url常见的图片格式有jpg(jpeg),...
  • csv格式转图片格式]

    千次阅读 2019-07-18 16:07:11
    fer2013csv格式转图片格式](https://blog.csdn.net/qq_38279908/article/details/89952461)
  • 如何将图片格式转换为ico格式?

    千次阅读 2019-09-10 13:19:34
    将图像格式更改为ico格式,作为移动装置盘符图标、公司网页标志等,是一种特殊的图片格式。下面介绍用windows自带画图板,更改图片格式为ico格式的方法,只要画图板能打开该格式图片,就能实现格式转换。 首先在...
  • python实现pdf格式转换图片格式

    万次阅读 2018-11-05 16:14:15
    使用python代码实现pdf转换图片格式 核心代码: import io from wand.image import Image from wand.color import Color from PyPDF2 import PdfFileReader, PdfFileWriter memo = {} def getPdfReader...
  • bmp图片格式详解

    万次阅读 多人点赞 2017-09-29 15:51:07
    bmp图片格式详解1. BMP文件简介BMP(Bitmap-File)图形文件是Windows采用的图形文件格式,在Windows环境下运行的所有图象处理软件都支持BMP图象文件格式。Windows系统内部各图像绘制操作都是以BMP为基础的。windows ...
  • 图片格式WEBP全面解析

    万次阅读 2018-03-03 23:07:24
    前言 不管是 PC 还是移动端,图片一直是流量大头,...但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致, 若想改变现状开辟新局面,便要有釜底抽薪的胆量和气魄,而 Google 给了我们一个新选择...
  • 使用python将图片格式转换为ico格式

    千次阅读 2018-07-28 15:33:36
    因为python打包的时候需要用到ico图片格式,网上看好的图片又没有ico,于是自己寻找了一下python转换图片格式的方法,彻底解决这个问题,以后就可以自己轻松实现转化了,代码如下: """ Author:...
  • 如何将图片格式转换为ico格式

    千次阅读 2019-09-25 23:44:32
    很多时候我们需要用到ico格式的图片,网上看好的图片又没有ico格式的,于是自己就写了段python3的代码用于解决转换图片格式的问题。不会跑代码怎么办?放心,我也打包好了应用程序,双击就可以直接运行了。 2. 代码 ...
  • 因此我在这里将R语言 生成图片 存储图片 存储图片格式 存储位置的方式做一个汇总介绍,一同与大家分享。 有其他方法的朋友,可以接着帖子往下写。大家一起交流学习 第一种png格式 png(file="myplot.png", bg=...
  • python 将webp的图片格式转换为jpg格式

    千次阅读 2019-08-19 20:33:35
    主要是因为今天爬取一个网站【漫画柜】,然后图片格式读取字节下载下来不能用画图什么的打开,然后下载后缀为webp可以在浏览器中打开,但是如何下载弄成为jpg或者png格式的呐,然后一顿搜索。。。最终找到了一个博主...
  • 通过谷歌浏览器将当前页面保存为图片格式

    千次阅读 多人点赞 2020-10-08 21:48:47
    打开你需要保存为图片格式的页面,按F12打开控制台 在控制台按ctrl+shift+p然后出现输入框,输入full,然后回车 然后它会将当前网页转换为png图片格式,然后下载到谷歌的默认存储位置 转换成功: ...
  • latex如何插入图片格式

    千次阅读 2019-06-27 21:51:15
    latex如何插入图片格式 latex排版之插入图片: 在排版图片之前,个人认为不管用不用到,引入下面两个包: \usepackage{graphicx} \usepackage{subfigure} (1)插入单个图片,图片格式为png \begin{figure}[h] \...
  • JAVA 万能图片格式转换

    千次阅读 2017-04-10 18:01:28
    JAVA 图片格式转换器,Java图片格式转换
  • PGM图片格式与代码

    万次阅读 2014-10-26 17:32:30
    这两天在搞神经网络,里面的一个人脸数据库的图片格式是PGM,其实之前早就知道了这个图片格式,但是没去深究这个图片格式的数据到底是什么安排的。搜索了下百度百科,发现介绍的真是简单,下面就自己来系统地整理...
  • 前端常见图片格式整理

    千次阅读 2016-06-26 22:30:32
    前端常见图片格式整理
  • # 将Texture格式图片对象转换为numpy def texture_to_numpy(self,data): image=numpy.asarray(bytearray(data.pixels), dtype='uint8').reshape((data.height,data.width,4)) r_chanel=numpy.copy(image...
  • //图片格式 const isJPG = file.type === 'image/jpg' || file.type === 'image/png'; //图片大小 const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传图片只能为jpg或...
  • 图片格式大全

    2014-06-20 16:36:43
    收集的各种格式图片:(包含以下格式) 1bmp.bmp 2pcx.pcx 3tiff.tiff 4gif.gif 5jpg.jpg 6tag.tga 7exif.jpg 9svg.svg 10psd.psd 11crr.CR2 12pcd.pcd 13dxf.dxf 15eps.eps 16ai.ai 17png.png 18hdr.hdr 19raw....
  • png、jpg图片格式的区别及

    万次阅读 2019-04-15 11:17:08
    为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法。 除此之外,我们在平时工作中...
  • Linux下PDF转图片格式

    千次阅读 2018-08-23 13:39:59
    最近有需要将PDF文件转成图片格式来使用,自学了一下,在这里记录备忘。 用到的工具就是ImageMagick linux下的安装命令:(我的系统版本是Fedora28) # sudo dnf install ImageMagick 安装好之后通过查看版本...
  • eps、emf等图片格式转换

    万次阅读 2018-01-19 16:56:21
    1.将图片格式转化为eps的方法:在图片的目录,按住shift+鼠标右键,选择“在此处打开命令窗口”的选项,在该cmd输入bmeps -c image1.jpg image2.eps其中-c是使图片彩色输出,其中image1为原图,image2为所要输出的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 865,781
精华内容 346,312
关键字:

图片的格式