响应式图片

单位，格式和环境

• 比特和像素

  • 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 属性。