캔버스를 사용하면 이미지를 사용하는 것보다 작은 HTTP 요청이 발생합니다.

Question

이미지 형식을 SVG로 변환하는 것은 쉬운 일이 아니며 복잡한 이미지를 추구하는 것이 아닙니다. 왜 내가이 질문을하고 있는지 설명해 드리겠습니다. 웹 디자이너로서 사이트에 일반적으로 이미지를 사용하는 요소가 있습니다. 여기에는 간단한 기하학적 모양, fleur-de-lis, 간단한 로고 등이 포함됩니다. 이러한 HTTP 요청의 비용은 상대적으로 적습니다 (여기서는 KB가 있습니다).

그러나 간단한 이미지의 이미지 형식 대신 svg 또는 다른 캔버스 요소를 사용하여 이러한 요청을 더 작게 만들 수 있다면 관심이 있습니다. SVG와 이미지를 비교하기위한 연구 나 테스트가 있습니까? 내 페이지의 간단한 요소에 캔버스를 사용하여 HTTP 요청을 더 작게 만들 수 있습니까? 그렇다면 좋은 소식이 될 것입니다. 캔버스 이미지 라이브러리를 만들어서 재사용하고 다른 사람들과 공유 할 수도 있습니다.

Answer 1

이 경우에 따라 달라질 것이라고 생각합니다.

스프라이트가 도움이 될 수 있지만 스프라이트에 간단한 라인이 포함되어 있지만 500px * 500px 여야한다면 ... 캔버스 (또는 심지어 svg)가 실제로는 훨씬 작을 것입니다. 그 외에, 외부 자바 스크립트는 대개 캐싱됩니다 (심지어 이미지보다 낫습니다). 그 점에서 그들은 실제로 무게를 줄이는 데 도움이됩니다.

그러나 IE가 '작동'할 것으로 예상되는 경우 html5/캔버스 shims를 제공해야 할 수도 있습니다. 그렇다면 무게가 증가 할 수 있습니다.

편집 : 최대 크기의 '화강암'배경이 방사형 그라디언트로 만든 곳 jsfiddle example에서
봐 (나는 this question에 대한 채찍질). (원본에서 볼 수 있듯이)이 바이트의 크기가 작고 별도의 이미지입니다 (픽셀 단위로 표시됩니다).

반면에 (복잡도에 따라) 정규 이미지가 필요하지 않은 계산 시간이 필요합니다 (필요한 바이트가 클라이언트에 다운로드 된 후).

Edit2가이 :
나는 그들이 약간의 테스트를했던 link을 발견했다.

우리의 스프라이트 예에서 원시 SVG 파일은 2445 바이트입니다. PNG 버전은 1064 바이트였으며 더블 픽셀 비율 장치의 두 배 크기 PNG는 1932 바이트였습니다. 처음 나타나는 경우 벡터 파일 은 모든 계정에서 손실되지만 더 큰 이미지의 경우 더 많은 래스터 버전 은 빠르게 크기가 커집니다.

SVG 파일도 XML 형식이므로 사람이 읽을 수 있습니다. 그것들은 은 일반적으로 매우 제한된 범위의 문자로 구성되며, 이는 을 의미합니다. HTTP를 통해 전송 될 때 Gzip으로 압축 될 수 있습니다. 즉, 실제 다운로드 크기가 원시 파일 보다 몇 배 더 작음을 의미하는 을 의미합니다. 30 %를 넘어서고, 아마도 훨씬 더 많을 것입니다. 같은 PNG 및 JPG와 같은 래스터 이미지 형식은 이미 최대한 압축되어 있습니다. 극단적 인 카운터 - 예를 들어 .. 단순히 JPG 대 포레스트 (잎 ..)의 풀 컬러 사진을 설명하려고 :

그러나,이 모든 이미지가 얼마나 복잡한 따라 여전히입니다 유의하십시오. .

Answer 2

크기는 항상 특정 이미지에 따라 다르지만 죄송하지만 직접 테스트해야합니다. 일반적으로이를 비교할 방법이 없습니다.

Answer 3

간단한 모양의 경우 gzipped SVG는 꽤 작을 것이며 현대 브라우저에서는 quite usable입니다.

그러나 페이지로드 성능에 대한 요청 수가 매우 큰 요소이므로 이미지 형식에 관계없이 CSS sprite sheets을 사용하면 성능이 크게 향상됩니다.

셰이프를 자바 스크립트 드로잉 명령 (또는 JSON을 기반으로 발행하는 라이브러리)으로 저장한다는 것은 gzipped SVG에 비해 대역폭을 크게 절약 할 수 없다는 것을 의미합니다 (SVG는 경로를 정의하는 데 매우 효율적인 형식을 사용합니다. gzip은 XML의 오버 헤드를 아주 잘 제거합니다.)

JS가로드 될 때까지 기다려야하고 문서 전체에 여러 캔버스를 삽입하거나 생성 된 이미지를 압축하고 data: URL을 작성하면 CPU를 구워야하므로 전체적으로 SVG 또는 optimized PNG.