響應式圖片

單位，格式和環境

• 比特和像素

  • total bits = pixels * bits per pixel
  • less pixels * better compression = less bytes

• 相對大小

  calc()
  calc allows you to do simple calculations in css values, and that's a good way to combine absolute and relative values.

  隨機佔位符圖片

  img { max-width: 100%; } img:last-of-type { }

  • For devices such as laptops and desktop monitors, don't assume the window size is the same as the screen size.
  • Don't assume the window size will always stay the same.
  • When thinking responsibly, consider large displays as well as small.

• 橫向和縱向 landscape and portrait

  Dont't assume the viewport size will always stay the same.

• 不爲人知的 CSS 單位

  • an image to responsively cover the whole height of the viewport

    • height: 100%;

    img { height: 100%; } /* that only works if the height of the html and the body elements are also set to 100%. */

    • vh(viewport height) and vw(viewport width) unit

    /* one vh unit corresponds to 1% of the viewport height. */ img { height: 100vh; }

  • an image to resize to fit the smaller of the height or the width of the viewport

    vmin(viewport minimum) unit corresponds to 1% of the viewport width or height, whichever is smaller

  • an image to cover the whole viewport but without stretching or squashing

    vmax(viewport maximum) unit corresponds to 1% of the viewport width or height, whichever is greater

  • 將 height 和 width 設置爲 100vmax 或 100vmin 會如何改變圖片的寬高比？它會將你的圖片壓縮成正方形。

• 柵格和矢量

  There are two fundamentally different ways to create and store images.

  • Raster

    Raster images, photographs and other images represented as a grid of individual dots of color. Raster images might come from a camera or a scanner, or be created with the HTML canvas element.

  • Vector

    Vector images, images such as logos and line art, which can be defined as a set of curves, lines, shapes, fill colors and gradients. Vector images can be created with programs like Adobe Illustrator or Inkscape, or from using a vector format such as SVG. SVG makes it possible to include responsive vector graphics in a web page.

  • The advantage of vector file formats over raster file formats is that the browser can render a vector image at any size.

• 文件格式

  general rules for improving cross-platform image performance. Use JPEG for photographic images, and browsers such as Chrome also support other formats, such as WebP, which can deliver better compression and features. WebP supports alpha transparency animation along with lossy and lossless compression. if you can, use SVG for vector images. And for vector art and solid color graphics, such as logo and line art, if you're unable to use SVG, use PNG. And do use PNG rather than GIF. More colors, better compression and no licensing issues.

  圖片格式

  WebP 瀏覽器支持

  Remember, there's no need to send images with natural resolutions higher than their display resolutions (unless you need to scale up for high DPI devices, but you'll learn about that later in the course).

• 壓縮、優化和自動化

  • 開始編寫你本身的自動化 ImageMagick 或 ImageOptim 工具前，你須要安裝 Node.js 和 npm。
  • ImageMagick
    • ImageMagick
    • Mac 上的一個簡單的 ImageMagick 安裝包
    • GraphicsMagick (ImageMagick 的一個分叉)
  • Grunt
    • Grunt 簡介
    • Grunt 使用入門
    • 用 Grunt 生成不一樣分辨率的圖片
    • 用於生成多張圖片的 grunt-responsive-images 插件
    • 用於響應式圖片工做流的 grunt-respimg 插件
  • 圖片處理工具
    • ImageOptim (Mac)
    • Trimage - 和 ImageOptim 相似 (Windows, Mac, Linux)
    • ImageAlpha

• 圖片壓縮

  PageSpeed Insights

  Grunt PageSpeed 插件

  PageSpeed Node module

  cURL 示例

  PageSpeed Insights Node module

簡單的 HTTP 服務器
figure 標籤
在 Windows 上運行 localhost

標記圖片

• 性能

  • 高性能瀏覽器網絡

  • CSS 圖片精靈

    要減小圖片下載次數，你也可使用 CSS 圖片精靈或響應式精靈 圖片組合了大量圖片，這些圖片能夠經過將精靈頁設置爲元素背景，而後經過 CSS 調整背景位置來單獨顯示。此技巧對圖標和其餘重複圖形尤其有用。

  • 面向前端 Web 開發的 HTTP2

    不管你採用何種技巧來避免延遲，都請注意 HTTP/2 帶來的更改。簡單地說，HTTP/2 表示請求多個文件的成本更小：準備中止使用腳本編寫、鏈接和其餘 HTTP/1 技巧！

• css技巧

  CSS 如何影響加載時間？

• css背景圖片

  background-size: cover[contain]; background-image: image-set(); /* for cover, the image kept just as small as possible, so that its smallest dimension matches its container's smallest dimension. However, its largest dimension actually overflows the container. Compare that to Contain, the image is sized so that it is as large as possible while still being completely visible inside its container. Cover ensures that the container is completely filled, even if that means one of the dimensions is a little bit too large. With contain, the image will be completely visible, but in order to do so, that means that one of its dimensions might be smaller than the containers dimensions. */

• 符號字符

  Unicode 字符集
  Unicode 符號集合
  unicode 符號的列表
  meta tag charsets
  並不是全部瀏覽器都默認包含查看全部 unicode 字符所需的字體。此站點將幫助你肯定你的瀏覽器能夠呈現的字符。請參閱此處的一些建議，瞭解如何在 Windows 上經過 Chrome 啓用 unicode。

  • copy and paste the actual Unicode character into your HTML. It's easier to read and maintain.

• 圖標字體 icon fonts

  Zocial

  Font Awesome

  We Love Icon Fonts!

  Icon fonts on CSS-Tricks

  [class*=""]:before { display: inline-block; text-shadow: ; width: ; }

• SVG 和數據URI(data URI) 行內圖片(inline images)

  inline images using code. Two ways to do that, SVG and DataURIs. Data URIs provide a way to include a file such as an image inline as a base64 encoded string. you can inline images in your HTML, Data URIs and SVGs can also be inlined in CSS.

Inlining reduces the number of requests the browser has to make. And requests are one of the major contributors to laggy or unperformed websites on mobile. Requests add round trips. And round trips are one of the biggest factors for slow websites on mobile. But, inlining images can limit your responsive options.

徹底響應性

• Responding To Screen Capability & View

  在着手實現響應式圖片前，請考慮對站點執行圖片審覈：

  • 圖片的生產工做流程是什麼？
  • 你是否使用核心圖片、縮略圖、圖標、裝飾？
  • 你的網站上使用哪些格式的圖片？
  • 是否應該以 SVG 格式內聯或提供圖片？

  響應式圖片審覈。

  高級技巧：要在優化站點時得到最好的效果，請特別注意很是大的圖片。請選擇十張最大的圖片！具體來講，對於較大的圖片，在 CSS 或 HTML 中調整圖片大小是一個大問題。 例如，你須要將 1000x1000 像素的圖片文件顯示在 2x 屏幕的 500x500 像素的圖片元素中。 若是你使用 1100x1100 像素的圖片，則會浪費 100 x 100 = 10,000 像素！

• srcset(source set)

  <img src="" srcset="img_1x.jpg 1x, img_2x.jpg 2x"> <img src="" srcset="img_small.jpg 500w, img_large.jpg 1000w">

  • 設備像素密度列表

  • 關於像素密度的更多信息

  • Working with h units

• sizes屬性

  w 單位會告訴瀏覽器一個圖片文件的尺寸,而後它就能夠明智的選出獲取哪一個版本的圖片。可是若是圖片並不佔據 100% 的視窗寬度，那麼瀏覽器會解析 HTML 而後，在解析 CSS 以前 就開始預加載圖片，這時 瀏覽器對於圖片的顯示尺寸一無所知，這就是sizes屬性出現的緣由。sizes屬性會告訴瀏覽器圖片的實際顯示尺寸,因此在解析 HTML 時瀏覽器就能算出須要請求那張圖片。理論上來講瀏覽器能夠從 CSS 中獲取這些信息 可是 CSS 在這以後纔會被解析，在 HTML 中添加尺寸值能夠確保瀏覽器以最快速度獲取到圖片、保證獲取到正確的圖片版本能剛好適應其顯示尺寸和設備性能。

  在 JavaScript 中，你能夠經過 currentSrc 得到 img 元素的src。sizes 屬性爲瀏覽器提供了有關圖片元素顯示大小的信息，它實際上不會致使圖片大小調整。該操做是在 CSS 中執行的！

  /* 在不一樣大小的視窗顯示不一樣大小的圖片 */ img { width: 50vw; } @media screen and (max-width:px) { img { width: 100vw; } } <img src="" srcset="" sizes="(max-width:px) 100vw, 50vw" />

• srcset語法

  語法
  srcset 有兩種自定義方式，一種使用 x 來區分設備像素比 (DPR)，另外一種使用 w 來描述圖像的寬度。

  • 對設備像素比的反應

  <img src="image_2x.jpg" srcset="image_2x.jpg 2x, image_1x.jpg 1x" alt="a cool image">

  將 srcset 設置爲與逗號分隔的一連串 filename multiplier 對相等，其中每一個 multiplier 必須是後跟 x 的整數。例如，1x 表示 1 倍顯示屏，2x 表示像素密度爲兩倍的顯示屏。瀏覽器會下載與其 DPR 對應的最佳圖片。另請注意，有一個做爲備用的 src 屬性。

  • 對圖片寬度的反應

  <img src="image_200.jpg" srcset="image_200.jpg 200w, image_100.jpg 100w" alt="a cool image">

  將 srcset 設置爲與逗號分隔的一連串 filename widthDescriptor 對相等，其中每一個 widthDescriptor 都以像素爲測量單位， 而且必須是後跟 w 的整數。在這裏，widthDescriptor 指定每一個圖片文件的天然寬度，使瀏覽器可以根據窗口大小和 DPR 選擇要請求的最適當的圖片。 （若是沒有 widthDescriptor，瀏覽器須要下載圖片才能知道其寬度！）另請注意，有一個做爲備用的 src 屬性。

• srcset sizes語法

  包含大小的圖片寬度
  若是圖片不以全窗口寬度顯示會怎樣？那麼，除了 srcset 外，你還須要其餘元素（假設圖片將爲全窗口寬度）向包含媒體查詢的圖片添加一個 sizes 屬性和一個 vw 值。srcset 和 sizes 合起來可以讓瀏覽器知道圖片的天然寬度以及圖片相對於窗口寬度的顯示寬度。 知道圖片的顯示寬度和可用圖片文件的寬度後，瀏覽器將得到下載具備知足其需求的適當分辨率且儘量小的圖片所需的信息。 並且，瀏覽器在頁面加載初期，解析 HTML 時便可作出此選擇。

  • srcset 與 sizes 配合使用的語法

  <img src="images/great_pic_800.jpg" sizes="(max-width: 400px) 100vw, (min-width: 401px) 50vw" srcset="images/great_pic_400.jpg 400w, images/great_pic_800.jpg 800w" alt="great picture">

  sizes 由以逗號分隔的 mediaQuery width 對組成。sizes 會在加載流程初期告訴瀏覽器，該圖片會在點擊 mediaQuery 時以某個 width 顯示。實際上，若是 sizes 缺失，瀏覽器會將 sizes 默認爲 100vw，表示它預計圖片將以全窗口寬度顯示。sizes 會爲瀏覽器額外提供一條信息，以確保它根據圖片的最終顯示寬度下載正確的圖片文件。說明一下，它實際上不會調整圖片的大小 - 這是 CSS 的工做。

• picture 元素

  <picture> <source srcset=".webp" type="img/webp"> <source srcset=".jpeg" type="img/jpeg"> <img src=".jpg" /> </picture>

• art direction

  <picture>
  <source media= "(min-width:px)" srcset="large_1x.png 1x, large_2x.png 2x" type="img/png"> <source srcset="medium.png" type="img/png"> <img src="small.jpg" /> </picture> /* piturefill polyfill for browsers don't support picture element. */

  元素查詢 的工做方式相似於媒體查詢，但會參考元素父容器的大小，而非窗口大小。瀏覽器的實施正在進行中，同時 此處 有填充內容。

  此處提供了許多其餘 <picture> 用例、示例和代碼段。

  從 響應式圖片社區小組 瞭解更多有關響應式圖片的信息。

• 無障礙性

  關於 alt 屬性的通常建議

  • 對於重要圖片來講，alt 屬性應該具備描述性。
  • 對於純裝飾性的圖片，alt 屬性應該爲空。
  • 應該爲每張圖片設置 alt 屬性。