작은 웹사이트 이미지의 형식은 무엇입니까?GIF 또는 PNG?[닫은]

https://stackoverflow.com/questions/115818

02-07-2019
|

문제

웹사이트의 작은 아이콘, 헤더 그래픽 등을 만들 때 GIF를 사용하는 것이 더 낫나요, 아니면 PNG를 사용하는 것이 좋을까요?

분명히 투명도 효과가 필요한 경우에는 PNG가 적합하며 더 크고 더 많은 사진 이미지의 경우 JPEG를 사용합니다. 그러나 일반 웹 "가구"의 경우 어느 것을 권장하며 그 이유는 무엇입니까?내가 사용하는 도구일 수도 있지만 GIF 파일은 일반적으로 비교 가능한 PNG보다 약간 작은 것처럼 보이지만 사용하는 것은 1987년처럼 보입니다.

해결책

일반적으로 PNG는 결코 나쁘지 않으며 압축률이 뛰어나 GIF보다 나은 경우가 많습니다.GIF가 약간 더 나은 경우가 있을 수 있지만(PNG 형식은 메타데이터에서 약간 더 큰 오버헤드를 가질 수 있기 때문에) 실제로 걱정할 가치는 없습니다.

제가 사용하는 도구일 수도 있지만 GIF 파일은 일반적으로 비슷한 PNG 파일보다 약간 작은 것 같습니다.

이는 실제로 사용하는 인코딩 도구 때문일 수 있습니다.

/편집하다:와우, PNG 파일 크기에 대해 오해가 많은 것 같습니다.Matt의 말을 인용하자면:

색상이 거의 없는 이미지의 GIF에는 아무런 문제가 없으며, 아시다시피 색상이 더 작은 경향이 있습니다.

이는 일반적인 인코딩 실수이며 형식에 내재된 것이 아닙니다.색상 심도를 조절하고 PNG 파일을 작게 만들 수 있습니다.다음을 참조하세요. 관련 섹션 Wikipedia 기사에서.

또한 MSIE6의 지원 부족은 Chrono에 의해 과장되었습니다.

투명성이 필요하고 GIF로도 충분하다면 IE6에서 지원하므로 이를 추천합니다.IE6은 투명한 PNG를 잘 처리하지 못합니다.

그건 틀렸어요.MSIE6 하다 PNG 투명도를 지원합니다.몇 가지 해킹 없이는 알파 채널을 지원하지 않지만 GIF에는 알파 채널이 전혀 없기 때문에 이것은 다른 문제입니다.

그만큼 오직 PNG 대신 GIF를 사용하는 기술적인 이유는 애니메이션이 필요하고 다른 형식에 의존하고 싶지 않을 때입니다.

다른 팁

W3C는 GIF에 비해 PNG의 3가지 장점을 언급합니다.

• 알파 채널 (가변 투명성),

• 크로스 플랫폼 감마 교정 (이미지 밝기 제어) 및 색 보정

• 2 차원 인터레이스 (프로그레시브 디스플레이 방법).

또한 지침이 필요하면 다음 리소스를 살펴보세요.

와, 여기 답이 다 틀려서 정말 놀랐어요.적절하게 최적화되면 PNG-8은 항상 GIF보다 작습니다.다음을 통해 PNG-8 파일을 실행하세요. PngCrush 또는 다른 PNG 최적화 루틴 중 하나입니다.

이해해야 할 주요 사항:

PNG8 및 GIF는 무손실 <= 256 색상입니다.
PNG8은 항상 GIF보다 작을 수 있습니다.
애니메이션이 필요한 경우가 아니면 GIF를 절대 사용해서는 안 됩니다.

그리고 물론,

흑백 또는 풀 컬러 사진 이미지에는 JPG를 사용하세요.
낮은 색상, 라인 아트, 스크린샷 유형 이미지에는 PNG를 사용하세요.

법적인 관점에서 GIF 대신 PNG를 사용하는 주요 이유는 다음과 같습니다.

http://www.cloanto.com/users/mcb/19950127giflzw.html

특허는 2004년에 만료된 것으로 보이지만 GIF를 통해 PNG를 오픈 소스로 사용할 수 있다는 아이디어는 많은 사람들에게 매력적입니다.

(png 오픈 소스 참조: http://www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS)

PNG를 사용할 때 색상 변화에 주의하세요.이 링크는 예를 제공하며 추가 설명이 포함된 더 많은 링크를 포함합니다.

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx

GIF 이미지에는 이 문제가 발생하지 않습니다.

나는 그것이 큰 차이를 가져오지 않는다고 생각합니다(고객은 신경 쓰지 않습니다).개인적으로 저는 PNG가 W3C 표준이기 때문에 PNG를 선택하겠습니다.

PNG 투명도 효과에 주의하세요.IE6에서는 작동하지 않습니다.

웹 이미지의 경우 각 형식마다 장단점이 있습니다.사진 형식의 이미지(즉, 색상이 많고 가장자리가 딱딱하지 않은 경우)에는 JPEG를 사용합니다.

아이콘 등의 경우 PNG와 GIF 중에서 선택할 수 있습니다.GIF는 256가지 색상으로 제한됩니다.PNG는 GIF처럼 형식화될 수 있습니다(예: 256색, IE6에서 작동하는 1비트 투명도). 그러나 작은 이미지의 경우에는 약간 GIF보다 큽니다.24비트 PNG는 넓은 범위와 알파 투명도를 모두 지원합니다(IE6에서는 문제가 있지만).

PNGS는 스크린샷과 같은 항목에 대해 정말 합리적인 유일한 선택입니다(즉, 두 가지 색상 모두 그리고 딱딱한 가장자리) 그리고 개인적으로 JPEG가 더 적합한 것(예: 사진)이 아닌 이상 개인적으로 이것이 대부분의 시간 동안 사용되는 것입니다.

인덱스된 PNG(256색 미만)는 실제로 항상 gif보다 작기 때문에 대부분의 경우 이를 사용합니다.

컴퓨터에서 생성된 그래픽의 경우(예:Photoshop, Gimp 등에서 직접 그린 것입니다.) JPG는 손실이 많기 때문에 의문의 여지가 없습니다.임의의 회색 픽셀이 나타납니다.정적 이미지의 경우 모든 면에서 PNG가 더 좋습니다.더 많은 색상, 확장 가능한 투명도(예: 10% 투명, .gif는 0%와 100%만 지원). 그러나 Internet Explorer의 일부 버전에서는 PNG 투명도를 올바르게 수행하지 않아 평면적이고 불투명한 배경이 나타나는 문제가 있습니다. 보기 흉해 보여요.IE 사용자에 관심이 없다면 PNG로 가십시오.

그런데 애니메이션을 원한다면 GIF를 선택하세요.

PNG는 GIF 파일을 100% 대체하며 접할 수 있는 모든 웹 브라우저에서 지원됩니다.

GIF가 선호되는 상황은 거의 없습니다.가장 중요한 것은 애니메이션입니다. GIF89a 표준은 애니메이션을 지원하고 사실상 모든 브라우저가 이를 지원하지만 일반 PNG 형식은 지원하지 않습니다. 이를 위해서는 브라우저 지원이 제한되어 있는 MNG를 사용해야 합니다.

거의 모든 브라우저는 PNG 파일(GIF 형식에서 제공하는 투명도 유형)의 단일 비트 투명도를 지원합니다.IE6에서는 PNG의 전체 8비트 투명도에 대한 지원이 부족하지만 약간의 CSS 마법을 사용하면 대부분의 상황에서 이를 수정할 수 있습니다.

PNG 파일이 동등한 GIF 파일보다 크게 나온다면 소스 이미지가 256개 이상의 색상을 가지고 있기 때문일 가능성이 거의 높습니다.GIF 파일은 최대 256색 팔레트로 인덱싱되는 반면, 대부분의 그래픽 프로그램에서 PNG 파일은 기본적으로 24비트 무손실 형식으로 저장됩니다.정확한 색상보다 파일 크기가 더 중요한 경우 파일을 8비트 인덱스 PNG로 저장하세요. 파일은 GIF와 동일하거나 그 이상이어야 합니다.

대체하지 않는 플래그와 여러 팔레트가 포함된 애니메이션 프레임의 조합을 사용하여 256개 이상의 색상을 갖도록 GIF 파일을 "해킹"할 수 있지만 이 접근 방식은 PNG가 출현한 이후 사실상 잊혀졌습니다.

GIF의 주요 문제점은 특허가 걸린 형식이라는 점입니다(편집:이는 더 이상 사실이 아닌 것 같습니다.)신경쓰지 않으신다면 GIF를 사용해 보세요.PNG는 특히 색상 공간 영역에서 GIF에 비해 훨씬 더 많은 유연성을 가지고 있지만 이러한 유연성은 종종 PNG를 게시하기 전에 PNG를 "최적화"하려는 것을 의미합니다.이를 위해 웹 검색을 통해 귀하의 플랫폼에 맞는 도구를 찾아야 합니다.

물론 애니메이션을 원한다면 GIF가 유일한 방법입니다. MNG는 기본적으로 어떤 이유로든 시작하지 못했기 때문입니다.

"내가 사용하고 있는 도구일 수도 있지만 GIF 파일은 일반적으로 비교 가능한 PNG보다 약간 작은 것처럼 보이지만 사용하는 것은 1987년처럼 보입니다."

아마도 당신의 도구 일 것입니다.PNG FAQ에서:

"이 현상에는 두 가지 주요 이유가 있습니다.사과와 오렌지를 비교하고(즉, 동일한 이미지 유형을 비교하지 않음) 나쁜 도구를 사용합니다." 계속되는...

그러나 항상 동일한 색상 심도를 사용하여 둘 다로 저장해 보고 어느 것이 더 작게 나오는지 확인할 수 있습니다.

물론 사이트에 대해 하나의 그래픽 형식으로 표준화하려면 PNG가 가장 적합할 것입니다.

개인적으로 저는 이미지에 gif를 꽤 많이 사용합니다. GIF는 어디에서나 작동하기 때문입니다. 투명도 제한은 누군가를 특정 형식으로 유도하는 핵심 요소 중 하나입니다.

gif를 사용해도 어떤 단점도 보이지 않습니다.

크기가 작아지고 PNG가 제공하는 기능(알파 채널 투명도 및 256색 이상)을 사용해도 얻을 수 있는 것이 없다면 PNG를 사용해야 할 이유가 없습니다.

gif 파일은 투명도 알파 채널을 지원하지 않기 때문에(그리고 아마도 다른 이유 때문에) 조금 더 작은 경향이 있습니다.개인적으로 크기 차이는 예전만큼 걱정할 가치가 없다고 생각합니다.현재 대부분의 사람들은 일종의 광대역을 통해 웹을 사용하고 있으므로 차이를 느낄 수 있을지 의문입니다.

조작 도구가 가장 잘 작동하는 이미지 유형을 사용하는 것이 더 중요할 것입니다.

게다가 저는 어떤 배경에도 이미지를 넣을 수 있고 그림자 작업을 할 수 있는 기능을 좋아하는데, 이는 저에게 png 형식에 더 가깝습니다.

저는 크기 때문에 주로 gif를 사용하는데, 256색의 png-8도 있습니다.

멋진 반투명한 내용이 필요하면 png-24를 사용하세요.

저는 보통 Photoshop의 '웹용으로 저장' 기능을 사용합니다. 이 기능을 사용하면 파일 형식, 색상 수 등을 조정하고 저장하기 전에 결과를 확인할 수 있습니다.물론 나는 내 눈에 여전히 좋아 보이는 가능한 가장 작은 것을 사용할 것입니다.

불투명한 모든 이미지에는 jpg를 사용합니다.내가 좋아하는 압축을 제어할 수 있습니다.나는 찾았다 이것 둘을 비교하는 사이트.jpg가 작아서 더 좋아보이네요.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow