测试源码

利用srcset和sizes信息来选择最符合规定条件的图像。

我测试电脑的dpr=2；

如果浏览器的viewport为小于等于480像素，图片宽高为50%（宽高=4800.5），浏览器视图加载一张4800.5*dpr(2)=480像素的图片，。

如果浏览器的viewport为小于等于640像素，图片宽高为25%（宽高=6400.25），浏览器视图加载一张6400.25*dpr(2)=320像素的图片，浏览器会尝试加载一张靠近尺寸的图片（如图一所示）。

如果我这里将25vw修改为40vw，6400.4dpr(2)=512，相对640和480更加接近480所以会显示（如图二所示）。

如果我这里将25vw修改为45vw，6400.45dpr(2)=576，相对640和480更加接近640所以会显示（如图三所示）。

图一

图二

图三

注意：sizes属性仅仅是对浏览器给出提示，并不能保证浏览器就会言听计从。 所以我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。 srcset和size列表是对浏览器的一个建议(hint)，而非指令。 例如，设备像素比(dpr)为1.5的设备，亦可用1x也可用2x的图像，由浏览器根据其能力、网络等因素来决定

HTML元素通过包含零或多个元素和一个元素来为不同的显示/设备场景提供图像版本。 浏览器会选择最匹配的子元素，如果没有匹配的，就选择元素的src属性中的URL。 然后，所选图像呈现在元素占据的空间中。

要决定加载哪个URL，useragent检查每个的srcset、media和type属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

media属性允许你提供一个用于给用户代理作为选择元素的依据的媒体条件(mediacondition)（类似于媒体查询）。 如果这个媒体条件匹配结果为false，那么这个元素会被跳过。

type属性允许你为元素的srcset属性指向的资源指定一个MIME类型。 如果用户代理不支持指定的类型，那么这个元素会被跳过。

和前面的作用是一样的这里就不多赘述了。

如果要为高DPI(Retina)显示提供更高像素密度的图像版本，请在元素上使用srcset。 这使得浏览器可以在节约流量模式下选择低像素密度版本，且不需要您编写明确的media条件。

在任何情况下，你都必须在之前正确提供一个元素以及它的src和alt属性，否则不会有图片显示。 当媒体条件都不返回真的时候，它会提供图片；如果浏览器不支持元素时，它可以作为后备方案。

当浏览器开始加载一个页面,它会在主解析器开始加载和解析页面的CSS和JavaScript之前先下载(预加载)任意的图片。 这是一个非常有用的技巧，平均下来减少了页面加载时间的20%。 但是,这对响应式图片一点帮助都没有,所以需要类似srcset的实现方法。 因为你不能先加载好元素后,再用JavaScript检测可视窗口的宽度，如果觉得大小不合适，再动态地加载小的图片替换已经加载好的图片，这样的话,原始的图像已经被加载了,然后你又加载了小的图像,这样的做法对于响应式图像的理念来说，是很糟糕的。

在图片还处于加载中时，通常需要填充页面预览效果，这时往往会用到图片占位符，例如：天猫、京东使用一个div来充当图片加载中的占位。

我们也可以使用js的手段，动态的修改img的src达到占位的效果。

根据原始图片自动生成超小尺寸的缩略图。

注意：lqip只支持jpeg,jpg,png

利用生成的base64来填充src，但是我们在实际的项目中肯定不能手动的为每一张图片都用lqip生成一个base64填充到img中，这样效率也太慢了。 所以工程化的角度有一个lqip-loader为JS包中导入的jpeg图像生成Base64。

lqip-loader

并且针对Base64，在Chrome为了节省内存和提高GPU性能，浏览器（包括从61.0.3163.38开始的Chrome）现在将呈现稍微更清晰或像素化的Base64编码图像。

左侧是旧版Chrome，右侧是Chromev61

SQIP将生成基于SVG的图像预览。 它们可以用作延迟加载图像预览、视频缩略图或项目的艺术元素。

我们前面提到为了让「图片加载的更快」，我们常常使用：

工具压缩图片，减少图片的大小，来提升加载速度

图片尺寸随网络变化，选择不同尺寸不同格式的图片，来降低显示图片的大小，从而提升加载速度

图片逐渐加载，利用占位符来降低图片加载慢的用户体验

但是我们真的一定需要图片吗？或许在一些场景下（注意：并不是所有场景），我们可以替换图片。

HTML5为我们提供了一种选择：webfonts。 字体集可以包含图形图标和字符集。 Webfonts可以替代图形：

IconFontDemonstration

Webfont图标的优点：

字体可以缩放到任意大小，使用任何颜色并应用CSS效果

webfonts提供了良好的跨浏览器兼容性，甚至可以在IE6中使用

单个字体文件可能比多个图像更有效

Webfont图标的缺点：

字体字符是单色的（尽管CSS3效果可以帮助）

生成字体不像PNG或SVG那样容易

如果只需要几个图标，则图像文件的大小会较小。

DataURI其实就是将图片数据转成base64字符串格式，再引入，相比普通的引入方式它不再需要发起网络请求，从而达到优化网页快速加载的目的（减少http请求）。

图片体积较小，没必要浪费一次http请求

访问外部资源受限或者很麻烦的情况

外部图片为动态的

Base64编码的数据体积是原始二进制图片的4/3，也就是大1/3

虽然相比普通引入加载更快，但是渲染更加耗时。实验结果显示DataURI的渲染比普通图片多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍，所以要在可接受的范围内适量使用

不会被浏览器缓存（可以通过css引入的方式来缓存）

图片服务器自动优化是可以在图片URL链接上增加不同参数，服务器自动生成不同格式、大小、质量的一种技术。 例如在前面提到的「图片尺寸随网络环境变化」通过修改URL参数来达到目的也就是这样一个例子。

图片裁剪：按照长度、宽度、固定大小、长边、短边、填充、拉伸等缩放

图片格式装换：支持不同图片格式jpg、gif、png、webp，支持不同的图片压缩率

图片处理：添加图片水印、模糊等

AI处理：图片鉴别、抠图、排版、配色、合成等

将图片压缩、裁剪、格式转换等本地攻击部署到线上图片服务器上

内部运营或外网用户上传本地图片到图片服务知乎，服务器默认处理转换为多种格式，并推送到图片CDN服务器上

图片服务器对外开放多个域名，同事对各个业务线开发不同的业务路径

外网永华请求带特殊参数的图片URL时，图片服务器根据URL种不同的参数类型，从本地缓存中存取，或者实现对图片进行即时处理，返回给客服端

本文从总结了图片优化的四个大的方面：

不同场景选择不同的图片格式

如何让图片更快的加载

图片的替代方案

服务器端对图片的优化

在之前我们在做网站优化的时候总是把重点放在了站点的内容、结构、外链等诸多方面，往往会忽略及其重要的一方面，那就是图片的优化。 可能有小伙伴讲了，图片不就是添加上去，能有什么需要优化的。 其实不然近几年搜索引擎对于图片识别功能不断完善，加上人工智能的进步，因此小伙伴们对于图片的优化必须重视起来。

如何使笔记本电脑图片更清晰优化显示设置

在当今数字时代，图片已经成为人们生活中必不可少的一部分。 然而，有时候我们在笔记本电脑上查看图片时，可能会发现其清晰度不尽如人意。 有没有办法让笔记本电脑上的图片更加清晰呢？本文将介绍如何通过优化显示设置和提升图像质量来实现这一目标。

1.调整分辨率，提高图像细节

2.使用高品质显示器，享受更真实的色彩

3.配置合适的显卡，提升处理能力

4.选择正确的屏幕亮度，避免画面模糊

5.优化显示效果，增强图像对比度

6.清理屏幕灰尘和指纹，确保清晰度

7.使用合适的壁纸，避免失真和模糊

8.更新显卡驱动程序，提升图像处理性能

9.使用专业的图像编辑软件，提高清晰度

10.避免使用过度压缩的图片格式

11.调整显示器的色彩管理设置，增强图像质量

12.使用适合的显示模式，优化图像效果

13.调整图像的亮度、对比度和饱和度，优化细节

14.清除杂乱的桌面图标，减少视觉干扰

15.使用外接显示器，享受更大屏幕的视觉盛宴

内容详细

1.调整分辨率，提高图像细节：通过调整笔记本电脑的分辨率设置，可以提高图像的细节显示效果。 较高的分辨率能够让每个像素更加精细，从而让图片呈现更清晰的效果。

2.使用高品质显示器，享受更真实的色彩：选择一台高品质的显示器能够提供更高的色彩还原度和更广阔的色域范围，使图片在显示过程中更加真实、生动。

3.配置合适的显卡，提升处理能力：一款优秀的显卡能够提供更快的图像处理速度和更好的图像渲染能力，从而增强图片的清晰度和流畅度。

4.选择正确的屏幕亮度，避免画面模糊：过高或过低的屏幕亮度都会对图像的清晰度造成影响。 根据环境光线的强弱调整屏幕亮度，可以避免画面模糊的情况发生。

5.优化显示效果，增强图像对比度：通过调整显示器的对比度设置，可以增强图像的明暗对比度，让图片中的细节更加清晰可见。

6.清理屏幕灰尘和指纹，确保清晰度：定期清洁屏幕表面的灰尘和指纹，可以保证光线透过屏幕时不被散射或遮挡，从而使图片更加清晰。

7.使用合适的壁纸，避免失真和模糊：选择合适分辨率的壁纸可以避免图片在拉伸或压缩过程中产生失真和模糊现象，从而保证图像的清晰度。

8.更新显卡驱动程序，提升图像处理性能：定期更新显卡驱动程序可以获得更好的性能和兼容性，从而提升笔记本电脑的图像处理能力和显示效果。

9.使用专业的图像编辑软件，提高清晰度：借助专业的图像编辑软件，可以通过锐化、去噪等功能，提高图片的清晰度和细节呈现。

10.避免使用过度压缩的图片格式：选择适当的图片格式，避免使用过度压缩的格式，以免造成图片细节的丢失和模糊。

11.调整显示器的色彩管理设置，增强图像质量：通过调整显示器的色彩管理设置，可以校准显示器的颜色表现，提升图像的质量和清晰度。

12.使用适合的显示模式，优化图像效果：根据不同的使用场景选择合适的显示模式，如阅读模式、游戏模式等，可以优化图像效果，提高清晰度。

13.调整图像的亮度、对比度和饱和度，优化细节：通过微调图像的亮度、对比度和饱和度等参数，可以增加图像中细节的可见度，使图片更加清晰。

14.清除杂乱的桌面图标，减少视觉干扰：保持桌面整洁，清除过多杂乱的图标，可以减少视觉干扰，让图片在显示时更加突出、清晰。

15.使用外接显示器，享受更大屏幕的视觉盛宴：使用外接显示器，可以获得更大的屏幕空间和更高的分辨率，从而让图片在显示过程中更加清晰、震撼。

通过优化显示设置和提升图像质量，我们可以让笔记本电脑上的图片呈现更加清晰、精彩细腻的效果。 只要按照本文所介绍的方法来进行调整和优化，相信每一张图片都能在笔记本电脑上展现出最佳的视觉效果。

如何提高笔记本电脑图片的清晰度

在现代社会中，笔记本电脑已经成为人们生活和工作中必不可少的工具。 然而，有时我们可能会遇到笔记本电脑图片显示不够清晰的问题，影响了我们的使用体验。 为了解决这一问题，本文将分享一些提高笔记本电脑图片清晰度的技巧和方法，帮助读者获得更好的视觉享受。

调整屏幕分辨率

合理调整屏幕分辨率是提高笔记本电脑图片清晰度的第一步。 我们可以通过右键点击桌面空白处，选择“显示设置”，然后在“分辨率”选项中进行调整。

使用高质量的图片作为壁纸

选择高质量的图片作为桌面壁纸是保证笔记本电脑图片清晰度的一个重要因素。 高分辨率的图片能够更好地展示细节和色彩，营造出更加清晰生动的视觉效果。

清理屏幕和键盘

保持屏幕和键盘的清洁度也对提高笔记本电脑图片的清晰度有着重要影响。 定期清理屏幕和键盘上的灰尘和污渍，可以避免这些杂质对画面的影响。

调整亮度和对比度

合理调整笔记本电脑屏幕的亮度和对比度可以提高图片的清晰度。 过高或过低的亮度和对比度都会导致画面细节的模糊或失真，因此我们应该根据实际需求进行适当调整。

使用专业的图片编辑软件

借助专业的图片编辑软件，我们可以对笔记本电脑中的图片进行后期处理，提高其清晰度。 调整图片的锐化、对比度和饱和度等参数，可以使图片更加锐利和清晰。

升级显卡驱动程序

显卡驱动程序是决定笔记本电脑显示效果的关键因素之一。 及时升级显卡驱动程序可以解决一些显示问题，并提升图片的清晰度和流畅度。

使用高质量的显示器

如果您经常需要处理高清图片或者需要对图片进行精细的编辑，那么选择一个高质量的外接显示器将会带来更好的显示效果。 高分辨率和高色彩还原度的显示器可以帮助您更好地展示和观赏图片。

合理调整显示器的角度和位置

调整显示器的角度和位置也对提高笔记本电脑图片清晰度有着重要的影响。 我们应该保持正对屏幕的角度，避免过度仰视或俯视，同时选择适当的位置，避免受到强烈光线的干扰。

使用护眼模式

笔记本电脑的护眼模式可以减少蓝光辐射，保护眼睛健康，并提高图片观看的舒适度。 在长时间使用电脑时，打开护眼模式可以有效减轻眼睛的疲劳感。

关闭节能模式

节能模式会使显示器降低亮度和对比度，从而影响图片的清晰度。 所以，在观看图片时，我们应该关闭节能模式，以获得更好的显示效果。

定期清理硬盘

定期清理笔记本电脑硬盘中的垃圾文件和临时文件可以释放更多的存储空间，提高系统运行的速度和图片的加载效果，从而改善图片的清晰度。

更新操作系统

及时更新操作系统也是提高笔记本电脑图片清晰度的一种方法。 更新操作系统可以修复一些显示问题，提升系统的稳定性和兼容性，从而使图片显示更加清晰。

使用高品质的视频播放器

选择一个高品质的视频播放器可以提高笔记本电脑图片的观看效果。 一些专业的视频播放器拥有更好的图像处理技术和参数调节功能，可以提供更清晰、更鲜艳的画面。

保持合理的硬件配置

笔记本电脑的硬件配置对图片的显示效果也有一定影响。 我们应该选择配置较高的显卡、内存和处理器等硬件，以确保系统能够更好地处理和展示高清图片。

调整显示器刷新率

合理调整显示器的刷新率可以提高图片的清晰度和稳定性。 较高的刷新率可以减少画面闪烁，使图片显示更加平滑和清晰。

通过合理调整屏幕分辨率、使用高质量的图片、清理屏幕和键盘、调整亮度和对比度、使用专业的图片编辑软件等方法，我们可以提高笔记本电脑图片的清晰度。 选择高质量的显示器、合理调整角度和位置、使用护眼模式等也能够带来更好的显示效果。 最重要的是，定期保养和维护笔记本电脑，并保持合理的硬件配置，可以确保系统在处理和展示图片时有更好的性能和表现。 通过以上方法和技巧，我们可以轻松提升笔记本电脑图片的观看体验，享受更加清晰生动的视觉效果。

如何对图片资源进行优化

有这样一句话，图片比视频更简洁，比文字更形象，这句话点出了图片的巨大优势，因此，图片成为了网站中必不可少的重要元素之一。

但是，图片也有我们不得不重视的缺点，那就是图片相对于其他JavaScript文件、CSS文件等静态资源来说，太大了，如果我们能够从图片上进行相关优化，相信能够大幅度提高网站的访问速度。 可以说，图片是我们优化的重头戏。

PNG是网页当中应用最广泛的图片格式之一，我们用Photoshop切完图导出的时候，都会选存为Web所用格式，这个时候Photoshop给出的格式就是PNG，可见PNG已经是Web所用格式的标准了。

png是一种使用无损压缩的图片格式，因此PNG格式的图片色彩表现力要比其他格式的图片更好。

图片的应用场景更多的是和它的优点相挂钩的，PNG的优点就是无损压缩，色彩表现力强。那么我们根据其有点，它的主要应用场景在如下几个方面：

网站logo

颜色简单但对图片质量要求较高

JPG/JPEG是另外一种在网站中使用频率较高的格式之一，它是一种有损压缩的格式，在不影响人们可分辨图片质量的前提下，尽可能的压缩文件的大小，这意味着JPG/JPEG去掉了一部分图片的原始信息。 因此在色彩表现力上面PNG比JPG/JPEG更胜一筹。

虽然JPG/JPEG是有损压缩，但是它压缩程度在60%-70%的时候，表现依然很好，而且文件大小要小得多。 换句话说，就是可以用最少的磁盘空间得到较好的图像质量。 基于这些优点，它的主要应用场景在如下几个方面：

大的轮播banner图片

其他一些列表图片

使用JPG/JPEG格式的图片大小不会太大，图片质量也适中，是当下图片主要的解决方案。

GIF的应用场景主要是一些动画的展示，比如一些比较短的画面，这个时候用视频来作还需要单独引入视频组件，反而增大了项目体积，我们完全可以用GIF动画来替换即可。 比如：项目进入前loading加载效果。

WebP格式是谷歌开发的一种旨在加快图片加载速度的图片格式。 WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。 据官方实验显示：无损WebP相比PNG减少26%大小；有损WebP相比JPG/JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。

不过，谷歌浏览器对WebP格式支持比较好之外，其他浏览器对WebP的支持显然还不够好，这也是WebP的短板之一。

虽然WebP的兼容性不是很好，但是由于其巨大的优势，我们想出了各种方案来处理这个问题，下面我们主要介绍一下主流网站是如何使用WebP格式的图片的。

我们可以看到，这个图片请求有2个格式后缀，分别是JPG和WebP，这里说明这个图片有2种形式，然后程序根据浏览器的型号确定是否支持WebP格式的图片，如果不支持则返回JPG格式，如果支持则返回WebPack格式。

需要指定Accept头支持WebP格式

可以说WebP是当下图片最好的解决方案，我们可以在banner图、列表图、内容图等等场景当中都可以使用这种格式，但是要注意做好降级处理。

Base64不是一种加密算法，虽然编码后的字符串看起来有点像加密。 它实际上是一种二进制到文本的编码方法，它能够将给定的任意二进制数据转换（映射）为ASCII字符串的形式，以便在只支持文本的环境中也能够顺利地传输二进制数据。

应用场景：对于一些非常小的矢量图标和logo，完全没有去浪费一次请求，我们直接使用Base64格式嵌入HTML文档当中即可。

图片懒加载是现在最常用的性能优化手段之一，对于首屏用不到的图片，我们完全可以使用懒加载在用户下拉到对应位置的时候再进行加载，避免网页打开时一下子加载过多资源。

还是先定义最基本的HTML结构，如下：

原文：图片什么时候出现在可视区域内function?isInSight(el)?{??const?rect?=?();????//这里我们只考虑向下滚动??const?clientHeight?=?;??????//?这里加50为了让其提前加载????return??<=?clientHeight?+?50;??}??//data-src的属性值代替src属性值??function?loadImg(el)?{????if?(!)?{??????const?source?=?;???????=?source;????}??}??let?index?=?0;??function?checkImgs()?{????const?imgs?=?(-pic);????for?(let?i?=?index;?i?
相关标签： 图像优化是指什么、 图像优化全攻略、 如何为更好的网站性能优化图像、

本文地址：http://www.hyyidc.com/article/38599.html

上一篇：可访问性UX创建适合所有人的包容性体验可访...
下一篇：移动优先用户体验为现代消费者优化网站移动...