你必须知道的网页设计图片常识
矢量图：
通过点、线等来显示图像；
优点是文件小，放大和缩小都不会失真；
缺点是很难表现色彩层叠丰富的写实图片。
位图：
通过每个像素的颜色、深度等显示图像；
优点是利于显示色彩层叠丰富的写实图像；
缺点是文件较大，放大缩小会失真。
在web网页中看到的都是位图。
有损压缩就是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，它会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。
无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。
JPEG：
特点：有损压缩图像格式，高压缩比，文件质量较低（有失真），文件较小
场景：适合允许轻微失真的像素色彩丰富的图片，更适合用来存储摄影或写实图像或是颜色层次非常丰富的图像，JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片，不适合做色彩较少的图片，比如logo，小图标
GIF：
特点：无损压缩图像格式（无失真），8位图片格式，最多支持256种颜色（若多于256种颜色的图片用gif保存会失真）；
支持基本的透明特性，隔行扫描可以更快的加载和显示图片
场景：不适合色彩过于丰富的图片，但非常适合色彩较少的logo、小图标
PNG-8：
特点：无损压缩图像格式，8位图片格式（最多支持256种颜色，否则会失真），支持布尔透明（要么全透明，要么不透明），除了压缩算法不同外，几乎和GIF相同
场景：和GIF相同
PNG-24：
特点：无损压缩图像格式，24位图片格式（最多支持1600多万种颜色），支持alpha通道透明（支持完全透明到完全不透明的256阶透明度即半透明）
你必须知道的网页设计图片常识相关推荐
- 手机端网页设计尺寸,手机端网页设计图片尺寸
电脑网页的设计尺寸 对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window XP常 ...
- HTML5网页设计图片如何,网页设计中优化图片的6个技巧
本文转载自[微信公众号:阿门教你PS,ID:meitian_PS]经微信公众号授权转载,如需转载与原文作者联系 平面设计和网页设计是两个截然不同的领域,这两个领域有不同的设计需求.设计实践和设计方法. ...
- 收藏 网页设计的常识！
1目前,在Internet上使用最广泛的服务是WWW服务. 2在一个URL中,端口号不是必要的. 3域名服务器上存放着的Internet主机的域名与IP地址对应表. 4由美国国防部资助,通过名为ARP ...
- 编码 data:text/html;c,[网页设计]图片base64编码利器：在线 Data URI 生成工具 – Duri.me...
这篇文章介绍一款在线的图片 base64 编码利器 - Duri.me.data URI 图片是 base64编码的图片文件,可以嵌入到 HTML 或者 CSS 文件中,能够减少 HTTP 请求,提高 ...
- 网页设计图片向上浮动_CSS 关于浮动
CSS CSS 关于浮动 作者: 来源:www.28hudong.com2012-11-19 22:31:15 阅读次 什么是浮动? 浮动是 css 的定位属性.我们可以看一下印刷设计来了解它的起源和 ...
- 网页设计图片向上浮动_果冻公开课第六课：5分钟理解浮动布局
浮动,是如何实现页面布局的呢? 它有哪些特质和使用方法? 今天,我们就用5分钟的动画短视频来深入浅出地理解浮动~ 动画视频: 果冻公开课:如何理解浮动布局? 文字解析: 网页儿也能这么图文并茂吗? 假 ...
- 网页设计图片素材网站 收集
http://www.17sucai.com/ 17素材网 http://www.nipic.com/index.html 昵图网 http://www.ps-xxw.cn/ ps学习网 http:/ ...
- HTML网页设计图片滚动,HTML网页上连续滚动图片的制作
制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...
- 网页设计图片向上浮动_利用js实现图片在浏览器中飘动（浮动窗口自由移动）效果...
首先,设置一个将要飘动的窗口,html代码如下: 利用js控制span标签在浏览器内移动 var xPos = 0;var yPos = 0; var step = 1;var delay = 10; ...
最新文章
- linux系统中find怎么用,linux系统中‘find’的详细用法
- 重磅直播|SLAM/sfm中的两视图三角化方法
- 结转本年利润的有关分录
- php最常用方法,php 常用方法
- java怎么设置背景_如何在Java中设置背景图片？
- UITableView的重用
- Glide 加载图片背景变绿
- SMART Utility for mac (硬盘检测工具)
- linux安装桌面键盘,如何在 Linux 中使用屏幕键盘
- 神经网络 BPNN 机器学习 深度学习 拟合 时间序列 预测 分类
- ERP管理软件哪家好？比较好的ERP管理系统软件推荐
- 早晨随笔_早上如何调试
- 计算机知识架构一：计算机组成、体系结构
- idea导入项目后简体字变繁体字
- p13390677 112040 linux x86-64 1of7,11.2.0.4.0 PatchSet 补丁号 13390677
- 什么是面向对象编程（OOP）？
- 【畅捷通T+】登录提示 列“MarketingCloudUserId”不属于表 。
- 为什么NR PDCP SDU最大为9000？
- win10系统安装打印机失败如何解决？
- 转载：【SQL练习】经典SQL练习题