Webkit растровые и векторные изображения

Question

Я пытаюсь решить проблему с разрешением при разработке HTML для браузеров webkit.В общем, проблема в том, что браузеры webkit могут иметь разрешение от 240x320 до 960x640, и у меня не может быть отдельного изображения / значка для каждого, но я хочу, чтобы страницы выглядели одинаково на всех устройствах (или, по крайней мере, очень близко).

Масштабирование изображения (работа с процентами) работает, но это снижение производительности: http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

Другой вариант - использование векторной графики, которая поддерживается в webkit, но я не в курсепоследствия для производительности, которые будут иметь место на страницах / в приложении.

Другой вариант - иметь несколько наборов значков для некоторых стандартных хорошо известных разрешений, и когда вы получаете браузер, который находится за пределами этих групп, вы применяетеНекоторое незначительное масштабирование на наборе, которое ближе всего к собственному разрешению пользователя.

Итак, в основном я спрашиваю, каков наилучший путь для достижения этой цели с учетом производительности?

Спасибо-Assaf

Answer 1

Векторная графика всегда дороже с точки зрения производительности во время выполнения, поскольку для их создания используются сложные уравнения.Сказав это, я не уверен, перерисовывают ли они каждый кадр с нуля, или результат кэшируется, если он не находится в грязном состоянии.резолюции и применение незначительного масштабирования, если требуется.

Answer 2

Первый ответ не поможет вообще.Векторная графика может быть такой же маленькой, как PNG, и при правильном использовании может поддерживать прозрачность и другие полезные функции.

Единственная проблема в том, что если вы ищете идеальное совершенство пикселей с увеличением масштаба некоторых изображений, могут возникнуть проблемы..

Вы также можете использовать иллюстратор для плагина html5 canvas для экспорта напрямую в html5 canvas.

Для наших веб-браузеров на значках строк мы устанавливаем свойство, которое не позволяет веб-пакету масштабироватьиконки для настольных браузеров.Или для некоторых иконок мы включили небольшой SVG.

Они хорошо поддерживаются и отлично работают.Еще лучше было бы использовать бесплатный инструмент создания шрифтов и вставлять векторную графику из иллюстратора в шрифт, чтобы вы могли использовать веб-шрифт, чтобы просто вызывать иконку ЛЮБОГО размера, как простой текст.Мы используем эту технику.