Картинки мутные только на сафари, есть выход?
Во всех других браузерах все ок - хром, мозилла, мс, опера, тор.
Насколько выявил закономерность, то свг, которые добавлены как
<img src="image.svg" />
Пробую добавлять инлайново, тогда не мутные на сафари, но начнут же орать, что "код невалидный" и кидать эти дурные подчеркнутые красным скиншоты. И так не так, и так не так. Ну и объективно не все свг на 4 строчечки, есть на 244.
Есть какой-то правильный способ, чтоб и на сафари картинки были не мутные?
Дополнительно:
Какое отношение валидность имеет к инлайн svg?
Мутность может происходить, если svg нарисована "мимо пикселей". Открыть, подправить.
Попробуйте следующие варианты:
img { image-rendering: optimizeQuality; } |
img { image-rendering: optimizeQuality; }
или:
<object type="image/svg+xml" data="img.svg" width="100" height="100"></object> |
<object type="image/svg+xml" data="img.svg" width="100" height="100"></object>
или:
<embed type="image/svg+xml" src="img.svg" width="100" height="100"/> |
<embed type="image/svg+xml" src="img.svg" width="100" height="100"/>
- спасибо, помогло!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для начала, давайте разберемся, почему картинки могут выглядеть мутными только на Safari. Возможно, проблема связана с тем, что Safari использует другой метод интерполяции для изменения размеров изображений по сравнению с другими браузерами. Это может привести к тому, что изображения выглядят более размытыми или менее четкими.
Чтобы решить эту проблему и улучшить качество изображений на Safari, можно попробовать следующие методы:
1. Использование CSS свойства image-rendering: optimizeQuality. Это свойство позволяет улучшить качество изображений на Safari, задав оптимальное качество интерполяции.
2. Проверьте размеры и разрешение изображений. Убедитесь, что изображения имеют достаточное разрешение для отображения на экране с высокой плотностью пикселей, таком как Retina дисплеи.
3. Используйте форматы изображений с поддержкой масштабирования без потерь, такие как SVG или WebP. Эти форматы обеспечивают более четкое отображение изображений на различных устройствах.
Примените эти методы к вашему веб-сайту, чтобы улучшить качество изображений на Safari и обеспечить пользователям более четкое визуальное восприятие контента. Не забудьте также проверить совместимость с другими браузерами, чтобы не потерять качество изображений на других платформах.
.image { image-rendering: optimizeQuality; }.image { image-rendering: optimizeQuality; }
Следуя этим советам, вы сможете улучшить качество изображений на Safari и создать более приятный пользовательский опыт на вашем веб-сайте.