响应式图片

单位，格式和环境

  • 比特和像素

    • 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).

  • 压缩、优化和自动化

  • 图片压缩

    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">

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

posted on 2017-06-13 17:28  msmailcode  阅读(292)  评论(0)  编辑  收藏  举报