
Ни для кого не секрет, что количество устройств, поддерживающих высокое разрешение, aka retina постоянно растет.
Планшеты, макбуки с ретиной, телефоны - у всех сверхчеткое разрешение, а ваш сайт все еще покрыт огромным количеством
пикселей. Не грустим, все что нам нужно сделать - создать новые картинки. И их размер должен быть ровно в 2 раза больше.
Простого способа переделать все графические элементы не существует. Я, конечно, надеюсь что для начала у вас все
еще есть оригинальные векторные изображения. Тем не менее, проблема кроется не в том, что вам придется создавать все
графические элементы заново. Проблема заключается в том, что вам потребуется поддерживать и старые устройства, для которых
не требуются детальные изображения. Более того, вы не можете изменять ширину или высоту div контейнеров, содержащих
фоновые графические элементы, так как вы всего лишь получите большое изображение, пестрящее “огромными” пикселями.
Преобразуем ваши спрайты для работы с ретиной
Первая и самая важная вещь - графические элементы должны быть ровно в 2 раза больше в размере, для того, чтобы данный
способ сработал.