响应式图片

Posted by Bibooo on 09-21,2022

一个典型的网站首页都会有张大图,使用移动端的用户查看页面时,网页的页眉看起来还可以,但是页面这张图片占据了屏幕的大部分高度,在这个尺寸下,你很难看到内容。

当然第一屏占个图像或者是导航栏是没问题的,个人建议:SEO 谷歌的收录有一条规则是,点进去你网页的人如果停留没超过几秒钟,就退出去,可能会的你的 SEO 有影响,很多博客,官网都是占一屏,我不是很喜欢这种风格。最好是有内容,标题,段落,能显示在第一屏中。

手机用户根本不想因为下载用于桌面的大图像而浪费带宽,理想的情况下依靠不同的设备来提供不同的分辨率图片和不同尺寸的图片。

那怎么处理呢?

  1. 上面已经说了一种了。

    1. 理想的情况下依靠不同的设备来提供不同的分辨率图片和不同尺寸的图片。

      这应该需要美工来处理,网上应该有网站来制作的不同分辨率不同尺寸的图片。

      评价:比较完美。

      分辨率切换:不同的尺寸

      <img srcset="elva-fairy-320w.jpg 320w,
                   elva-fairy-480w.jpg 480w,
                   elva-fairy-800w.jpg 800w"
           sizes="(max-width: 320px) 280px,
                  (max-width: 480px) 440px,
                  800px"
           src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
      

    网站页面的图片仅是装饰的,实际上要用 css 的背景图片来实现。(css 是比 HTML更好的响应式工具)

  2. 分辨率切换:相同的尺寸,不同的分辨率

    <img srcset="elva-fairy-320w.jpg,
                 elva-fairy-480w.jpg 1.5x,
                 elva-fairy-640w.jpg 2x"
         src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
    

为什么我们不能用 css 或 js 来做这效果

当浏览器开始加载一个页面。它会在主解析器开始加载和解析页面的 css 和 js 之前先下载(预加载)任意的图片,这是一个非常有用的操作,因为减少了页面加载时间的 20%。但是,这对响应式图片一点帮助都没有。 所以需要 srcset 的实现方法。因为你不能先加载 img 标签,再用 js 检测可视窗口的宽度。

MDN 推荐 picture 标签

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

<picture>让我们能继续满足老式浏览器的需要。你可以在type属性中提供 MIME 类型,这样浏览器就能立即拒绝其不支持的文件类型:

在这次主动学习中,我们希望你变得勇敢和自力更生……尽量的。我们希望你通过使用来实现自己美术设计上的宽/窄屏显示适配,以及使用 srcset切换不同的分辨率。