Web端高分屏图片加载方案

前言

随着显示器的快速发展，越来越多的用户更换了高分屏，我们作为Web开发者，网站内的图片尺寸都是适配普通屏幕的，如果在高分屏上图片将会变得模糊不清。

我观察了几个网站，发现他们的做法是直接用了@2x的图片，这种做法在普通屏幕上图片的一些细节会丢失。那么有没有什么办法可以兼顾普通屏幕和高分屏呢？本文就跟大家分享一种解决方案，欢迎各位感兴趣的开发者阅读本文。

基础概念

在前言中，我们提到了高分屏和**@2x**，本章节就跟大家聊一聊这两个概念。

高分屏

高分屏是指高分辨率的显示器，通常情况下我们把大于1080P分辨率的显示器称为高分屏，例如：2k、4k显示器，屏幕分辨率越高，能显示出来的像素点就越多，我们看到的画面也就更细腻。

设备像素比

上个章节中，我们讲了高分屏的概念，高分辨率下可以显示更多的像素点，那么操作系统的UI和字体就会变得非常小。

为了解决这个问题，操作系统提供了缩放选项，可以让系统UI看起来跟普通屏一样，但是显示效果更细腻。在macos中，有一个HIDPI的概念，简单来说就是用4个像素渲染1个像素。

如下图所示，我们渲染了圆的1/4，需要4x4个逻辑像素（下图左侧）