常见图像格式类型区别及使用说明&绝对路径和相对路径的使用场景&css3实现loading效果

最新推荐文章于 2021-08-06 23:32:10 发布

lpldplws

最新推荐文章于 2021-08-06 23:32:10 发布

阅读量704

点赞数

分类专栏：初期前端遇到的问题

本文链接：https://blog.csdn.net/lpldplws/article/details/78973904

版权

初期前端遇到的问题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

经前两天晚上的提问，胡老师给我留下了两个问题：
1. JPEG PNG GIF等图像格式的区别和使用情况；
2. 绝对路径和相对路径的使用场景；
3. 如何用非GIF动画实现loading效果；
以下进行说明。

常见图像格式类型区别及使用情况

常见图像格式类型：

JPEG(Joint Photographic Experts Group)。之所以起这个名字是因为它是由联合图像专家小组实现的。它是通过lossy compression(有损压缩)的方式实现的。原先有一种Lossless JPEG的无损压缩方式，但并没有收到广泛的支持。使用JPEG格式压缩的图片文件一般也被称为JPEG Files，最普遍被使用的扩展名格式为.jpg，其他常用的扩展名还包括.jpeg、.jpe、.jfif以及.jif。
JPEG/JFIF是万维网（World Wide Web）上最普遍的被用来存储和传输照片的格式。（目前常见的就是JPEG的格式。）但是它们并不适合于线条绘图（drawing）和其他文字或图标（iconic）的图形，因为它的压缩方法用在这些类型的图形上，得到的结果并不好（PNG和GIF格式通常是用来存储这类的图形；GIF每个像素只有8比特，并不很适合于存储彩色照片，PNG可以无损地存储照片，但是文件太大的缺点让它不太适合在网络上传输）。
GIF(Graphics Interchange Format)图片互换格式，以8位色（即256种颜色）重现真彩色的图像。因为体积小而成像相对清晰，特别适合于初期慢速的互联网。GIF采用了无损压缩技术，只要图像不多于256色，则可既减少文件的大小，又保持成像的质量。
PNG(Portable Network Graphics)便携式网络图形，是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可，所以被广泛应用于互联网及其他方面上。正因为如此，PNG才有了一个非正式的名称：PNG is Not GIF。
PNG支持256色调色板技术以产生小体积文件，最高支持24位真彩色图像以及8位灰度图像，支持透明/半透明属性。使用无损压缩。使用渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。
SVG(Scalable Vector Graphics)可缩放矢量图形，它允许3种图形对象类型：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML命名空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。
SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

常见图像格式用法与区别：
此处编码方式不进行阐述，与本文的内容不符合，有兴趣的可以自己看一下。若对数字图像处理有兴趣的小伙伴可以在下文看一下。

JPEG：适用于在色调及颜色平滑变化的照片或是写实绘画（painting）的情景。在这种情况下，它通常比完全无损方法作得更好，仍然可以产生非常好看的样式（事实上它会比其他一般的方法像是GIF产生更高质量的视频，因为GIF对于线条绘画（drawing）和图标的图形是无损，但针对全彩视频则需要极困难的量化）。
JPEG压缩的artifact（此处为图像处理中的非自然信号，简单的讲在JPEG的量化阶段，会由量化除数来决定压缩比例，若量化除数更小，压缩后的体积更小，但是会有明显的不自然痕迹。因此可以通过选择较小的压缩率或用无损文件来减少artifact。）可以很好地调和到细微非均匀材质的照片中，因此允许得到更高的压缩率。
在JPEG的基础上，更新的有损方法，如wavelet compression或（小波压缩）许有更好的表现效果，但是因为版权和历史原因，目前情况下还是以JPEG为主，或许以后会有基于小波标准的JPEG标准。
GIF
GIF可以插入多帧，从而实现动画效果；可设置透明色以产生对象浮现于背景之上的效果。同时，目前基本上图片都会多于256色，所以大大局限了GIF文件的应用范围。但是在高彩图片上有着不俗表现的JPEG格式却在简单的折线上效果不如人意。因此图像互换格式格式普遍适用于图表，按钮等等只需少量颜色的图像。
PNG
相对于GIF，一般情况下将静态GIF图像无损转换为PNG后可以压缩率会略为提高（前提是同样采用8位索引模式）；PNG可提供更大颜色深度的支持，包括24位（8位3通道）和48位（16位3通道）真彩色。加入α通道后可进一步支持每像素64位的表示；超过8位色深的PNG图像转换为GIF时，图像质量会由于分色（颜色数减少）而下降。
相对于JPEG，因为其lossy compression的方法，对于低对比，图像颜色过渡平滑，噪声多，且结构不规则的情况下，使用JPEG；如果要保存文本，线条或类似的边缘清晰，有大块相同颜色区域的图像，PNG格式的压缩效果就要比JPEG好很多，并且不会出现JPEG那样的高对比度区域的图像有损。由于JPEG是有损压缩，会产生迭代有损，在重复压缩和解码的过程中会不断丢失信息使图像质量下降。由于PNG是无损的，保存将要被编辑的图像来说更加合适。
SVG
与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象。
SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。
SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户。
但是，由于原始的SVG档是遵从XML语法，导致数据采用未压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。
JPEG编码方式介绍
GIF结构介绍
PNG结构介绍

绝对路径和相对路径的使用场景

此处主要说明在哪种情况下，本可以使用相对路径，但却要使用绝对路径：

相对路径如果被复制到其余网站，因为路径不对所以获取不到信息，会降低页面的可读性。
以合并CSS为例，模板引用等等会造成相对路径中的文件引用问题。所以选择绝对路径，这样就避免了资源嵌入、资源合并后资源引用路径错乱等问题。

CSS3实现loading效果

以下整合总结的样式比较好的loading动画

1.codepen地址

HTML代码：

<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>

CSS代码：

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

2.codepen地址

HTML代码：

<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>

CSS代码：

.spinner {
  width: 60px;
  height: 60px;

  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #67CF22;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

3.codepen地址

HTML代码：

<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

CSS代码：

.spinner {
  margin: 100px auto 0;
  width: 150px;
  text-align: center;
}

.spinner > div {
  width: 30px;
  height: 30px;
  background-color: #67CF22;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

4.codepen地址

HTML代码：

<div class="spinner"></div>

CSS代码：

.spinner {
  margin: 100px auto;
  width: 20px;
  height: 20px;
  position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
  width: 6px;
  height: 6px;
  background-color: #333;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

lpldplws

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见图像格式类型区别及使用说明&绝对路径和相对路径的使用场景&css3实现loading效果

经前两天晚上的提问，胡老师给我留下了两个问题： 1. JPEG PNG GIF等图像格式的区别和使用情况； 2. 绝对路径和相对路径的使用场景； 3. 如何用非GIF动画实现loading效果；以下进行说明。常见图像格式类型区别及使用情况常见图像格式类型：JPEG(Joint Photographic Experts Group)。之所以起这个名字是因为它是由联合图像专
复制链接

扫一扫

专栏目录