1
LeeReamond 2022-08-12 05:46:31 +08:00
缩放算法问题,按一楼效果图,乍看起来 chrome 默认缩小是用 bicubic ?前端好像有很多图片方案,比如 img 标签,或者放个 canvas 里面放图,css 好像也有类似功能,具体细节上算法应该不是统一的,可能有适合你的,就有请楼下资深老哥回答了。
|
2
Livid MOD 可能可以调整 CSS 里的 image-rendering ,但是不同浏览器对这个的支持程度不一样:
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering 你可以在这里试验调整不同的参数: https://codepen.io/livid-the-decoder/pen/gOedGeG 话说你第一张图是哪个浏览器里出来的效果? |
3
ZE3kr 2022-08-12 07:00:14 +08:00 via iPhone
或者让服务器去做渲染,显示多少像素就返回多少像素的图片
|
4
ZE3kr 2022-08-12 07:00:47 +08:00 via iPhone
Retina 屏幕就用 srcset 逐一适配
|
5
Aloento OP @Livid 第一个图是 Win11 Edge 最新 Stable 出来的效果,使用的是 -webkit-optimize-contrast
很悲伤的是 high-quality 属性在 Edge 中无效 但是不知道为什么,在 Codepen 里面缩放出来就很丝滑 |
6
Aloento OP |
7
yikyo 2022-08-12 08:01:38 +08:00 1
@Aloento 楼上有人提到的服务端渲染,指的是图片由服务端提供,跟前端常规概念的服务端渲染是两回事,
自己在服务器上放两份图片,一份提供压缩好的,一份是正常图片,按需求显示对应图片,。 可以测试一下主流 cdn 提供的图片压缩功能,能不能满足你的需求,如果可以的话,成本是最低的, |
8
yuzo555 2022-08-12 08:29:26 +08:00 2
最好还是不要在前端缩放,不好看还是其次,浪费流量是真的夸张。
现在的 CDN 基本上都支持图片缩放,稍微配置一下就好。 |
9
musi 2022-08-12 09:01:20 +08:00
楼上说的服务端渲染应该指的是服务端缩放
在浏览器端缩放既浪费流量也浪费性能,效果还不大好 |
10
ZE3kr 2022-08-12 09:23:54 +08:00 via iPhone
|
11
Agdhfdjh 2022-08-12 09:51:29 +08:00
对象存储了解下
|
12
biubiu001 2022-08-12 17:39:40 +08:00
image-rendering 在各浏览器的缩放显示不一,我之前是用 image-rendering 是这么写的,在 firefox 、chrome 显示效果都挺好的:
image-rendering: auto; image-rendering: -webkit-optimize-contrast; |
13
Aloento OP |