Как избежать размытия при масштабировании фоновых изображений для сайтов?

Чтобы избежать размытия при масштабировании фоновых изображений для сайтов, можно использовать расширение SmartUpscale для веб-браузеров Firefox и Chrome. tanalin.com Оно применяет целочисленное масштабирование к изображениям на веб-страницах. tanalin.com Для каждого изображения масштаб определяется индивидуально. tanalin.com

Также можно применить следующие рекомендации:

• Указывать размеры изображения в относительных величинах. ru.stackoverflow.com Например, при параметре width: 50% изображение в ширину будет занимать 50% вмещаемого элемента, а не области просмотра или актуального размера в пикселях. ru.stackoverflow.com
• Добавить к элементу img атрибут srcset. ru.stackoverflow.com Он позволяет определять список источников изображений и условий (через запятую) до поступления запроса. ru.stackoverflow.com В результате загружаются и выводятся на экран только те изображения, которые соответствуют параметрам устройства. ru.stackoverflow.com
• Перевести растровый слой в смарт-объект. vk.com Это как бы замораживает картинку и не даёт ей разрушаться при разных действиях. vk.com Однако смарт-объект сохраняет все первоначальные сведения о картинке, в том числе её исходные размеры. vk.com Поэтому на не слишком шустром компьютере не стоит в одном файле сохранять огромные картинки в смарт-объектах. vk.com Лучше сначала уменьшить изображение до приемлемых размеров, а потом «заморозить» в смарт-объект для сохранения качества. vk.com