二倍图缩放问题解决思考

二倍图缩放问题解决思考

问题由来

在做网页端开发时经常会出现缩放问题，比如我在布局一个5050的图片在移动端时，会被放大为100100（按照1：2的像素比),这时候会产生图片模糊的现象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-huI9OSba-1623638461064)(F:\移动端网页布局\images\apple50(1)].jpg)

解决方法

1. 准备一张100*100像素的图片
2. 缩小为50*50像素的图片
3. 到移动端时自动放大为100*100的原来的图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bj5ZH9Sg-1623638461067)(F:\移动端网页布局\images\apple100.jpg)]

问题

• 过程麻烦，还需准备放大的二倍图
• 显示的之后还是原来的图片，清晰度没有变化，不能发挥移动端的屏幕像素优势

思考的解决方法

手机屏幕上的像素点在小尺寸的屏幕上显示，本身就具备实现比pc端更高清的显示能力，所以我们可以把pc端的图片以另一种尺寸表示，然后以这一种尺寸在移动端上显示，因为尺寸相同，但是移动端比pc端更小，所以显示的会更清楚

1. 50*50的像素图片表示为长宽为2cm
2. 将长宽为2cm放大为长宽4cm（实现二倍图在移动端的放大）
3. 将长宽4cm显示在移动端上，因为移动端上的4cm所包含的像素点的密集程度会比同样程度上pc端的多，所以显示会更加清晰

注意：以上的想法纯属我的胡思乱想，不具备专业性