Вопрос
Итак, когда я масштабирую фоновое изображение в CSS3, используя свойство background-size, вот так:
.one {
background-image: url(sprites/1.png);
background-size: 100% 100%;
}
затем масштабирует изображение: 
Как сделать так, чтобы картинка не была такой размытой? Возможно ли это без изображения с более высоким разрешением?
Если все фоновое изображение представляет собой просто черную линию, как показано, перед сохранением изображения измените его на индексированное изображение (вместо RGB) и задайте ему индекс только из двух цветов. Таким образом, не будет размытия (сглаживания) и он будет отлично масштабироваться. Это также сделает ваше фоновое изображение очень маленьким размером файла, что способствует быстрой загрузке. Сохраните проиндексированное изображение в формате png или gif.
В качестве альтернативы вы можете использовать тип изображения, такой как SVG, который обрабатывает операции масштабирования.
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
Хотя спецификация SVG в первую очередь ориентирована на язык разметки векторной графики, ее дизайн включает в себя основные возможности языка описания страниц, такого как Adobe PDF. Он содержит положения для богатой графики и совместим с CSS для целей стиля. SVG содержит информацию, необходимую для размещения каждого глифа и изображения в выбранном месте на печатной странице.
Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.