Размытые уменьшенные изображения в Chrome

Я использую gravatars, и довольно часто я уменьшаю их масштаб с помощью css, и я считаю, что Google Chrome до недавнего времени делал это правильно (могу ошибаться, не уверен, когда именно проблема начала возникать), но теперь изображения становятся размытыми, когда уменьшено, и это происходит только в Chrome, FF довольно хорошо уменьшает масштаб. Я пытался использовать image-rendering, но это не решает проблему. Может ли кто-нибудь дать мне подсказку, как лучше всего это сделать?

Пример можно найти здесь, откройте его в Chrome, а затем в FF, он должен быть более размытым. в Хроме, чем в ФФ.

Спасибо


google-chrome html css firefox gravatar
person NoDisplayName    schedule 19.06.2016    source источник
comment
superuser.com/questions/530317/ довольно хорошо описывает эту проблему.   -  person Mathias W    schedule 19.06.2016
comment
@MathiasW Это другая проблема, я ничего здесь не увеличиваю. Просто откройте эту ссылку в FF и Chrome (без увеличения) и посмотрите, как изображение в Chrome размыто.   -  person NoDisplayName    schedule 19.06.2016
comment
Эта проблема, кажется, вернулась 10 мая 2017 года, я почти уверен, что изображения не были нечеткими, но в настоящее время на рабочем столе Chrome они нечеткие, настройка ответа webkit устраняет проблему (и изображения в Firefox в порядке)   -  person James    schedule 10.05.2017
comment
Было бы неплохо увидеть ваш полный код. Например, image-rendering не работает, это мало помогает, если мы не знаем используемое вами значение (тем более, что оно используется в принятом ответе)   -  person shaedrich    schedule 07.04.2021

Ответы (6)


arrow_upward
111
arrow_downward

Я обнаружил точно такую ​​же проблему на Mac: Firefox действительно хорошо уменьшает масштаб изображения, в то время как Chrome делает его размытым, что очень плохо. Мне плевать на время или скорость рендеринга, мне нужно, чтобы логотип выглядел ХОРОШО!

Я нашел следующее правило CSS, исправляющее Chrome для Mac

image-rendering: -webkit-optimize-contrast;
person pastullo    schedule 14.02.2017
comment
спас мой день - также работает с фоновыми изображениями. Странно, что Chrome действительно плохо справляется с уменьшением размера PNG без этого правила. - person low_rents; 24.11.2017
comment
Осторожно: это привело к тому, что мои изображения были неровными/пиксельными в Safari. - person benjarwar; 19.01.2018
comment
Есть ли способ автоматически применить это ко всем веб-страницам в Chrome? Нравится глобальный стиль CSS? - person Mr-IDE; 22.01.2018
comment
У меня это не работает в Chrome 64.0.3282.186 для Mac. - person Badger; 05.03.2018
comment
@Badger Вы можете попробовать image-rendering: pixelated; - person Chris S.; 05.06.2019
comment
Все еще проблема в 2020 году, и этот ответ все еще помог мне (в Chrome 83) - person manroe; 16.06.2020
comment
Работает очень хорошо! Спасибо. Однако для логотипа вы должны использовать svg. Тогда он всегда будет выглядеть идеально резким. - person Skovsgaard; 09.08.2020
comment
Работает как шарм (и хром, и сафари)! - person Sebi; 08.11.2020
comment
Ты легенда!! Работал как мечта! Спасибо приятель! - person James Osguthorpe; 24.11.2020
comment
Вау, это реально круто, хотя все же немного хуже, чем в ФФ, теперь хоть глаза не печет - person portal TheAnGeLs; 08.12.2020
comment
Не работает для Chrome 87 в Linux Mint. - person yendrrek; 19.12.2020
comment
Это больше не действует в Chrome на Mac. - person Anna T; 11.05.2021
comment
По состоянию на июль 2021 года это по-прежнему вызывает неровные/некрасивые края в Safari на macOS. Похоже, что transform: translateZ(0); — единственное решение, которое работает везде. - person Michael; 10.07.2021

arrow_upward
16
arrow_downward

я нахожу подержанный transform: translateZ(0); это работа.

по аналогичному вопросу: https://stackoverflow.com/questions/39347200

person liujigang    schedule 07.04.2021
comment
Можете ли вы предоставить информацию, почему это решает проблему вопроса? - person shaedrich; 07.04.2021
comment
Протестировано на основе Chromium (проверено Chrome, Edge и Brave). Согласно этой статье, рендеринг выполняется с помощью аппаратного 3D-ускорения/графического процессора и может вызвать проблемы с анимацией CSS, поэтому лучше использовать с осторожностью. blog.teamtreehouse.com/ - person Daniel Lemes; 06.05.2021
comment
это сработало для меня на Mac, Chrome - person Moiz; 06.07.2021
comment
Работал как шарм, вплоть до Chrome 81 включительно. Похоже, больше не работает с 82 и 83 (dev). - person mbw; 02.08.2021

arrow_upward
1
arrow_downward

Я предлагаю другой трек, потому что я был в той же ситуации: изображения слегка размыты под хромом, но безупречны под фаерфоксом. Ctrl + "0" решил проблему. Пришлось в один прекрасный день использовать зум (Ctrl + "+" или "-") и не сбрасывал полностью...

person delaio    schedule 13.08.2019

arrow_upward
1
arrow_downward

Используйте will-change: transform; в Chrome для Windows и image-rendering: -webkit-optimize-contrast; для Mac.

person Alexander Orlov    schedule 10.05.2021

arrow_upward
-2
arrow_downward

Я обнаружил, что лучший способ решить эту проблему — просто использовать файл svg. Другой вариант — использовать медиа-запросы css для загрузки адаптивных размеров изображений.

person ShaneDaugherty    schedule 14.02.2017
comment
Для многих изображений это не вариант. Кроме того, они полностью не поддерживаются (см. примечания для IE): caniuse. com/#feat=svg - person carefulnow1; 03.06.2017
comment
Даже Microsoft не хочет*, чтобы вас это больше заботило. *) zdnet.com/article/ - person Chris S.; 05.06.2019
comment
Не уверен, почему этот ответ имеет такой низкий рейтинг. На самом деле это самое оптимальное решение. Большинство современных инструментов дизайна теперь поддерживают svg экспорт для любого ресурса. - person D_S_X; 29.07.2021

arrow_upward
-2
arrow_downward

Обновлять

Я не осознавал, что размер изображения после использования 2x соответствовал целевому размеру, и браузер не уменьшал масштаб. Это решение работает только в том случае, если вы можете использовать контейнер фиксированного размера для изображения.

tl;dr

Установите масштаб изображения, и Chrome правильно уменьшит масштаб. Протестировано в Chrome 84.

Важной частью является использование srcset с 2x в конце.

<img srcset="image-2x.png 2x" alt="alt">

Полный ответ

Я пробовал image-rendering: -webkit-optimize-contrast. Это улучшило отображаемое изображение в Chrome, но также дало мне плохо выглядящую версию изображения в Safari.

Сначала мне нужно было уменьшение масштаба, потому что 2-кратная версия изображения по-прежнему нужна для дисплеев Retina (иначе масштабирование может выглядеть размытым). Поэтому я решил создать две версии (1x и 2x).

После добавления обоих я увидел, что если использовать только исходное 2-кратное изображение, но с 2x, указанным в srcset, то изображение больше не будет размытым.

person rareyesdev    schedule 19.07.2020