Преобразование изображений спрайтов в дисплей Retina

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

вот как я использую спрайт для сетчатки и нормал

для обычного экрана

.logo {
background:url('../images/big-icons.png');
  background-position: -241px -289px;
  width: 217px;
  height: 69px;
}

.footer-logo {
background:url('../images/big-icons.png');
  background-position: -239px -359px;
  width: 217px;
  height: 69px;
}

для сетчатки

@media (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) { 
    .logo{
    background:url('../images/big-icons@2x.png');
    background-size: 200px 100px;
    background-position: -375px 0; width: 434px; height: 138px;
}

.footer-logo{
    background:url('../images/big-icons@2x.png');
    background-position: -375px -158px; width: 434px; height: 138px;
}

}

изображения повторяются на дисплее сетчатки.. как я пишу стиль спрайта для дисплея сетчатки..

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

Ответы (1)

Размытие вводится во время масштабирования.

Если вы предоставляете два набора изображений, поработайте над 2-кратным размером и уменьшите масштаб для второго набора, подправив любые части, в которых возникают проблемы после масштабирования (иногда правила, границы и т. д. становятся слишком тонкими, и их нужно увеличить {и т. д. и т. д.}) .

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

Так:

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

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

И последнее: не полагайтесь на смоделированные предварительные просмотры для оценки визуального качества.

РЕДАКТИРОВАТЬ

Я упоминаю «устройства с сетчаткой» в связи с тем, что не учитываются размеры устройств, но это такая же проблема мобильного браузера, как и просто «сетчатка». Причина, по которой требуются изображения «retina» и схема имен file@2x, заключается в том, что ОС и браузер на устройствах с подключенными дисплеями намеренно изменяют числа: они пытаются исправить физический размер просмотра, что является очень сложной проблемой, учитывая разнообразие размеров экрана и кабелей.

Преобразование изображений спрайтов в дисплей Retina
СпросиСетьПолитика конфиденциальности1y, 0v