前端切图要选择png和jpg呢?
今天特意验证了一下:
切完图分别保存png24、png8和jpg60、jpg80(60和80表示保存图片时品质选择)后,
然后再压缩图片,压缩图片地址:https://tinypng.com/
图片直接拉进去就可以压缩,压缩完对比一下,没想到png24图片压缩完内存小又清晰;jpg图片反之;
未压缩之前,图片信息,如下:
1.jpg60压缩之后:
jpg60压缩之后内存大小:47.6KB
2.jpg80压缩之后:
jpg80压缩之后的大小:47.5KB
3.png8压缩之后:
png8压缩之后大小:36.5KB
4.png24压缩之后:
png24压缩之后大小:35KB
但也有例外:图片颜色较多的、比较复杂的,压缩之后png24格式内存比较大,举个栗子:
jpg60压缩后大图:
jpg60压缩后大小:76.3KB
png24图片压缩之后:
png24图片压缩之后大小:116KB
综上对比图片颜色单调的png24图片压缩之后内存最小最清晰
原创,转载需要标注出处哦!
前端切图要选择png和jpg呢?的更多相关文章
- 前端切图神器-cutterman
之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...
- 前端切图相关ps技术
标签(空格分隔): 前端切图 复制图层到一个新的ps文件 对于单个图层 1.选中图层 2.CTRL+A全选 3.CTRL+C 4.CTRL+N新建文件,文件大小默认就可以(背景透明也在这个面板设置), ...
- 前端切图实战(PSD设计稿转化为前端)
课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目 ...
- 【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- ps前端切图常用快捷键
一.新建文件:预设-自定:宽度1920,单位像素,高度自定义:分辨率:72像素/英寸:颜色模式:RGB,8位:背景色:透明:可存储预设,下次新建的时候,直接在预设中,选择那个名称,点确定.视图:显示- ...
- web前端切图处理
技巧: 一. 如何在 Retina 屏幕的设备使用更高分辨率的图片 以 MacBook Pro 为例,它的标准分辨率高达 2560 x 1600,但是如果真的以这个分辨率显示网页,网页的有效区域就小的 ...
- 前端切图|点击按钮div变色
<!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta c ...
- 前端切图:CSS实现隐藏滚动条同时又可以滚动
CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...
- 前端切图:一个好看的表格css样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
随机推荐
- Linux Makefile 教程(转)
原文地址:http://blog.csdn.net/liang13664759/article/details/1771246 ------------------------------------ ...
- 怎样给oracle数据库的用户解锁
找到并进入运行窗口:(可以用windows+r快捷键哦)输入sqlplus命令:如图 进入新窗口后使用scott/tiger用户和密码进行登录会发现登录不成功:如图 这时我们可以使用syste ...
- NBU 还原windows ORACLE数据库(FP)
二.基于差异备份恢复7月20日星期四早上8:30分数据1.查询所需要的归档日志(因为要返回20号刂8:30分的数据,所以控制 文件要晚于这个点,即取21号凌晨2点备份的控制文件) bplist -C ...
- static变量和static函数
在C语言编程中,static的一个作用是信息屏蔽! 比方说,你自己定义了一个文件 -- 该文件中有一系列的函数以及变量的声明和定义! 你希望该文件中的一些函数和变量只能被该文件中的函数使用,那么,你可 ...
- sql添加/移除约束
唯一:ALTER TABLE TableName ADD CONSTRAINT UQ_NickName UNIQUE(NickName) 主键:ALTER TABLE TableName ADD CO ...
- 【git使用】Failed to connect to 127.0.0.1 port 1080: Connection refused
查询是否使用代理:git config --global http.proxy 取消代理:git config --global --unset http.proxy
- DataStage 三、配置ODBC
DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 1 配置ODBC需要了解的基础知识 配置O ...
- Mac完整卸载Android Studio的方法
1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/Pr ...
- Android Studio修改默认Activity继承AppCompatActivity
在Android Studio中新建Activity默认继承AppCompatActivity,感觉这点十分不爽,找了很久,终于发现在android Studio安装目录下有个模板文件,修改其中的参数 ...
- Oracle学习笔记(八)
十一.子查询 1.子查询概述 学习子查询的原因 事例:查询工资比SCOTT高的员工信息 思路:1.scott的工资 select sal from emp where ename='SCOTT'; 2 ...