一张图片胜过千言万语,图片也是每个网页不可或缺的一部分。但它们往往也是下载的字节的大部分。借助响应性网页设计,我们的布局不仅可以根据设备特性而变化,图片也可以。
自适应设计意味着,不仅我们的布局能根据设备而变化, 但内容也可能发生变化例如,在高 分辨率 (2x) 显示屏,高分辨率图形确保清晰度。图片 当浏览器宽度为 800px 时,使用 50% 宽度可能没问题, 在窄幅手机上占用过多空间,并且需要相同的带宽开销 以适应较小的屏幕
艺术指导
其他时候,可能需要大幅度地更改图片: 比例、剪裁甚至替换整张图片。在此示例中 更换图片通常称为艺术指导请参阅 如需了解详情,请访问 responsiveimages.org/demos/ 示例。
自适应图片
您知道吗?在加载网页所需的平均字节数中,图片占了超过 60%。
在本课程中,您将学习如何在现代网络上处理图片, 确保图片在任何设备上都能快速呈现,
在这个过程中,您将学到一系列技能和技巧,以便顺利 将自适应图片集成到您的开发工作流中。截止日期 您将使用能够根据自身情况进行调整和响应的图片, 不同的视口大小和使用场景
这是 Udacity 提供的免费课程
标记中的图片
img
元素功能强大,可用于下载、解码并渲染
内容,而现代浏览器支持多种图片格式。包括
可跨设备显示的图片与桌面设备上的图片并无二致
需要进行一些细微调整才能打造良好的体验。
摘要
- 为图片使用相对尺寸,以防止图片意外溢出 容器。
- 如果您想根据具体情况指定不同的图片,请使用
picture
元素。 (又称为艺术指导)。 - 在
img
元素中使用srcset
和x
描述符, 当选择不同密度时,浏览器会确定要使用的最佳图像。 - 如果您的网页上只有 1-2 张图片,且这些图片未用于 您的网站,不妨考虑使用内嵌图片来减少文件请求。
为图片使用相对尺寸
在指定图片宽度时请务必使用相对单位,以防出现相对单位
避免意外溢出视口例如,width: 50%;
会导致
将图片宽度设为所包含元素的 50%(而不是视口或
实际像素大小的 50%)。
由于 CSS 允许内容溢出容器,因此您可能需要使用 max- 宽度:100%,以防止图片和其他内容溢出。例如:
img, embed, object, video {
max-width: 100%;
}
请务必通过 img
上的 alt
属性提供有意义的说明
元素;通过为屏幕提供上下文信息,使您的网站更易于访问
阅读器和其他辅助技术。
针对高 DPI 设备,使用 srcset
美化 img
srcset
属性增强了
img
元素,以便您轻松提供多个图片文件
针对不同设备特性进行优化。与image-set
类似
CSS 函数
是 CSS 的原生内容,srcset
可让浏览器选择
根据设备特性来调整图片,例如使用
在 2 倍显示屏上 投放 2x 图片,并且将来可能会
在带宽有限的情况下获得 2x 设备。
<img src="photo.png" srcset="photo@2x.png 2x" ...>
在不支持 srcset
的浏览器上,浏览器会直接使用默认值
使用 src
属性指定的图片文件。因此,务必要
始终包含可在任何设备上显示的 1x 图片,
功能。如果支持 srcset
,则以逗号分隔的
image/conditions 格式会在发出任何请求之前进行解析,
系统则会下载并显示相应的图片
这些条件可能包括像素密度、宽度等各种因素 但目前只有像素密度能够得到很好的支持。平衡当前费用 与未来功能相关的行为,请继续在 属性。
使用 picture
在自适应图片中设计艺术指导
根据设备特性更改图片(也称为“美术”),
请使用 picture
元素。通过
picture
元素定义了
根据不同的平台
例如设备尺寸、设备分辨率、屏幕方向
等等。
如果是图片来源,请使用 picture
元素
或采用自适应设计
图片在某些类型的屏幕上略有不同类似于
video
元素,可以有多个 source
元素
从而能够指定不同的图片文件
具体取决于媒体查询或图片格式。
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
在上例中,如果浏览器宽度至少为 800px,那么
使用 head.jpg
或 head-2x.jpg
,具体取决于设备分辨率。如果
浏览器在 450 像素到 800 像素之间,则根据设备分辨率,使用 head-small.jpg
或 head-small-
2x.jpg
。适用于屏幕宽度
小于 450 像素,并且向后兼容性,picture
元素
则浏览器会改为呈现 img
元素,因此应始终为
已包含在内。
相对大小的图片
如果不知道图片的最终尺寸,则很难指定 图片来源的密度描述符。这一点对于 与浏览器宽度成比例的广告是自适应尺寸, 浏览器尺寸
您不必提供固定的图片尺寸和密度,只需为图片指定尺寸 通过添加宽度描述符和 这样浏览器就可以自动计算 像素密度,并选择要下载的最佳图片。
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
上面的示例渲染了一张宽度为视口宽度一半的图片
(sizes="50vw"
),具体取决于浏览器的宽度和设备像素
允许浏览器选择正确的图片,
浏览器窗口的大小。例如,下表显示了
浏览器会选择:
浏览器宽度 | 设备像素比 | 使用的图片 | 有效解决方案 |
---|---|---|---|
400 像素 | 1 | 200.jpg |
1x |
400 像素 | 2 | 400.jpg |
2 倍 |
320 像素 | 2 | 400.jpg |
2.5 倍 |
600 像素 | 2 | 800.jpg |
2.67 倍 |
640 像素 | 3 | 1000.jpg |
3.125 倍 |
1100 像素 | 1 | 800.png |
1.45x |
考虑自适应图片中的断点
在许多情况下,图片尺寸可能会根据网站的布局而发生变化 断点。例如,在小屏幕上,您可能希望图片 跨越视口的全宽,而在较大的屏幕上, 所占的比例较小。
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
上述示例中的 sizes
属性使用多个媒体查询来
指定图像的尺寸。当浏览器宽度大于
600px,则图片占视口宽度的 25%;在 500 像素之间时
600px,则图片占视口宽度的 50%;低于 500 像素时
为全角。
使产品图片可展开
<ph type="x-smartling-placeholder">客户希望了解他们正在购买的商品。在零售网站上,用户期望 可以查看产品的高分辨率特写,以便更清楚地了解 以及 研究参与者 会因为做不到而感到沮丧
J.工作人员网站。 消失叠加层表示图片可点按, 清晰可见的细节
其他图像技术
压缩图片
通过 压缩图像技术 向所有设备提供高度压缩的 2 倍图像, 设备的功能。根据图片类型和 压缩后,图片质量可能不会变化,但文件大小会有所减少 显著增加。
JavaScript 图片替换
JavaScript 图片替换功能会检查设备的功能,
没错。”您可以通过以下方法确定设备像素比
window.devicePixelRatio
,获取屏幕宽度和高度,甚至可能
通过 navigator.connection
嗅探某些网络连接,或发出假
请求。收集完所有这些信息后,您可以决定
图片。
这种方法的一大缺点是,使用 JavaScript 意味着
至少要等到先行解析器完成之后再加载图片。这个
这意味着,图片要到 pageload
事件之后才会开始下载
触发。此外,浏览器很可能会同时下载 1x 和 2x
图片,导致页面重量增加。
内嵌图片:光栅图片和矢量图片
创建和存储映像有两种完全不同的方法, 这会影响您以自适应方式部署图片的方式。
光栅图片,例如照片和其他图片 以单个颜色点网格表示系统可能会显示光栅图像 ,也可以采用 HTML 画布元素创建。广告格式 PNG、JPEG 和 WebP 等用于存储光栅图像。
矢量图像(例如徽标和艺术线条)是指 曲线、线条、形状、填充颜色和渐变效果。您可以创建矢量图像 或者使用 Adobe Illustrator 或 Inkscape 等程序编写代码, 例如 SVG 等矢量格式。
SVG
通过 SVG,可以在网页中添加自适应矢量图形。通过 矢量文件格式比光栅文件格式的优势在于 可以渲染任意尺寸的矢量图像。矢量格式描述的是 了解它是如何通过线条、曲线和颜色等构造的。 另一方面,光栅格式只包含关于单个点的信息 因此在缩放时,浏览器必须猜测如何填补空白。
下面是同一图片的两个版本:左边是 PNG 图像,SVG 图像在 右边。SVG 在任何尺寸下看起来都很棒,而其旁边的 PNG 在较大的显示屏尺寸下看起来会比较模糊。
如果要减少网页发出的文件请求数量,您可以编写代码 使用 SVG 或数据 URI 格式内嵌图片如果您查看此网页的源代码, 您会发现,以下两个徽标均声明为内联:Data URI 和 SVG。
SVG 在移动设备和桌面设备上获得很好的支持, 和优化工具可以 显著减小 SVG 尺寸。以下两个内嵌 SVG 徽标的外观 完全相同,但一个大约 3KB,另一个只有 2KB:
数据 URI
Data URI 提供了一种添加文件(例如图片)的方法,通过设置
img
元素的 src(使用
以下格式:
<img src="data:image/svg+xml;base64,[data]">
上述 HTML5 徽标代码的开头类似于以下内容:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(完整版本的长度超过了 5000 个字符!)
拖动“N”拖放工具,例如 jpillora.com/base64-encoder: 可用于将二进制文件(例如图片)转换为数据 URI。与 SVG 一样 Data URI 在移动设备上得到了很好的支持, 桌面浏览器。
在 CSS 中内嵌
Data URI 和 SVG 还可以内联到 CSS 中,这适用于 同时适用于移动设备和桌面设备下面是两张看起来完全相同的图片, CSS 中的背景图片;一个 Data URI 和一个 SVG:
内联专业人士和缺点
图片的内嵌代码可能很冗长,尤其是 Data URI 格式的图片,因此 你想使用它吗?为了减少 HTTP 请求!SVG 和 Data URI 可以 检索整个网页,包括图片、CSS 和 JavaScript。 发出一个请求
缺点:
- 在移动设备上,Data URI 的速度可能要慢很多
比来自外部
src
的图片更能在移动设备上显示。 - Data URI 会显著增加 HTML 请求的大小。
- 它们会增加标记和工作流程的复杂性。
- Data URI 格式明显大于二进制格式(最高为 30%),并且 因此不会减少总下载大小
- Data URI 无法缓存,因此必须为每个使用它们的页面下载数据 URI。
- IE 6 和 7 不支持这些功能,IE8 支持不完整。
- 使用 HTTP/2 时,减少资源请求的数量会降低其优先级。
由于所有格式都可以自适应,因此您需要测试哪一种格式效果最佳。使用开发者账号 用于衡量下载文件大小、请求数和 延迟时间对于光栅图像,Data URI 有时很有用,例如 。如果您 但 SVG 是更好的选择。
CSS 中的图片
CSS background
属性是用于添加复杂图片的强大工具
这样可以轻松添加多个图片并导致它们重复
等等。与媒体查询结合使用时,background 属性变为
功能更加强大,可根据屏幕有条件地加载图片
例如分辨率、视口尺寸等
摘要
- 使用最符合显示屏特征的图片,考虑屏幕 尺寸、设备分辨率和页面布局。
- 针对高 DPI 显示屏更改 CSS 中的
background-image
属性: 使用min-resolution
和-webkit-min-device-pixel-ratio
实现媒体查询。 - 除了 标记。
- 考虑使用 JavaScript 图片替换时的性能成本 或提供高度压缩的高分辨率图像时, 低分辨率设备
使用媒体查询有条件地加载图片或进行艺术指导
媒体查询不仅会影响网页布局,您还可以使用它们 根据视口有条件地加载图片或提供艺术指导 宽度。
例如,在下面的示例中,在较小的屏幕上,只有 small.png
已下载并应用于内容“div
”,在大屏设备上也能使用
对正文应用 background-image: url(body.png)
,对内容 div
应用 background-image:
url(large.png)
。
.example {
height: 400px;
background-image: url(small.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}
使用 image-set 提供高分辨率图片
CSS 中的 image-set()
函数增强了 background
属性的行为,
从而轻松为不同设备提供多个图片文件
特征。这样,浏览器就可以根据
设备的特征,例如在 2 倍显示屏上使用 2 倍图像;
或者在网络带宽有限时,在 2 倍分辨率的设备上展示 1 倍图像。
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
除了加载正确的图片外,浏览器还会缩放图片 。换句话说,浏览器会假设 2x 的图片是 将 2x 的图片缩小至原来的 2 倍, 让该图片在网页中显得与实际尺寸相同
对 image-set()
的支持仍是一项新功能,目前仅在 Chrome 和
带有 -webkit
供应商前缀的 Safari。注意添加
image-set()
不受支持时的后备图片;例如:
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}
上述命令会在支持 image-set 的浏览器中加载相应的资源;
否则,它会采用 1x 的素材资源。需要特别注意的是,
对 image-set()
浏览器的支持较低,大多数浏览器会支持 1x 素材资源。
使用媒体查询提供高分辨率图片或艺术指导
媒体查询可以根据 设备像素比 从而可以为 2x 和 1x 显示屏指定不同的图片。
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome、Firefox 和 Opera 均支持标准的 (min-resolution: 2dppx)
,
而 Safari 和 Android 浏览器都需要使用旧版供应商前缀
语法(不含 dppx
单位)。请注意,这些样式仅在
device 与媒体查询相匹配,因此您必须为基本 case 指定样式。
这样还可以确保当浏览器加载网页时
不支持特定于分辨率的媒体查询。
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
}
@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}
您还可以使用 min-width 语法根据
视口大小这种方法的优势在于,图片不会
如果媒体查询不匹配,则会下载该查询。例如,bg.png
只是
当浏览器宽度不低于 500 像素时,已下载并应用于 body
:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
为图标使用 SVG
为网页添加图标时,请尽可能或在有些情况下使用 SVG 图标 例如 Unicode 字符。
摘要
- 为图标使用 SVG 或 unicode,而不是光栅图片。
使用 Unicode 替换简单图标
许多字体支持各种各样的 Unicode 字形, 而不是图片与图片不同,Unicode 字体可以缩放 无论它们在屏幕上的显示大小如何
除了常规的字符集外,Unicode 还可能包含 箭头 (←)、数学运算符 (√)、几何形状 (★)、控制图片 (▶)、音乐符号 (♬)、 希腊字母 (欧),甚至国际象棋棋子 (♞)。
包含 Unicode 字符的方式与命名实体相同:
&#XXXX
,其中 XXXX
表示 Unicode 字符编号。例如:
You're a super ★
超棒 ★
使用 SVG 替换复杂图标
对于更复杂的图标要求,SVG 图标通常要轻量级, 易于使用,可通过 CSS 设置样式。与 SVG 相比,SVG 的优势有很多 光栅图片:
- 它们是可以无限缩放的矢量图形。
- 颜色、阴影、透明度和动画等 CSS 效果 简单明了。
- SVG 图片可以直接内嵌到文档中。
- 它们是有语义的。
- 它们通过适当的属性提供更好的可访问性。
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.
谨慎使用图标字体
<ph type="x-smartling-placeholder">图标字体很受欢迎,易于使用,但也有一些缺点 (与 SVG 图标相比):
- 它们是可以无限缩放的矢量图形, 消除锯齿,导致图标不如预期那么清晰。
- 限制使用 CSS 进行样式设置。
- 很难进行像素完美定位,具体取决于行高, 字母间距等。
- 它们没有语义,可能很难通过屏幕阅读器使用, 其他辅助技术
- 除非正确设置了作用域,否则在仅使用 一小部分可用的图标
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
有数百种免费和付费的图标字体供您使用,包括 Font 太棒了! Pictos 和字形图标。
请务必根据请求数量 对图标的需求例如,如果您只需要少量图标, 最好使用图片或图片精灵来制作图片。
优化图片以提升性能
图像通常占据了下载的字节的大部分,也经常会占据 占据了网页上大量视觉空间因此,优化 图片通常可以节省大量字节, 对网站的改进:浏览器必须下载的字节数越少、 对客户端带宽的竞争越小, 浏览器可以下载并显示所有资源。
摘要
- 不要只是随意地选择图片格式,还要了解不同的 格式可用,并使用最适合的格式。
- 在您的工作流程中纳入图片优化和压缩工具, 文件大小。
- 通过将常用图片放入 图片拼合图片
- 要缩短初始网页加载时间并减小初始网页加载大小, 可以考虑仅在图片滚动到视野范围内后才加载图片。
选择正确的格式
您需要考虑以下两种类型的映像:
矢量图像
和光栅图片。
对于光栅图片,您还需要选择正确的压缩格式,
例如:GIF
、PNG
、JPG
。
光栅图片,例如照片和其他图片,以网格表示
单个点或像素组成光栅图像通常由照相机或
扫描程序,也可以在浏览器中使用 canvas
元素创建。作为
图片尺寸变大,文件也随之变大当规模大于
那么光栅图像就会模糊不清,因为浏览器需要
如何填充缺失的像素。
矢量图像(例如徽标和艺术线条)由一组曲线定义,
线条、形状和填充颜色。矢量图像是使用
Adobe Illustrator 或 Inkscape,并另存为矢量格式,例如
SVG
。由于矢量图像是基于
它们可以进行扩展,而不会损失质量或
文件大小的变化
在选择合适的广告格式时,请务必同时考虑 图片原点(光栅或矢量)和内容(颜色、动画 文本等)。没有一种格式适用于所有图片类型,每种格式都有自己的优点 和弱点
在选择适当的格式时,请先遵循以下准则:
- 对于摄影图片,请使用
JPG
。 - 对于徽标和艺术线条等矢量艺术和纯色图形,请使用
SVG
。 如果矢量插画不可用,不妨试试WebP
或PNG
。 - 使用
PNG
(而非GIF
),因为这样可以提供更多颜色和更优惠的商品 压缩比 - 对于较长的动画,请考虑使用
<video>
,以提供更好的图片 并且允许用户控制播放
缩减文件大小
您可以通过“后期处理”来大幅缩减图片文件的大小图片 保存后。图片压缩工具有很多种,有损压缩和 无损、在线、GUI、命令行。如果可能的话 自动执行图片优化,将其集成到您的 工作流。
有多种工具可用于对 JPG
执行进一步的无损压缩
和 PNG
文件,对图片质量没有影响。对于 JPG
,请尝试
jpegtran 或
jpegoptim(仅适用于 Linux;
使用 --strip-all 选项运行)。对于 PNG
,请尝试
OptiPNG 或
PNGOUT。
使用图片精灵
CSS 精灵是一项技术,可将多个图片合并为一个 “雪碧图”图片。然后,您可以指定 元素(精灵表)的背景图片,以及用于显示 正确部分。
.sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}
.maps {
height: 40px;
background-position: -120px -165px;
}
精灵的好处是可以减少 同时仍启用缓存。
考虑延迟加载
延迟加载可以显著加快包含大量内容 根据需要或在主图片集时 内容已加载和呈现完毕。除了效果提升之外 使用延迟加载可以打造无限滚动体验。
在创建支持无限滚动的页面时,请务必谨慎,因为内容是以 搜索引擎可能永远都看不到该内容。此外, 用户想查看页脚信息 始终看不到页脚,因为总是有新内容加载。
完全避免使用图片
有时,最好的图像并不真是图像。请尽可能使用 浏览器的原生功能,以提供相同或相似的 功能浏览器可以生成图像,而以前必须要 图片。这意味着浏览器不再需要下载单独的图片, 从而防止图像缩放不当。您可以使用 Unicode 或特殊字符 来呈现图标
将文本放在标记中,而不是嵌入图片中
尽可能让文字只包含文字,而不要嵌入图片中。对于 例如,使用图片作为标题或放置联系信息,如 直接显示在图片中的电话号码或地址,可防止用户 复制和粘贴信息;就会使得 屏幕阅读器,并且没有响应。而应将文本放置在标记中 必要时可使用网页字体来实现所需要的样式
使用 CSS 替换图片
现代浏览器可以使用 CSS 功能来创建
所需的映像例如:您可以使用
background
属性,则可以使用 box-shadow
创建阴影,
可以使用 border-radius
属性添加边角。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque 坐式 amet augue eu magna scelerisque porta ut ut dolor.Nullam placerat egestas Nisl sed sollicitudinFusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit.Duis Ornare fringilla dui non vehicula.In hac habitasse platea dictumst. 多尼奇 ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.
<style>
div#noImage {
color: white;
border-radius: 5px;
box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
}
</style>
请注意,使用这些技术需要渲染周期, 对移动设备而言至关重要如果过度使用,你可能失去 并且可能会对效果产生不利影响。