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