关于web网站图片优化那点事

平时的爱好喜欢就是写博客,写博客往往会上传很多大的高清图片来衬托文章的友好阅读性,所以,日益积累就会发现后台的文件过多,内存占用过大,如果图片访问量大又会产生服务器的磁盘IO读写缓慢问题、最最最重要的就是对于个人站长来讲,就是访问量缓慢,需要增大网络带宽和流量,还有些需要cdn的配合,要知道,流量is money,cdn is money too!

所以,一般我们会从好几个角度去优化图片,不管从哪儿个地方出发,最终都是一个,在上传图片时候进行在线优化转换之后再上传后台(这种插件很多,很多公司都是这么做的,本章节不做介绍),还有一个就是上传之后的对图片优化,今天这篇文章主要讲解的是后者,共分为3个人群:普通优化、PS基础+深度优化!

本文的目的是将,示例图中的09文件夹中的图片尽可能的优化,减少磁盘占用空间同时不影响正常文章阅读

关于web网站图片优化那点事

普通优化

普通优化,针对没有ps基础的人群,没有时间打理,最简单最偷懒的一种优化方式,直接看这三篇文章即可

直接将09文件夹拖入下面的mini工具中,点击优化即可。

PS基础+深度优化

普通优化虽然能将图片进行压缩,减少空间,但是显然不是我们的目的。接下来就是使用ps来进行图片优化(这个过程非常耗时,个人站长有时间慢慢整理)

一般分为这么几个步骤

  • 对所有图片中没用的地方进行裁剪,只取主要内容进行展示

  • gif动态图片,如果没有太大意义的就转化动态,节省更大空间

  • jpg/jpeg图片,进行保存品质,选着3-5之间即可

  • png图片一般较大,首先转换为索引模式,然后转换jpg图片,jpg和png进行对比,如果png小于jpg大小,就删除jpg,否则就删除png,将jpg重命名为png

关于web网站图片优化那点事

打开09文件夹,发现里面分为gif,jpeg和png3种类型文件。gif只需要判断是否有意义的动态展示,如果没意义的就直接使用静态展示即可,保存成静态图片

JPEG图片

打开PhotoShop工具。将jpeg图片进行存储,裁剪不必要的地方之后,保存缩放大小,比如900宽度,缩放为600的宽度,然后将保存的品质改为3-5之间即可。图片过多可以分批进行PS处理,比如每次处理80张图片,对于PhotoShop的操作,非常建议使用快捷键操作,超级快捷

关于web网站图片优化那点事

快捷键:Ctrl+Alt+I ,改变图片大小

关于web网站图片优化那点事

将图片保存之后,在用jpegMini工具进行压缩一边,替换原有09文件夹的图片即可,这个过程一般能减少原来图片空间的3分之2大小。

PNG图片

png图片有点复杂

第一步:将图片导入在PS中,将其模式转换为索引模式,索引模式能减少一半的大小,且图片依旧清晰;

第二步:批量工具转换为jpeg图片;

第三步:批量jpeg和png图片,然后放在同一个文件夹;

第三步:比较同名的png和jpeg图片大小,如果png小于jpeg就删除jpeg,否则删除png,将jpeg图片后缀名改为png

关于web网站图片优化那点事

使用快捷键:Alt+I,然后按m,然后按i , 关闭当前图片窗口:Ctrl+W

转换工具可以使用格式工厂、或美图看看等工具

美图看看

关于web网站图片优化那点事

格式工厂

关于web网站图片优化那点事

批量压缩

关于web网站图片优化那点事

关于web网站图片优化那点事

最后一步就是比较大小了

通过格式工厂,可以看到有些png转换转换会比原图甚至还要大,所以,我们需要进行对相同文件比较,删除大的,保留小的

关于web网站图片优化那点事

如果你没有编程基础的话,那么就只能一个一个的进行图片比较了,刚开始我也是这么做的

这个过程非常耗时,耗时3个小时差不多完成1000张照片吧,对于没有编程基础的只能这样了

整理了几个小时转换,突然忘了一件事,卧槽,LZ是做编程的,这么一张一张的比较图片大小是不是耻辱感。

于是剩下的图片先放在一边,决定写段代码来自动处理

几分钟后,热腾腾的代码出炉,亲测没有问题,处理1000张图片,大约需要不到3秒钟,杠杠的!

/**
 * 比较png和其他同名文件,如果png小于其他同名文件,删除其他文件,否则删除png,重命名其他文件后缀名为png
 */
public static void main(String[] args) {
	long s = System.currentTimeMillis();
	String path = "D:/test";	// 文件路径
	File file = new File(path);
	File[] subFiles = file.listFiles();
	
	for (File f : subFiles) {
		String name = f.getName();	// 文件名
		String shortName = name.substring(0, name.lastIndexOf("."));	// 不带后缀文件名
		String prefix = name.substring(name.lastIndexOf(".")+1);		// 后缀名
		if (prefix.equals("png")) {
			
			for (File ff : subFiles) {
				String nn = ff.getName();
				String ss = nn.substring(0, nn.lastIndexOf("."));	// 不带后缀文件名
				String pp = nn.substring(nn.lastIndexOf(".")+1);	// 后缀名
				
				// 判断如果png图片小于其他同名文件,那么就删除其他文件
				if (shortName.equals(ss) && !prefix.equals(pp) && f.length() < ff.length()) {
					ff.delete();
					
				}else if(shortName.equals(ss) && !prefix.equals(pp) && f.length() > ff.length()){
					// 删除大的png文件,修改小的其他文件为png文件
					f.delete();

					// 修改其他后缀名为png
					ff.renameTo(new File(ff.getParent() + "/" + nn.substring(0, nn.indexOf("."+pp)) + "."+prefix));
				}
			}
		}
	}
	System.out.println("耗时:"+(System.currentTimeMillis()-s)+"毫秒");
}

这样,针对png的图片处理完成之后,直接替换09文件夹中同名文件即可。

整个步骤下来,70多M的图片空间,仅剩下了24M大小,节省了仅三分之二内存

其他阅读:

写在最后

一般用户不需要花过多细节,只需要使用普通优化步骤就可以了,如果你是一个周末不爱玩游戏的,那就可以来优化图片进行消遣了。

有朋友如果有更好的优化方案,比如PS的批量索引优化等方案,可以直接在下方留言区留言,楼主也会亲自尝试学习,然后更新文章最新内容,欢迎拍砖

未经允许请勿转载:程序喵 » 关于web网站图片优化那点事

点  赞 (3) 打  赏
分享到: