Figma导出的切图在Retina屏上模糊怎么办？

司徒洋博提问于 2026-03-22 14:23:21 阅读 17

工具

我在Figma里把设计稿切图导出成2x的PNG，放到网页里在MacBook的Retina屏上看还是有点模糊，明明已经用了@2x的图片了啊？

我试过用img标签直接引用，也试过用background-image，效果都差不多。是不是我导出设置有问题，还是前端写法不对？

const icon = new Image();
icon.src = './assets/icon@2x.png';
icon.style.width = '24px';
icon.style.height = '24px';
document.body.appendChild(icon);

Figma 切图导出

我来解答赞 3 收藏

反馈

1 条解答

华丽 Lv1

首先你要明白，在Retina屏幕上，像素密度更高，所以即使你导出了2x的图片，也需要让浏览器知道如何正确显示这张高分辨率的图片。否则，浏览器会简单地将图片缩小到你指定的尺寸，导致看起来模糊。

解决这个问题主要有两个步骤：

第一步，确保你在Figma中导出的图片确实是2x的分辨率。你提到已经导出了2x的PNG，这是正确的做法，但需要确认导出的尺寸是你设计稿尺寸的两倍。

第二步，你需要告诉浏览器如何正确使用这张2x的图片。可以通过CSS中的image-set函数或者HTML的srcset属性来实现。

我们先来看看CSS的image-set方法。你需要为你的元素设置背景图像，并指定高分辨率版本。例如：

.icon {

    width: 24px;

    height: 24px;

    background-image: image-set(

        url('./assets/icon@2x.png') 2x,

        url('./assets/icon.png') 1x

    );

}

这段CSS的意思是：当设备像素比为2时，使用icon@2x.png；否则使用icon.png。

接下来是HTML的srcset属性方法。这种方法适用于使用标签的情况。你可以这样写：

这里，src属性提供了默认的图片，而srcset属性则提供了不同分辨率的图片选项。浏览器会根据设备的像素密度自动选择合适的图片。

现在我们把这两种方法应用到你的JavaScript代码中。我们可以使用CSS的方法来修改你的JavaScript代码：

const icon = document.createElement('div');

icon.classList.add('icon'); // 假设你有一个对应的CSS类

document.body.appendChild(icon);

然后记得在CSS中添加相应的样式规则：

.icon {

    width: 24px;

    height: 24px;

    background-image: image-set(

        url('./assets/icon@2x.png') 2x,

        url('./assets/icon.png') 1x

    );

}

这样处理之后，你的图片在Retina屏幕上的显示应该会清晰很多。

希望这些步骤能帮到你！如果有其他问题，尽管问我。有时候前端的这些问题真是让人头疼，但也正因为如此，才能让我们不断学习和进步。

2026-03-22 15:01