探索Web上图片使用方式

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

图片在Web上的使用占比已经非常的高,特别是在手淘互动这样的环境之下,我们每一个项目的图片使用量都非常的大。如果能把图片用好,的确是件不容易的事情,而且面对的挑战也不小。经常会碰到有关于图片如何加载,如何适配,如何优化等等。

另外在移动端开发中,很多同学在Web上使用图片的方法一般都是通过<img>标签和CSS的background-image属性来处理。也正因如此,很多同学却忘记了这两者应该如何?怎么使用又是最优的。甚至有很多前端同学都已经忘记了这两者的差异是什么?

加上Web的技术不断革新,事实上除了前面提到的加载图片的方式之外,还有其他的方式,比如HTML5的<picture>(虽然这个元素标签曾经一度废弃过,但后来又添加回来了)。就算还是使用img标签,也有了新的优化,比如imgsrcset属性。

那么面对这么多的变化,以及使用的场景,我们应该怎么来选择,才是最优的选择。今天这篇文章,我们就来一起探讨一下这些东西,希望大家会喜欢。

Web引入图片的姿势

Web上如何引入图片,其实前面已经简单的提到过。这也是探索Web上图片最基础的部分。所以花点时间来简单的描述一下。一般在Web上引入图片,大体分为两种类型,其一是通过 HTML元素引入图片,其二是通过 CSS样式引入图片

HTML元素引入图片

通过HTML元素在Web上引入图片最常见的方式是通过<img>元素来引入。比如:

<img src="logo.png" alt="w3cplus" />

img元素是通过src来引入图片资源(图片的路径),除此src属性之外,还有其属性,比如上例中的alt属性提供有意义的描述(当图片加载失败的时候,alt的内容将会显示在Web上。这些描述有助于提高您的网站的可访问性,因为它们能提供语境给屏幕阅读器及其他辅助性技术),widthhegiht等常用属性。在HTML5中还给img元素添加了两个新属性 srcsetsizes

srcset 属性增强了 img 元素的行为,让您能够轻松地针对不同设备特性提供多种图片文件。类似于 CSS 原生的 image-set 函数srcset 也允许浏览器根据设备特性选择最佳图像,例如,在 2x 显示屏上使用 2x 图像,将来甚至允许在网络带宽有限时对 2x 设备使用 1x 图像。

在不支持 srcset 的浏览器上,浏览器只需使用 src 属性指定的默认图像文件。 正因如此,无论设备能力如何,一定要始终包含一个在任何设备上都能显示的 1x 图像。如果 srcset 受支持,则会在进行任何请求之前对逗号分隔的图像/条件列表进行解析,并且只会下载和显示最合适的图像。 比如,你现在可以换个姿势使用<img>来根据不同的环境加载不同的图片:

<img
    srcset="quilt_2/detail/large.jpg  1920w, 
            quilt_2/detail/medium.jpg  960w,
            quilt_2/detail/small.jpg   480w"
    src="quilt_2/detail/medium.jpg"
    alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork.">

另外,imgsizes属性也非常的强大。该属性可以使图片资源尺寸的值被用来指定图像的预期尺寸。当srcset使用w描述符时,用户代理使用当前图像大小来选择srcset中合适的一个图像URL。被选中的尺寸影响图像的显示大小。如果没有设置srcset属性,或者没值,那么sizes属性也将不起作用。来看一个简单的例子:

<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")的图像,根据浏览器的宽度及其设备像素比,允许浏览器选择正确的图像,而不考虑浏览器窗口有多大。

上面我们看到的仅是srcsetsizes属性的冰山一角,有关于更详细的东西我们不在这里阐述,如果你感兴趣的话,可以观注后续的更新,因为我最近正在探讨如何借助这两个特性在移动端不同的设备上加载所需要的图像资源。

在HTML5中新增了一个元素标签:<picture>。该元素可以通过若干个<source>,而且浏览器会自动匹配<source>typemediasrcset等属性,来找到最适合当前布局、视窗宽度、设备像素密度的图像资源。其次在该元素里面还可以内嵌一个img标签,用来作为其降级处理,一旦浏览器不支持picture元素,会自动引入内嵌的img引入的图片。比如下面这个示例:

<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.jpghead-2x.jpg。如果浏览器宽度在 450px800px 之间,则将根据设备分辨率使用 head-small.jpghead-small-2x.jpg。对于屏幕宽度小于 450px,且不支持 picture 元素向后兼容的情况,浏览器将渲染 img 元素,因此要始终包含该元素。

是不是看上去picture有点类似于具备了srcsetsizes属性的img

CSS引入图片

除了熟悉的img元素之外,在Web上还有另一种大家熟悉的方式是通过CSS的background-image属性来引入图片。其使用方式非常的简单:

.logo {
    background-image: url(logo.png);
}

该属性除了可以给一个元素设置一个背景图像之外,还可以通过用逗号隔开引用多个ulr(),给元素设置多个背景图像。图像在绘制时,以z轴方向堆叠的方式进行。先指定的图像会在之后指的图像上面绘制。因此指定的第一个图像最接近用户。

在CSS中我们可以通过一些相关的属性来控制background-image引入的图像的展示方式。比如background-positionbackground-repeatbackground-sizebackground-clip等。除此之外,还可以使用CSS的混合模式属性,比如background-blend-mode处理一些特殊效果。

在CSS中除background-image之外,CSS Images Module Level 4提供了一个image-set()函数,可以帮助我们根据不同的dpr显示不同的图像:

.logo {
    background-image: image-set(url(logo@1x.png) 1x,url(logo@2x.png) 2x);
}

当然,也可以在image-set()前面引入正常使用background-image的方式,给image-set()做降级处理:

.logo {
    background-image: image-set(url(logo@1x.png);
    background-image: image-set(url(logo@1x.png) 1x,url(logo@2x.png) 2x);
}

在HTML中的img或者picture元素,我们可以通过srcsetsizes等特性为不同的状态(比如不同的视窗宽度)加载不同的图像。时至今日,CSS可以借助媒体查询特性,显示不同的图像。比如媒体查询根据设备像素比规则,让你实现类似image-set()的特性,针对2x1x显示不同的图像。

@media (min-resolution: 2dppx),(-webkit-min-device-pixel-ratio: 2){
    .logo {
        background-image: url(logo@2x.png)
    }
}

Chrome、Firefox 和 Opera 都支持标准的 (min-resolution: 2dppx),Safari 和 Android 浏览器则均需要不带 dppx 单位的旧版供应商前缀语法。请谨记,这些样式只有在设备与媒体查询匹配时才被加载,且必须为基础案例指定样式。 这样也能够确保当浏览器不支持分辨率特有的媒体查询时,一些内容仍可以得到渲染。

.logo {
    background-image: url(logo@1x
剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/how-to-use-web-image.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部