前端切图要选择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"> ...
随机推荐
- CPU GPU FPU TPU 及厂商
1,AMD 既做CPU又做显卡2,Inter 全球最大的CPU厂商,GPU,FPGA3,NVIDA 人工智能起家的公司,且一直在做,显卡最出名,CUDA让N卡胜了AMD CPU上 AMD - Inte ...
- 在Eclipse中创建Maven版的Web工程
步骤: 1.第一步 2.第二步 3.第三步 4.第四步 选中项目,右键在弹出的对话框中选择properties 5.第五步 6.第六步
- Golang之函数练习
小例题: package main import "fmt" /* 函数练习, 可变参数使用 写一个函数add 支持1个或多个int相加,并返回相加结果 写一个函数concat,支 ...
- 电脑清缓存(C盘占空间)
电脑缓存目录: 1.取消文件隐藏 2.找到C:\Users\lwx351192\AppData\Local\Temp目录下的三个子文件夹local,locallow,roaming里面的文件都可删除, ...
- 关于简单的三层的简化(bll,dal,model)的封装这里全部都在一个文件主要在于明白意思
using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace 封装泛型CRU ...
- C语言基础课First作业
一.大学和高中最大的不同是没有人天天看着你,也不会担心上课的时候班主任在后门偷偷瞄着我们,通过阅读邹欣老师的博客后,心目中理想的师生关系就是Coach/Trainee(健身教练/健身学员)的关系,想到 ...
- 是什么优化让 .NET Core 性能飙升?(转)
欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ .NET Core(开放源代码,跨平台,x-copy可部署等)有许多令人兴奋的方面,其中最值得称赞的就是其性能了. 感谢所有社区 ...
- IntelliJ IDEA 2017版 SpringBoot徒手书写HelloWorld
1.打开编译器,选择File---->New---->Project 2.弹出设置界面,选择如图样式的1.2.3 3.设置包名称 4.继续next 5.finish完成即可 6.自动生成目 ...
- 在VMware中设置CentOS7的网络
为了能够使用XShell来管理我们安装好的CentOS7系统,所以我们要先设置CentOS7的网络使其能够联网. 1.选择vmware的编辑,然后点击虚拟网络编辑器 2.点击更改设置(需要有 ...
- linux每天一小步---head命令详解
1 命令功能 head命令用来查看文件的前多少行或多少字节的内容(默认显示10行) 2 命令语法 head [选项参数] [文件名] 3 命令参数 -q 显示多个文件的内容时不显示文件 ...