웹 사이트 용 이미지를 저장하는 데 더 적합한 형식은 무엇입니까? PNG 또는 SVG?

웹 사이트를위한 투명 배경의 이미지를 내보내거나 저장할 때 PNG 또는 SVG로 저장해야합니까? 왜?

SVG보다 SVG가 더 수용 가능한 형식 인 것 같습니다.

여기서 간단한 대답은 둘 다 사용하는 것입니다.

SVG를 옵션으로 지정했다는 사실은 SVG가 로고, 아이콘 및 클립 아트와 같은 라인 아트 그래픽에만 적합하기 때문에 사진 그래픽을 의도 된 사용 사례로 배제 할 수 있음을 의미합니다.

사진 그래픽에이 선택을 고려하고 있다면 선택의 여지가 없습니다. PNG는 항상 더 나을 것입니다. SVG가 실행 가능한 옵션 인 그래픽의 경우 SVG는 PNG / JPEG 폴 백이있는 최상의 옵션입니다. PNG에는 많은 장점이 있지만 확장 성과 파일 크기면에서 종종 SVG와 일치하지 않습니다.

하나만 사용하면 이전 버전과의 호환성 또는 점진적 향상을 희생해야합니다.

서로 비교할 때 PNG는 현재 시점에서 SVG보다 많은 브라우저에서 확실히 지원 되지만 새로 출시 된 장치의 해상도는 계속 증가합니다. 즉, 다양한 해상도를 기반으로 PNG를 제공해야합니다. ^{(미디어 쿼리, 자바 스크립트 또는 사용자 에이전트 스니핑을 통해)} 또는 브라우저에 의해 조정되어 일부 불완전한 결과가 발생할 수 있습니다.

우리 가 미래에 가지고 있는 것을 보고 인터넷에서 영원히 더 높은 해상도, 더 넓은 지원 및 더 넓은 SVG 사용; 다가오는 것을 위해 구축하는 것이 합리적입니다.

일반적으로 웹 사이트는 수년간 지속되도록 구축되어야합니다. 5 년 만에 이전 버전과 호환되는 웹 사이트의 2 %가 여전히 오래된 브라우저를 사용하지만 놀랍도록 해상도가 높은 최신 브라우저에서는 상당히 나빠 보일 수 있습니다. 타협.

2014 년 11 월의 옵션

1. PNG 만

   • 품질을 위해 화면 크기와 해상도에 따라 5 가지 이상의 버전을 제공해야합니다. 이는 매우 보수적 인 추측이므로 매우 철저히 원한다면 동일한 이미지의 10 ~ 15 가지 버전으로 끝날 수 있습니다. . 또한 구현하는 데 시간이 걸립니다.

   • 단일 그래픽을 제공하고 브라우저 크기를 조정하도록 선택한 경우 결과가 완벽하지 않을 수 있으며 크기 조정 양에 따라 추악한 경우도 있습니다.

   • 많은 수의 미디어 쿼리가 불필요하게 CSS를 부풀려 페이지 로딩 속도에 부정적인 영향을 줄 수 있습니다.

   • 구형 브라우저 및 장치에서는 멋지게 보이지만 최신 브라우저에서는 그렇지 않습니다.

2. 단일 PNG / JPEG / GIF 대체가 포함 된 SVG

   • SVG를 어디에서나 사용할 수 있으며 SVG를 지원하지 않는 브라우저의 경우 다른 형식으로 대체 할 수 있습니다. 주요 장점은 모든 다른 해상도에 대해 하나의 파일 만 필요하다는 것입니다.

   • 오래된 브라우저의 사용자가 크기가 불완전한 그래픽으로 살아갈 수 있다고 타협하고 받아 들인다면 PNG, JPEG 또는 GIF 형식의 각 파일의 다른 버전 만 필요합니다.

   • PNG 전용 미디어 쿼리로 구현하는 데 비슷한 시간이 소요될 수 있습니다. 아마도 훨씬 적기 때문에 아마도 같은 가격 일 것입니다.

   • 구식 기술로 희생을 치르면서 모든 새로운 장치에서 멋지게 보일 것입니다.

3. 해상도 및 화면 크기에 따라 여러 PNG / JPEG / GIF 대체가 포함 된 SVG

   • SVG를 먼저 제공 한 다음 SVG를 지원하지 않는 브라우저의 해상도 종속 PNG를 제공 할 수 있습니다. 이것은 가장 철저하고 가장 앞뒤로 호환되며 가장 일관되고 비용 이 많이 드는 옵션입니다.

   • 아마도 1 & 2를 결합하는 데 많은 시간이 걸리고 꼬임을 해결하는 데 약간의 시간이 더 걸릴 것입니다.

   • ^거의 모든 장치 에서 놀랍습니다 .

요약하면, 나는 당신이 더 이전 버전과의 호환성 이상 점진적 개선, 얼마나 찾고 있는지 여부에 따라 달라집니다 생각 돈 시간을 지출해야합니다.

SVG가 확실한 이점이있는 벡터 그래픽을 가지고 있다면 확장 가능합니다. 픽셀 그래픽의 경우 PNG가 더 좋습니다. 단점은 Internet Explorer가 플러그인 9 이전의 버전 9에서만 SVG를 지원한다는 것입니다. 모바일 브라우저는 SVG에 대한 지원이 제한 될 수 있습니다.

편집 : ClemDesm이 지적했듯이 이전 IE 버전은 IE8이 지원되므로 완전히 투명한 PNG를 지원하지 않습니다. 투명하지 않은 PNG는 제대로 작동합니다. Computerish의 대답은 현재 벡터 이미지를 처리 ​​할 수있는 훌륭한 솔루션입니다. SVG로 유지하지만 웹용으로 PNG로 내보내십시오. 이 솔루션에 전적으로 동의합니다.

웹 사이트에 반드시 PNG를 사용하십시오. SVG는 단순히 충분히 널리 지원되지 않으며 병합 된 내보내기를 위해 PNG에 비해 상당한 이점이 있습니다 (있는 경우). 즉, 모든 작업 사본을 SVG로 유지하십시오.

나는 안전한면에 PNG가 붙어있을 것입니다. SVG는 여전히 많은 대형 인터넷 회사 및 브라우저에서 완전히 허용되지 않습니다. SVG는 확장 가능하고 벡터이지만 종종 더 많은 공간을 차지하고 웹 사이트를 지나치게 복잡하게 만듭니다.

나는 당신의 질문에 대답하기를 바랍니다 :)

SVG가 전 세계적으로 허용되지 않고 일부 사람들이 PNG를 스케일링하는 데 어려움을 겪고 있지만, Adobe Illustrator에서 아이콘을 만드는 것이 "합리적인"양을 늘리거나 줄이는 데 가장 효과적이라는 것을 항상 알고 있습니다.