V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Aloento
V2EX  ›  浏览器

浏览器图片渲染优化,各位有什么好方案吗

  •  2
     
  •   Aloento · 2022-08-12 05:34:35 +08:00 · 2562 次点击
    这是一个创建于 594 天前的主题,其中的信息可能已经有所发展或是发生改变。

    就拿这个图举例子,在正常 100%缩放的情况下,这个锐化白边真的是没眼看
    vJpLM4.png

    但是实际上这张图片是这样的
    vJpOsJ.png

    各位老哥有什么好的解决方案吗

    13 条回复    2022-08-12 18:09:36 +08:00
    LeeReamond
        1
    LeeReamond  
       2022-08-12 05:46:31 +08:00
    缩放算法问题,按一楼效果图,乍看起来 chrome 默认缩小是用 bicubic ?前端好像有很多图片方案,比如 img 标签,或者放个 canvas 里面放图,css 好像也有类似功能,具体细节上算法应该不是统一的,可能有适合你的,就有请楼下资深老哥回答了。
    Livid
        2
    Livid  
    MOD
       2022-08-12 05:58:02 +08:00   ❤️ 3
    可能可以调整 CSS 里的 image-rendering ,但是不同浏览器对这个的支持程度不一样:

    https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

    你可以在这里试验调整不同的参数:

    https://codepen.io/livid-the-decoder/pen/gOedGeG

    话说你第一张图是哪个浏览器里出来的效果?
    ZE3kr
        3
    ZE3kr  
       2022-08-12 07:00:14 +08:00 via iPhone
    或者让服务器去做渲染,显示多少像素就返回多少像素的图片
    ZE3kr
        4
    ZE3kr  
       2022-08-12 07:00:47 +08:00 via iPhone
    Retina 屏幕就用 srcset 逐一适配
    Aloento
        5
    Aloento  
    OP
       2022-08-12 07:34:10 +08:00
    @Livid 第一个图是 Win11 Edge 最新 Stable 出来的效果,使用的是 -webkit-optimize-contrast
    很悲伤的是 high-quality 属性在 Edge 中无效
    但是不知道为什么,在 Codepen 里面缩放出来就很丝滑
    Aloento
        6
    Aloento  
    OP
       2022-08-12 07:38:50 +08:00
    @ZE3kr 做的是一个 SPA 所以,让服务器渲染也不太现实
    我在想可不可以让 Worker 缩放好了再传出来
    或者用 canvas 绘图,不走浏览器的 img 渲染逻辑
    yikyo
        7
    yikyo  
       2022-08-12 08:01:38 +08:00   ❤️ 1
    @Aloento 楼上有人提到的服务端渲染,指的是图片由服务端提供,跟前端常规概念的服务端渲染是两回事,
    自己在服务器上放两份图片,一份提供压缩好的,一份是正常图片,按需求显示对应图片,。
    可以测试一下主流 cdn 提供的图片压缩功能,能不能满足你的需求,如果可以的话,成本是最低的,
    yuzo555
        8
    yuzo555  
       2022-08-12 08:29:26 +08:00   ❤️ 2
    最好还是不要在前端缩放,不好看还是其次,浪费流量是真的夸张。
    现在的 CDN 基本上都支持图片缩放,稍微配置一下就好。
    musi
        9
    musi  
       2022-08-12 09:01:20 +08:00
    楼上说的服务端渲染应该指的是服务端缩放
    在浏览器端缩放既浪费流量也浪费性能,效果还不大好
    ZE3kr
        10
    ZE3kr  
       2022-08-12 09:23:54 +08:00 via iPhone
    对我的意思就是在服务器上调整图片宽高然后返回,类似 example.com/image.jpeg?width=800

    客户端的种类是无穷多的,改 CSS 不能保证所有浏览器都没问题
    Agdhfdjh
        11
    Agdhfdjh  
       2022-08-12 09:51:29 +08:00
    对象存储了解下
    biubiu001
        12
    biubiu001  
       2022-08-12 17:39:40 +08:00
    image-rendering 在各浏览器的缩放显示不一,我之前是用 image-rendering 是这么写的,在 firefox 、chrome 显示效果都挺好的:

    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    Aloento
        13
    Aloento  
    OP
       2022-08-12 18:09:36 +08:00
    @yuzo555 我的服务器是不限流量和大带宽所以才想在在前端做压缩哈哈哈
    好,听各位老哥的,在服务器缩小再传回
    CDN 和图床也考虑用起来
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1264 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:55 · PVG 01:55 · LAX 10:55 · JFK 13:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.