웹킷 래스터 벡터 이미지

Question

웹킷 브라우저 용 HTML을 디자인 할 때 해결 문제를 해결하려고합니다. 기본적으로 문제는 웹킷 브라우저가 240x320에서 960x640까지의 해상도를 가질 수 있으며 각 이미지마다 별도의 이미지/아이콘을 설정할 수는 없지만 페이지가 모든 기기에서 동일하게 보이길 바랄뿐입니다. 가장 작은).

이미지 (비율로 작업을) 작품 스케일링하지만 성능이 열화이다 : http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

다른 옵션 웹킷에서 지원하지만 난에가는 성능에 미치는 영향을 인식하지 오전 벡터 그래픽을 사용하고 있습니다 페이지/앱에있다.

다른 옵션은 몇 가지 표준 잘 알려진 해상도에 대해 설정하고 이러한 그룹 외부에있는 브라우저를 얻으면 사용자 네이티브 해상도에 가장 근접한 일부 작은 배율을 적용합니다.

기본적으로 내가 부탁하는 바는 성능을 염두에두고이를 달성하는 가장 좋은 방법은 무엇일까요?

감사 -Assaf 복잡한 방정식을 만들 실행으로

Answer 1

Vector graphics 런타임 성능면에서 항상 더 비싸다. 그런데, 처음부터 모든 프레임을 다시 그려야하는지, 아니면 더티 상태에 있지 않으면 결과가 캐시되는지 확실하지 않습니다.

잘 알려진 해상도에 대해 몇 가지 아이콘 세트를 사용하고 필요한 경우 작은 비율로 적용하는 것이 좋습니다.

Answer 2

첫 번째 대답은 전혀 도움이되지 않습니다. 벡터 그래픽은 PNG만큼 작을 수 있으며 사용 된 오른쪽은 투명도와 다양한 기타 좋은 기능을 지원할 수 있습니다.

유일한 문제는 일부 이미지의 크기가 완벽 해지기를 원하는 경우 문제가 발생할 수 있다는 것입니다.

일러스트 레이터를 사용하여 html5 캔버스 플러그인을 사용하여 html5 캔버스로 직접 내보낼 수도 있습니다.

행 아이콘의 Webkit 브라우저의 경우, 우리는 Webkit이 데스크탑 브라우저의 아이콘 크기를 조정할 수 없도록하는 특성을 설정합니다. 또는 일부 아이콘에는 작은 SVG가 포함됩니다.

잘 지원되고 잘 작동합니다. 무료 폰트 생성 도구를 사용하여 삽화가의 벡터 그래픽을 폰트에 붙여 넣기 만하면 웹 글꼴을 사용하여 간단한 텍스트처럼 모든 크기 아이콘을 불러올 수 있습니다. 우리는이 기술을 사용합니다.