Как вы справляетесь с масштабированием браузера клиента?

22

У меня много картинок на странице, в галерее. Я хочу, чтобы изображения оставались четкими, поэтому я не делаю масштабирование в браузере, я использую исходные размеры изображения.

Однако это работает только тогда, когда уровень масштабирования браузера составляет 100%. При увеличении или уменьшении уровня масштабирования качество изображений снижается.

Некоторые клиенты по умолчанию имеют разные уровни масштабирования. Мне было интересно, как вы можете справиться с этим, и мы справимся с этим вообще?

ура

browser zoom usability

— Джон
источник

1

Отличный вопрос, это то, что меня часто беспокоит. Эта статья полезна для ознакомления , но пока я не нашел идеального ответа на этот вопрос, кроме вставки изображений размером x2 с фиксированной шириной и высотой и возможности сортировки в браузере (имеет очевидные недостатки, но исправляет это и проблемы с плотностью пикселей) ).

— user56reinstatemonica8

Я не уверен, какой ответ вы ожидаете. Очевидно, вы не хотите использовать автоматическое изменение размера. Вы спрашиваете, как запретить браузеру изменять размеры изображений, чтобы другие элементы были расположены вокруг исходного размера изображения? Как автоматически доставлять подготовленные изображения для каждого возможного уровня масштабирования? Или что ты имеешь в виду? Кроме того, почему ты хочешь это сделать? Если пользователь испытывает затруднения при правильном просмотре страницы при исходном увеличении, он, вероятно, не заметит разницы между резким и автоматически изменяемым размером после увеличения.

— Руми П.

6

Вы не справитесь с этим. Это предпочтение пользователя. Не нужно вмешиваться в это.

— DA01

1

Он не спрашивает, как мешать предпочтениям пользователя. Он спрашивает , как справиться с тем , что многие пользователи будут наведена по умолчанию, и , следовательно , будут получать зернистые изображения , если изображение на их первоначальных размеров.

— user56reinstatemonica8

@ user568458 да. Вот как это работает. Там действительно не с чем справиться.

— DA01

21

Я думаю, что большинство других ответов упустили суть: речь идет не о переопределении пользовательских предпочтений, а о предоставлении изображений наилучшего качества в обычном сценарии, когда пользовательское устройство назначает более одного физического пикселя для каждого пикселя CSS или « Ссылочный пиксель». "в вашем изображении, в результате браузер масштабирует изображение, делая его пиксельным и зернистым.

Мои предлагаемые решения ниже, но сначала вот четыре способа, которыми это может произойти:

Наиболее редко: пользователь выбирает увеличение . Не такая большая проблема, так как это их выбор.
Удивительно часто: браузер пользователя по умолчанию увеличен . Например, многие Windows-машины с высокой плотностью пикселей по умолчанию увеличены до 125% или более, и Firefox недавно (смущает!) Сделал это так, что в этих случаях он сообщает пользователям, что они увеличены до 100%, когда они фактически увеличены до 125%. оставляя их почесывать головы, удивляясь, почему все вдруг выглядит зернистым.
Очень часто: большинство Android-устройств (и других устройств?) Имеют соотношение пикселей больше 1. Это означает, что каждый «CSS-пиксель» на самом деле отображается с использованием более одного физического пикселя - поэтому изображение размером 200 на 200 пикселей width: 200px; height: 200px;будет масштабироваться изображение размером 200 на 200 пикселей и размером более 200 на 200 пикселей, что потенциально делает его зернистым.
Очень часто: многие современные устройства Apple имеют « дисплеи сетчатки ». По сути, это то же самое, что и устройство Android с соотношением пикселей 2, но с улучшенным маркетингом и несколькими пользовательскими свойствами, которые позволяют определять его по имени.

Любое из них приведет к проблеме Джона с галереей изображений, выглядящих удивительно зернистыми.

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

Если возможно, используйте vector - SVG (или Raphael.js, если вам все еще требуется поддержка IE8). Реально, это только опция для иконок, диаграмм и т. Д., И это никогда не вариант для фотографий. Очень сложные SVG также могут быть неуклюжими на мобильных устройствах низкого уровня из-за требуемой обработки.
Если возможно, определите соотношение пикселей устройства и предоставьте изображения на его основе. Это также может решить проблему Firefox на Windows, потому что Firefox на Windows изменяет свое считывание соотношений пикселей при увеличении и уменьшении масштаба. Недостатком является то, что это становится сложной проблемой кодирования, связанной с разработкой на стороне сервера и клиента.
Если 1. и 2. невозможны, но это действительно важно, и качество изображения важнее, чем, скажем, время загрузки, просто удвойте изображение.
- Это то, что Google делает со своим логотипом на своей домашней странице: они помещают изображение PNG размером 538 x 190 пикселей в контейнер размером 269 x 95 пикселей. Это также более или менее похоже на то, как работают адаптивные изображения.
- Раньше это считалось плохой практикой, потому что старые версии IE были ужасны при уменьшении размеров изображений, но сейчас они используются очень редко и гораздо реже, чем экраны с высокой плотностью пикселей. Это все еще несколько нежелательно, так как это увеличит размер изображения и, следовательно, увеличит время загрузки - это компромисс, который вы должны судить в каждом конкретном случае.
- Размер удвоения является обычным явлением, поскольку очень немногие устройства имеют коэффициент больше 2, очень мало пользователей увеличивают масштаб более чем на 200%, а масштабирование изображений на 50% чище, чем другие значения.
Если 1, 2 невозможны, а время загрузки является слишком высоким приоритетом для 3, я не знаю других вариантов, и я рекомендую не беспокоиться об этом, потому что половина сайтов в Интернете имеют ту же проблему , и люди с этой проблемой на вашем сайте также будут иметь эту проблему на других сайтах. Черт, Firefox на Windows даже пикселирует свои собственные кнопки пользовательского интерфейса ...

— user56reinstatemonica8
источник

Я утверждаю, что увеличение пользователей является «самым редким». Именно поэтому эта функция используется в первую очередь ... для увеличения. Кроме того, хотя есть интересные идеи по использованию изображений с более высоким разрешением при увеличении, обратите внимание, что с этим могут быть проблемы с удобством использования. Например, я не хочу, чтобы браузер получал новые изображения каждый раз, когда я нажимал на кнопку увеличения в своем браузере.

— DA01

2

Если вы используете jpgs, удвоение размера изображений (как упомянуто в 3) и сохранение их с достаточной степенью сжатия изображения (качество не ниже 40) может дать вам файлы небольшого размера. После уменьшения артефакты сжатия не видны. Результаты различаются, особенно если изображения содержат градиенты.

— Доминик

1

Несмотря на то, что на момент написания статьи он был очень новым и поэтому плохо поддерживал, новый элемент <picture>, по- видимому, заслуживает упоминания здесь.

— user50849 9.09.14

1

Примечательно: при сохранении для веб-сайтов в фотошопе, если установить jpg-качество равным 61% при удвоении предполагаемых размеров, размер файла будет почти точно таким же, как и предполагаемые размеры при 100%. Поэтому я начал сжимать все свои JPEG-файлы до 61% и обрабатывать их с определенной высотой / шириной (что также дает браузеру возможность узнать больше о макете еще до загрузки изображения!)

— Кьельд Шмидт,

4

Как прокомментировал DA01, вы не должны ничего с этим делать.

Масштабирование - это пользовательская опция, поэтому она находится под их контролем. Настройки, которые они решают испортить, не должны быть вашей ответственностью.

Вы можете учитывать разные браузеры и версии, а что нет, но разумно говоря, вы не должны учитывать увеличение пользователя.

Конечно, вы можете составлять 125% или 150% (а вам может и не понадобиться). Но 200%, 300%, больше? Это просто не имеет никакого смысла.

Что если пользователь использует высококонтрастную тему Windows? Что делать, если они постоянно используют лупу? Какая разница?

В идеале ваш веб-сайт достаточно гибок, чтобы он не отличался от небольшой разницы при увеличении, но качество изображения будет ухудшаться с увеличением, но это не ваша ответственность.

Это, конечно, только мое мнение, но компания, в которой я работаю, также явно говорит клиентам, что мы не поддерживаем их предпочтения масштабирования.

— Ханна
источник

что такое пользователи со сверхширокими или узкими гамма-устройствами и т. д. и т. д. .... да, я согласен

— joojaa

1

Другие люди дали несколько хороших советов по проблемам, с которыми вы столкнетесь, и я недостаточно хорош в этой области, чтобы сделать хороший урок, но ...

Возможно, вы захотите создать адаптивный сайт, который будет настраиваться в соответствии с res / device пользователя, и тогда вы, вероятно, ищете код, который будет переключать изображения на файлы с более высоким или более низким разрешением по запросу, а не растягивать и сжимать имеющиеся у вас изображения.

Когда я в последний раз пытался это сделать, я использовал media-query.js и picturefill.js. Смотрите: http://responsivedesign.is/resources/images/picture-fill . У меня был макет из 3 столбцов, в котором некоторые изображения занимали два столбца ... Когда окно браузера становилось достаточно маленьким, большие изображения переключались на версию с меньшим разрешением, шириной всего в один столбец. Браузер пользователя просто загрузит нужную ему версию файла. (и в моем случае плагин кладки переместил бы все, чтобы приспособиться).

Конечно, тогда ваш пользователь должен иметь включенный JavaScript ...

— marcusdoesstuff
источник

Хотя я полностью за адаптивный веб-дизайн, он решает другую проблему (переориентацию для обработки браузеров другого размера), чем пользовательское масштабирование (пропорциональное изменение размера всего, независимо от размера браузера)

— DA01

0

Вы не можете заставить пользователей руку. Пользовательские настройки не ваши, чтобы играть с. Настройки и их обход - плохая идея, может быть причина, по которой пользователь что-то сделал. В любом случае вы не можете гарантировать что-либо на разных устройствах.

На самом деле, если вы перейдете на техническую сторону, это станет еще интереснее. Вы действительно даете ключи от королевства со своей веб-страницей. Посмотрите, как пользователь загружает веб-страницу, и теперь пользователь может делать с ней все что угодно. Вы не можете контролировать этот слой, ведь он работает на компьютере пользователя, и они могут делать все, что пожелают. Даже stackexhange на моем компьютере / мобильном устройстве не выглядит так же, как на вашем. Я автоматически изменяю некоторые аспекты графического интерфейса, чтобы исправить 2 ошибки рендеринга и добавил 2 ярлыка.

— joojaa
источник

3

Я думаю, что они не пытаются предотвратить увеличение масштаба пользователя, но убедитесь, что, например, если браузер пользователя по умолчанию использует увеличение 125%, потому что Windows странная , изображения по-прежнему выглядят четкими и не выглядят пиксельными.

— user56reinstatemonica8

1

Неважно, одно и то же

— joojaa

2

Это на самом деле не одно и то же ... например, логотип Google - это PNG-изображение размером 538 x 190 пикселей в контейнере размером 269 x 95 пикселей. Это означает, что если вы увеличили масштаб изображения или использовали экран с высокой плотностью пикселей, изображение с меньшей вероятностью будет иметь пикселизацию, поскольку браузер может использовать эти дополнительные данные пикселей. Google не играет с настройками масштаба пользователя, делая это.

— user56reinstatemonica8

То, что вы делаете в конце концов, зависит от вас, да. Но если кто-то использует увеличение на 259%, тогда ..

— joojaa

1

хорошо ваше мышление сегодня, все изменится в будущем, очень близком будущем. Таким образом, любой, у кого проблемы со зрением, может иметь сегодня 200%, а завтра 200% будут нормой, что только усугубит проблему. В любом случае проблема рано или поздно вырастет из-под контроля. Вы просто не можете сделать больше, чем временные победы, система должна измениться.

— joojaa

0

Раздражающее поведение масштабирования изображений на экранах HiDPI, которое приводит к размытым фотографиям (так называемый кошмар фотографов), также беспокоило меня в течение достаточно долгого времени. Мне также было интересно, что нет простого атрибута CSS, чтобы отключить его для изображений.

Мое текущее решение с использованием CSS выглядит следующим образом:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

Следующим шагом будет использование классов для определения и установки различных размеров изображения, если это необходимо. Я не знаю способ динамического получения размеров изображения. Функция CSS attr (), кажется, не работает для этого.

— egrimpa
источник

-1

Так что это был бы скорее вопрос программирования. Но используя JQuery, или даже просто плоскость CSS, вы можете отображать различные изображения в зависимости от ширины экрана пользователя, высоты экрана и так далее.

Опять же, хотя это, вероятно, не стек обмена, чтобы спросить.

— Даниил
источник

Вопрос не в размере экрана. Речь идет о настройках масштабирования браузера.

— DA01

-1

Вы можете просто сделать это с помощью HTML в заголовке сайта добавить это

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

— Зак Гриерсон
источник

Я не думаю, что это имеет какое-либо влияние на настольный браузер.

— DA01

1

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

— user56reinstatemonica8

-1

Надеюсь, это поможет: css rule transform: масштабирование по тегу body или другое - не идеально, смотрите здесь, пожалуйста:

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741

— user88459
источник

Добро пожаловать в графический дизайн! Хотя это может теоретически ответить на вопрос, было бы предпочтительным включить здесь основные части ответа и предоставить ссылку для справки.

— Лучано