圖片的基本知識點

kkxiaojun發表於2019-03-17

圖片的基本知識

圖片的使用

圖片的介紹

點陣圖與向量圖

點陣圖 點陣圖（Bitmap，bmp格式就是這種圖它的檔案結構很簡單，沒有壓縮，一個一個畫素地記錄下來。），又稱柵格圖（英語：Raster graphics）或點陣圖， 是使用畫素陣列(Pixel-array/Dot-matrix點陣)來表示的影象。 在計算機中，畫素用二進位制數來表示。這些不同的畫素點組成了色彩斑斕的圖片。常見點陣圖有 JPG、PNG、GIF 等格式。

向量圖 向量圖形是計算機圖形學中用點、直線或者多邊形等基於數學方程的幾何圖元表示影象。生成的向量圖檔案儲存量很小， 特別適用於文字設計、圖案設計等，比較常用的向量圖有 SVG 等格式。

二進位制與色彩

  • 在計算機中，畫素用二進位制數來表示。不同的圖片格式中畫素與二進位制位數之間的對應關係是不同的。
  • 一個畫素對應的二進位制位數越多，它可以表示的顏色種類就越多，成像效果也就越細膩，檔案體積相應也會越大。
  • 一個二進位制位表示兩種顏色（0|1 對應黑|白），如果一種圖片格式對應的二進位制位數有 n 個，那麼它就可以呈現 2^n 種顏色。

例如：

  • png-8。2^8種顏色
  • png-24。2^24種顏色

JPG/JPEG/GIF/PNG/SVG

JPG/JPEG

關鍵字：有失真壓縮、體積小、載入快、不支援透明

優點 JPG 最大的特點是有失真壓縮（壓縮過程中影象的質量會遭受到可見的破壞）。這種高效的壓縮演算法使它成為了一種非常輕巧的圖片格式。另一方面， 即使被稱為“有損”壓縮，JPG的壓縮方式仍然是一種高質量的壓縮方式。

缺點

  1. 當它處理向量圖形和 Logo 等線條感較強、顏色對比強烈的影象時，人為壓縮導致的圖片模糊會相當明顯。
  2. JPEG也是一種點陣圖格式，但它不支援透明背景影象(透明圖片需要召喚 PNG 來呈現)，更加適合顏色複雜的影象。

使用場景 JPG 適用於呈現色彩豐富的圖片，在我們日常開發中，JPG 圖片經常作為大的背景圖、輪播圖或 Banner 圖出現。 兩大電商網站（京東和淘寶）對大圖的處理，是 JPG 圖片應用場景的最佳寫照。

PNG

關鍵字：無失真壓縮、質量高、體積大、支援透明 PNG是一種無失真壓縮的點陣圖圖形格式，支援索引、灰度、RGB三種顏色方案以及Alpha通道等特性。PNG的開發目標是改善並取代GIF作為適合網路傳輸的格式而不需專利許可，所以被廣泛應用於網際網路及其他方面上。

優點 無失真壓縮，支援透明度。分為：

  • png-8。2^8種顏色
  • png-24。2^24種顏色

缺點 體積太大

使用場景 呈現小的 Logo、顏色簡單且對比強烈的圖片或背景等。例如：淘寶網的logo

SVG

關鍵字：文字檔案、體積小、不失真、相容性好

可縮放向量圖形（Scalable Vector Graphics，SVG）是一種基於可擴充套件標記語言（XML），用於描述二維向量圖形的圖形格式。 它和本文提及的其它圖片種類有著本質的不同：SVG 對影象的處理不是基於畫素點，而是是基於對影象的形狀描述。

優點

  • 圖片可無限放大而不失真
  • 一般來說，SVG檔案要比JPEG和GIF的檔案要小

缺點

  • SVG 存在著其它圖片格式所沒有的學習成本

應用場景

  1. VG 是文字檔案，我們既可以像寫程式碼一樣定義 SVG，把它寫在 HTML 裡、成為 DOM 的一部分。
  2. SVG主要用來顯示向量圖，例如一些形狀、線和點的組合。

GIF

動圖 GIF是一種點陣圖格式，支援透明背景影象

WebP

年輕的全能選手

WebP是一種同時提供了有失真壓縮與無失真壓縮（可逆壓縮）的圖片檔案格式。WebP最初在2010年釋出，目標是減少檔案大小，但達到和JPEG格式相同的圖片質量。

優點 WebP 像 JPEG 一樣對細節豐富的圖片信手拈來，像 PNG 一樣支援透明，像 GIF 一樣可以顯示動態圖片——它集多種圖片檔案格式的優點於一身。

缺點 瀏覽器相容性，目前只有chrome相容較好

應用場景 暫無

圖片在專案中的應用

錯誤處理（很常用，實用）

  1. 從伺服器獲取的圖片資料可以用onerror做錯誤處理
onerror="javascript:this.src='images/home/monitor.png'"
複製程式碼
  1. 設定最大寬度與最大高度，防止圖片非等比縮放
.img {
    max-width: 100%;
    max-height: 100%;
}
複製程式碼

降低圖片的大小

  1. 圖片壓縮，採用圖片壓縮工具，智圖-圖片壓縮

減少HTTP網路請求

將多張圖片合成一張圖片，可以有效減少http網路請求。特別是一些小圖示多的頁面，還有一些元件裡面的圖片

cssSprites(雪碧圖製作)

1. 用PS製作
2. 用線上工具合成圖片，background-position都動生成。[Snipaste-1.16.2-x64](https://pan.baidu.com/s/1I21_g79e77Jjhk5xUJ5PoA)
3. 用webpack，gulp等新的專案構建工具以它們的一些外掛，可以用它們自動合併、壓縮圖片，處理圖片引用
`gulp`
```
const gulp = require('gulp');
// 自動同步瀏覽器外掛
const browserSync = require('browser-sync');
// 同步執行任務外掛
const runSequence = require('run-sequence');
// buffer流轉換
const buffer = require('vinyl-buffer');
// 專案路徑
const projecturl = 'gulp-cssSprites';
// cssSprites壓縮
const gulpSpritesmith = require('gulp.spritesmith');
const gutil = require('gulp-util');
const imagemin = require('gulp-imagemin');

gulp.task('spritesmith', () => {
    gulp.src('./images/*.png')
    .pipe(buffer())
    .pipe(imagemin())
    .pipe(gulpSpritesmith({
        imgName: 'sprites.png',
        cssName: 'sprites.css' // Supported CSS extensions are .css (CSS), .sass (SASS), .scss (SCSS), .less (LESS), .styl/.stylus (Stylus), and .json (JSON)
    }))
    // .pipe(imagemin())
    .on('error', gutil.log)
    .pipe(gulp.dest(projecturl + '/cssSprites'))
})

// 起本地靜態資源伺服器，及監聽
gulp.task('browserSync', () => {
    browserSync({
        server: {
            baseDir: ''
        }
    })
});

// 監聽檔案修改
gulp.task('watch', ['browserSync', 'spritesmith'], () => {

    gulp.watch(['*.png'], browserSync.reload);

})

// 預設任務
gulp.task('default', (callback) => {
    runSequence(['browserSync', 'watch'], callback);
})
```
**cssSprites使用**

利用CSS的background-image，background- repeat，background-position的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置
```
.icon-ANALYSIS_4 {
background-image: url(sprites.png);
background-position: -18px -17px;
width: 17px;
height: 17px;
}
```
複製程式碼

字型相簿代替圖示

常用的有font-awesom,在專案圖示不是非常多的時候也可以採用自定義字型圖示庫 Iconfont

SVG技術替換圖片

引用方式

  1. 直接引用
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <circle id="circle" cx="400" cy="300" r="50" />
</svg>
複製程式碼
  1. 獨立的檔案引用
<img src="circle.svg">
<iframe id="if" src="circle.svg"></iframe>
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="circle.svg" type="image/svg+xml">
複製程式碼
  1. symbol標籤引用,可自定應viewBox（關於viewBox和preserveAspectRatio還需要另外去了解），這是 SVG xLink 引用時最重要的標籤
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
		<defs>
			<symbol viewBox="0 0 28 33" id="user">
				<path fill-rule="evenodd" d="M20.798 19.289c2.636-2.002 4.215-5.091 4.215-8.437 0-5.886-4.845-10.647-10.808-10.647S3.397 4.966 3.397 10.852c0 3.345 1.578 6.433 4.212 8.435l.264-2.678C4.358 18.32 1.591 21.403.168 25.187l1.478.556v-1.579c-1.485.73-1.485.73-1.501 1.079-.054.188-.054.188-.069.278a2.58 2.58 0 0 0-.026.229 9.112 9.112 0 0 0-.019.4c-.008.265-.014.617-.018 1.039-.005.511-.006 1.037-.006 1.451v.027c-.004 1.732 1.41 3.129 3.154 3.129h22.082a3.18 3.18 0 0 0 3.172-3.153l.011-1.305.008-.897.003-.296.001-.083v-.022-.006-.001l.002-.278-.093-.262c-1.385-3.918-4.203-7.122-7.812-8.88l.263 2.678zm-1.911-2.516l-2.045 1.553 2.309 1.125c2.856 1.392 5.106 3.949 6.218 7.093l-.09-.54V26.033l-.001.083-.003.296-.008.897-.011 1.305c0 .01-.011.021-.013.021H3.161c-.007 0 .005.011.005.032v-.031c0-.404.001-.92.006-1.418.004-.4.01-.732.017-.969.004-.121.008-.212.012-.262l-.006.043c-.009.06-.009.06-.058.229-.01.336-.01.336-1.49 1.063H2.74l.385-1.024c1.141-3.035 3.35-5.495 6.131-6.849l2.309-1.124-2.045-1.554c-1.859-1.412-2.964-3.576-2.964-5.92 0-4.129 3.418-7.488 7.649-7.488s7.649 3.359 7.649 7.488c0 2.344-1.106 4.509-2.966 5.921z"
				 class="path1">
				</path>
			</symbol>
		</defs>
	</svg>
	<div class="box">
		<svg class="svg">
			<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
		</svg>
	</div>
複製程式碼

canvas繪畫圖形

Canvas是由HTML程式碼配合高度和寬度屬性而定義出的可繪製區域。JavaScript程式碼可以訪問該區域，類似於其他通用的二維API，通過一套完整的繪圖函式來動態生成圖形。一些可能的用途，包括使用Canvas構造圖形，動畫，遊戲和圖片。如果您要在HTML中加入canvas元素，請將以下程式碼加入到部分中：

<canvas id="canvas" width="寬度" height="高度">
  瀏覽器不支援canvas的時候顯示
</canvas>
複製程式碼

圖片懶載入技術lazyload.js

github.com/verlok/lazy…

參考文獻

  1. zh.wikipedia.org/wiki/JPEG
  2. note.youdao.com/ynoteshare1…

相關文章