blocks|key|4409707|text|我在Mac上发现了完全相同的问题:+Firefox把图像缩小得很好，而Chrome让它看起来很模糊，这很糟糕。我不关心渲染时间或速度，我需要的标志看起来很好！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4409708|我发现以下CSS规则可以修复Chrome+for+Mac|4409709|image-rendering:+-webkit-optimize-contrast;|code-block|syntax|javascript|4409710|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I found the exact same issue on Mac: Firefox downscales the image really well, while Chrome makes it look blurry, which is very bad.
I couldn't care less about rendering time or speed, I need the logo to look GOOD!
I found the following CSS rule fixing Chrome for Mac
<pre><code>image-rendering: -webkit-optimize-contrast;
</code></pre>

blocks|key|4409792|text|我发现用过的transform:+translateZ(0);就是工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4409793|类似的问题：https://stackoverflow.com/questions/39347200|4409794|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/39347200^0|6|P|0|6|18|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

i find used <code>transform: translateZ(0);</code> is work.
by the similar question：https://stackoverflow.com/questions/39347200

blocks|key|4409811|text|在Windows的Chrome和Mac的image-rendering:+-webkit-optimize-contrast;中使用will-change:+transform;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4409812|entityMap^0|K|17|1U|N|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Use <code>will-change: transform;</code> in Chrome for Windows and <code>image-rendering: -webkit-optimize-contrast;</code> for Mac.

blocks|key|4409583|text|我提出了另一条轨道，因为我也遇到了同样的情况:在chrome下，图像稍微模糊了一些，但在firefox下，图像是无可挑剔的。Ctrl+%2B+"0"解决了这个问题。我有一天不得不使用变焦(Ctrl+%2B+"%2B"或"-")，但没有完全重置它……|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4409584|entityMap^0|1Q|A|2K|A|2V|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

I propose another track because I was in the same situation: images slightly blurred under chrome but impeccable under firefox. <code>Ctrl + "0"</code> solved the problem. I had to one day use the zoom (<code>Ctrl + "+"</code> or <code>"-"</code>) and did not reset it completely ...

blocks|key|4409859|text|我可以完成这个帖子了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4409860|我发现了一个可以被认为是bug+(或者可能是一个特性)的东西。|4409861|如果你用CSS将一个大的正方形位图图像(比如500px+x+500px+JPEG+)中的logo缩小到63px+x+63px正方形，结果在Chrome97.0.4692.99版或我电脑上任何基于WebKit的浏览器上都会变得非常模糊。(Opera，Edge)，但不是Firefox。|4409862|更改为64px+x+64px，结果突然变得更好。|4409863|我认为WebKit认为小尺寸的图像并不重要，因此可以使用不同的、更快的模糊算法进行缩放。|4409864|如果你把网站上的logo缩小到63px或60px，考虑把它们做大一点。在您的检查器中测试以验证渲染是否令人满意。|4409865|欢迎大家光临！|4409866|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|S|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

I may complete this thread.
I found what could be considered as a bug (or maybe it's a feature).
If you downscale with CSS a logo in a big square bitmap image (500px x 500px JPEG for example) to 63px x 63px square, the result is very blurry in Chrome Version 97.0.4692.99 or any WebKit based browser I have on my computer. (Opera, Edge) But not Firefox.
Change to 64px x 64px, suddenly the result is better.
I suppose WebKit consider small sized images as unimportant and therefore could be scaled with a different, faster yet blurry algorithm.
If you scaled down logos on your website to 63px or 60px, consider making them a little bigger. Test in your inspector to verify if the rendering is satisfying.
You're all welcome!

blocks|key|4409727|text|我发现解决这个问题的最好方法就是使用svg。另一种选择是使用css媒体查询来加载自适应图像大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4409728|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I've found that the best way to resolve this issue is to just use an svg. Another option is to use css media queries to load adaptive images sizes.

I am using gravatars and it's rather often when I downscale them with css, and I believe Google Chrome used to do it properly until recently ( I may be wrong, not sure when exactly the problem started to occur ) but now, images get blurred when downscaled, and that happens only in Chrome, FF downscales pretty good. I tried using <code>image-rendering</code> but it doesn't solve the problem. Can someone give me a hint what is the best way to go about it?

The example can be found <a href="https://jsfiddle.net/6Lsz62cp/1/" rel="noreferrer">here</a>, open it in Chrome and then in FF, it should be way more blurred in Chrome than in FF.

Thank you

Blurry downscaled images in Chrome

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用gravatars，当我使用css缩小它们时，这是相当常见的，我相信Google Chrome直到最近才能正确地做到这一点(我可能是错的，不确定问题到底是什么时候开始发生的)，但现在，当缩小比例时，图像会变得模糊，而且这种情况只发生在Chrome，FF缩小比例相当好。我试过使用image-rendering，但它不能解决问题。有人能给我一个提示吗?最好的方法是什么？这个例子可以找到，在C

问Chrome中的模糊缩小图像
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome中的模糊缩小图像EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Chrome中的模糊缩小图像
EN