2008-09-22 7 views
34

웹 사이트에 작은 아이콘, 헤더 그래픽 등을 사용하는 경우 GIF 또는 PNG를 사용하는 것이 더 좋습니까?작은 웹 사이트 이미지의 형식은 무엇입니까? GIF 또는 PNG?

분명히 투명 효과가 필요하다면 PNG는 분명히 갈 수있는 방법이며, 더 크고 더 많은 사진 이미지의 경우 JPEG를 사용합니다. 그러나 일반적인 웹 "가구"의 경우 추천 할 것이고 그 이유는 무엇입니까? 그것은 내가 사용하고있는 도구 일지 모르지만 GIF ​​파일은 대개 비슷한 PNG보다 약간 작지만 사용하면 1987이됩니다.

+0

유용 : http://stackoverflow.com/q/2336522/199700 –

답변

57

일반적으로 PNG는 우량한 압축으로 인해 GIF보다 좋지 않으며 종종 좋지 않습니다. PNG 형식이 메타 데이터로부터 약간 큰 오버 헤드를 가질 수 있기 때문에 GIF가 약간 더 나은 경우가있을 수 있지만 걱정할 필요가 없습니다.

그냥 내가 사용하는 도구가 될 수 있지만, GIF 파일은 일반적으로 인해 사용하는 인코딩 도구뿐 아니라 할 수 있다는 comparible PNG

보다 약간 작은 것 같다.

/EDIT : 와우, PNG 파일 크기에 대해 많은 오해가있는 것 같습니다. 견적을 올리려면 매트 :

색상이 거의없는 이미지의 경우 GIF에는 아무런 문제가 없으며 눈에 띄지 않는 경향이 있습니다.

이것은 일반적인 인코딩 실수이며 형식에 고유하지 않습니다. 색상 수를 조절하고 PNG 파일을 작게 만들 수 있습니다. Wikipedia 기사의 relevant section을 참조하십시오.

또한, MSIE6의 부족한 지원 크로노에 의해 균형이 맞지 불어 : 당신이 투명성을 필요 GIF를 함께하여 얻을 수있는 경우 IE6가 그들을 지원하기 때문에

, 그때 내가 그들을 권하고 싶습니다. IE6는 투명한 PNG를 잘 처리하지 못합니다.

아니에요. MSIE6 에서 PNG 투명도를 지원합니다. 알파 채널을 지원하지는 않지만 (약간의 해킹없이) 알파 채널을 지원하지 않기 때문에 GIF에 전혀 문제가되지 않습니다.

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

+0

자세한 답변을 주셔서 감사합니다. 저는 자주이 문제에 대해 궁금해합니다. 특히 "IE에서 PNG 지원이 부족합니다." –

+0

파일 크기 및 인코딩 도구와 관련하여 PNG 파일을 압축하려면 PNGOUT (http://advsys.net/ken/utils.htm)을 사용하는 것이 좋습니다. –

+2

훌륭한 답변 - 그러나 마지막 문장에는 단어가 누락 된 것 같습니다. 내가 나중에 편집 할 수 있기를 바랍니다. –

-5

모든 투명하지 않은 이미지에 jpg를 사용합니다. 내가 좋아하는 압축을 제어 할 수 있습니다. 나는이 두 웹 사이트를 비교하는 this 웹 사이트를 발견했다. jpg는 작아서 더 좋아 보인다.

+3

JPEG 압축은 사진 같은 그림에만 적용됩니다. 많은 사진들이 JPEG 압축에서 전혀 이익을 얻지 못합니다. 손실은 크기 때문에 PNG 압축 (항상 무손실) 압축을 통해 더 작게 만들 수 있습니다. –

+0

이것을 지적 해 주셔서 감사합니다. – dbrien

0

개인적으로 나는 어디에서나 사용할 수있는 gif 이미지를 꽤 많이 사용합니다. 분명히 투명도 제한은 누군가를 특정 형식으로 안내하는 핵심 요소 중 하나입니다.

gif를 사용하는 데있어서 큰 실수는 없습니다.

+0

Gif를 사용하는 것이 낙상입니까? 그들은 더 커질 수 있고 팔레트가 제한되어 있으며 투명도가 매우 제한적입니다. – PhiLho

0

크기가 작아지고 PNG가 제공하는 기능 (알파 채널 투명도 및 256 색 이상)을 사용하지 않아도된다면 PNG를 사용해야하는 이유가 없습니다. 법적 관점에서 GIF를 통해 PNG를 사용하는

+0

그건 논쟁 거리가 아닙니다. – Stewart

5

주된 이유가 여기에 포함됩니다 :

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

특허는 분명히 2004 년 만료,하지만 한 당신이 오픈 소스 PNG를 사용할 수있는 아이디어 GIF는 많은 사람들에게 매력적입니다.

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

+2

FSF 및 GNU 프로젝트도 웹 사이트에서 일부 GIF를 사용합니다. GIF 특허 문제는 죽었습니다. –

2

나는 그것이 차이가 많이 (고객이 걱정하지 않는다)하게 생각하지 않습니다. 개인적으로 W3C 표준이기 때문에 PNG를 선택합니다.

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

+0

IE6 제한 사항에는 해당되지 않습니다. 해결 방법이 있으며 8 비트 PNG는 거기에서 작업 할 필요가 없습니다. – PhiLho

1

GIF의 주요 문제점은 특허가 붙은 형식 (EDIT : 더 이상 사실이 아닙니다)입니다. 관심이 없다면 GIF를 자유롭게 사용하십시오. PNG는 GIF, 특히 색 공간 영역에 비해 유연성이 뛰어납니다. 그러나 이러한 유연성은 종종 PNG를 게시하기 전에 PNG를 "최적화"하려고한다는 것을 의미합니다. 웹 검색은이를위한 플랫폼을 찾아야합니다.

물론 애니메이션을 원한다면 GIF 만 사용할 수있는 유일한 방법입니다. MNG는 기본적으로 어떤 이유로 든 비 시동 이었기 때문입니다.

+1

Unisys의 GIF 특허 (US 4,558,302)가 2003 년 6 월에 만료되었습니다. – stevenvh

0

gif 파일은 투명 알파 채널을 지원하지 않기 때문에 약간 더 작은 경향이 있습니다 (다른 이유로 인해). 개인적으로, 나는 크기 차이가 예전처럼 거의 걱정할 가치가 있다고 느끼지 않습니다. 대부분의 사람들은 현재 일종의 광대역을 사용하여 웹을 사용하고 있기 때문에 차이점을 눈치 채지 못할 것입니다.

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

플러스, 나는 배경에 이미지를 넣을 수있는 능력이 좋고 드롭 섀도우 작업이있어서 png 형식을 더 잘 나타냅니다.

+0

첫 번째 문장은 평균 GIF 파일이 평균 PNG 파일보다 작은 이유 일 수 있지만 질문과 관련성이있는 것처럼 비교할 필요가 있습니다 . – Stewart

12

W3C는 GIF보다 PNG의 3 가지 이점을 언급합니다.

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

크로스 플랫폼 감마 보정 •

(화상의 밝기 제어) 및 색 보정

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

는 지침이 자원에 대해 살펴있다 : 나는 보통 크기 때문에 GIF 년대를 사용

0

을하지만, 또한 PNG로-8이 256 색.

멋진 반투명 소재가 필요한 경우 png-24를 사용하십시오.

나는 일반적으로 당신이 파일 형식과 등 색상 수를 바이올린과 저장하기 전에 결과를 볼 수 있습니다 포토샵에서 '웹에 대한 저장'기능을 사용합니다. 물론 나는 가능한 한 가장 작은 것을 사용하여 여전히 눈에.니다. 이 손실 때문에 JPG는, 밖으로 질문 (포토샵, 김프 등 자신에 의해 그려진 즉)을 생성하는 컴퓨터 그래픽

+1

출처에 따르면 PNG는 일반적으로 동일한 색상 깊이에서 동일한 이미지의 GIF보다 작습니다. http://warp.povusers.org/grrr/PNGvsGIF/ – Stewart

1

은 - 즉 당신은 무작위 회색 픽셀을 얻는다. 더 많은 색상, 확장 성 투명성 (예를 들어, 10 % 투명, .gif 참고는 0 %에서 100 % 지원),하지만 인터넷 익스플로러의 일부 버전은 PNG하지 않는 문제가있다 : 정적 인 이미지의 경우 PNG는 모든면에서 더 낫다 투명도가 올바르게 유지되므로 추악한 평면이 아닌 불투명 한 배경을 얻을 수 있습니다. IE 사용자에 대해 신경 쓰지 않는다면 PNG로 이동하십시오. 당신이 애니메이션을 원하는 경우

BTW, GIF에 대한 이동합니다. 웹 이미지의 경우

2

각 형식의 장단점이 있습니다. 사진 형식 이미지 (예 : 많은 색상 및 많은 가장자리)에는 JPEG를 사용합니다.

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

PNG 파일은 스크린 샷과 같은 것들에 대한 유일한 정말 현명한 선택 (즉, 색상 가장자리가 모두 많이), 그리고 개인적으로, 그게 내가 JPEG가있는 뭔가를하지 않는 한 나는, 대부분의 시간을 고수 무엇 더 적합 (사진처럼).

7

와우, 나는 모든 잘못된 대답에 정말 놀랐다. 제대로 최적화 된 경우 PNG-8은 항상 GIF보다 작습니다. 그냥 PngCrush 또는 다른 PNG 최적화 루틴의를 통해 PNG-8 파일을 실행합니다.

중요한 일

이해하기 :

  • PNG8 및 GIF는 무손실 < = 256 색이다 PNG8 작은 GIF보다
  • GIF는하지 않는 한 사용해서는 안됩니다 항상 할 수
  • 애니메이션이 필요합니다.

물론, 블랙 & 흰색 또는 풀 컬러 사진 이미지 낮은 색상, 선 기술에 대한

  • 사용 PNG에 대한

    • 사용 JPG 스크린 샷 형 이미지
  • +3

    을 참조하십시오. 16x16 이하의 이미지는 256 픽셀 이하이므로 항상 256 색 이하를 나타낼 가치가 있습니다! –

    2

    인덱스 PNG를 (256 색 미만)은 실제로 항상 gif보다 작기 때문에 대부분의 시간을 사용합니다.

    1

    PNG는 GIF 파일을 100 % 대체하며 사용자가 만날 가능성이있는 모든 웹 브라우저에서 지원됩니다.

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

    거의 모든 브라우저가 PNG 파일 (GIF 형식에서 제공되는 투명도 유형)의 단일 비트 투명도를 지원합니다. IE6에는 PNG의 8 비트 투명도가 지원되지 않지만 대부분의 경우 약간의 CSS 마법으로 해결할 수 있습니다.

    PNG 파일이 동일한 GIF 파일보다 커지면 소스 이미지의 색상이 256 가지 이상이므로 거의 확실합니다. GIF 파일은 256 색의 최대 팔레트로 인덱싱되지만 대부분의 그래픽 프로그램의 PNG 파일은 기본적으로 24 비트 무손실 형식으로 저장됩니다. 파일 크기가 정확한 색상보다 중요한 경우 파일을 8 비트 색인 PNG로 저장하십시오. 파일 크기는 GIF 또는 그 이상이어야합니다.

    do-not-replace 플래그와 다중 팔레트가있는 애니메이션 프레임의 조합을 사용하여 GIF 파일을 256 개 이상의 색상으로 "해킹"하는 것이 가능하지만이 방법은 PNG의 출현 이후 사실상 잊혀졌습니다 .

    +0

    APNG가 지원됩니다 ... Firefox ... 참조 하시겠습니까? 그게 뭔가 ... * – Tortoise

    3

    PNG를 사용할 때 색이 바뀌는 것에주의하십시오. 이 링크는 예를 제공하고, 자세한 설명과 함께 더 많은 링크가 포함되어

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

    GIF 이미지는이 문제에 적용되지 않습니다.

    +2

    PNG의 기본 IE 버그는 잘못된 대상 감마에 대해 감마 보정된다는 것입니다. GIF가 적용되지 않는 유일한 이유는 GIF가 감마를 지정하는 방법을 제공하지 않는다는 것입니다. 감싸지 않고 PNG를 저장하려면 그래픽 응용 프로그램을 사용하십시오. 또한 http://www.libpng.org/pub/png/png-gammatest.html – Stewart

    +3

    이 링크 http://hsivonen.iki.fi/png-gamma/는 감마가없는 PNG가 여전히 일부에서 잘못 표시된다는 것을 설명합니다. 브라우저. 아마도 이러한 브라우저는 충분히 쓸모 없기 때문에 걱정할 필요는 없지만 모든 사람들은 적어도이 문제점을 알고 있어야합니다. –

    +0

    하드웨어 및/또는 OS에서 감마 조정을 사용하는 비 Windows 플랫폼의 일부 브라우저는 CSS 색상을 사양별로 sRGB로 조정할 수 있지만 조정되지 않은 색상 공간 정보가없는 PNG는 그대로 유지할 수 있습니다. 따라서 PNG에서 sRGB를 지정하면됩니다. 그러나 Firefox가 다음에 내가 상상할 수없는 몇 가지 이유로 자체 작업을 수행한다는 것을 발견했습니다 .... – Stewart

    1

    "내가 사용하고있는 도구 일 수도 있지만 GIF ​​파일은 대개 비슷한 PNG보다 약간 작게 보이지만 사용하는 것은 1987 년과 같습니다."

    아마도 귀하의 도구입니다. PNG FAQ에서 :

    "사과와 오렌지를 비교하면 (즉, 동일한 이미지 유형을 비교하지 않는) 두 가지 주요 이유가 있으며 잘못된 도구를 사용합니다." continued...

    하지만 항상 같은 색 농도를 사용하여 둘 다 저장하고 작은 것이 나오는 것을 볼 수 있습니다.

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