웹사이트 이미지 포맷:선택하는 올바른 형식에 대한 오른쪽 작업

StackOverflow https://stackoverflow.com/questions/392635

  •  23-08-2019
  •  | 
  •  

문제

웹사이트를 디자인할 때 어떤 것을 고려해야 할 최고의 이미지 형식으로 사용하기 위한 특정 작업?

나는 항상 자신을 찾는 딜레마에서려고 할 때 어떤 형식을 사용하여 특정 작업을 위해...다음과 같 예를 들어, 을 사용해야 합.jpg 모든 라운드? 거나, 할 때 사용해야 하는 이유는 무엇입니까?니다.png?

예를 들어, Amazon웹사이트,그들이 사용하는 .jpg 제품 이미지(예), .gif 이를 위해 투명 픽셀(예 고) .png 들에 CSS 스프라이트(예)

다른 한편으로, Play.com 용 .gif 그들의 웹 사이트의 로고(예)지만,사용 .jpg 그들의 웹 사이트 제품(Amazon)(예 다)및 그들의 주요 페이지 간다,그들은 모든 .pngs 니다.

그래서 어떤 형식을 해야에 사용하는 웹사이트?고 사용해야 하는 이유는 무엇입니까요?

[UPDATE]

감사 CruellO 대 이 링크 한 차이점을 설명하고,또한 더스 는 이유는 무엇을 사용합니다.

도움이 되었습니까?

해결책

JPEG는 사진 용입니다. 나는 텍스트가있는 jpegs를 때때로보고 끔찍해 보인다. 텍스트는 텍스트에 가장 적합합니다. 그렇지 않으면 png를 사용하십시오.

사진이 아니지만 그래픽을 원한다면 PNG를 사용하십시오. PNG는 거의 항상 동등한 GIF보다 작고 JPEG 파일과 같이 품질을 잃지 않습니다. JPEG와 동등한 PNG는 일반적으로 훨씬 더 큽니다 (사진이 포함되어 있다고 가정). 이것이 여전히 바람직한 시간이있을 수 있습니다.

PNG는 8 비트의 투명성을 허용하지만 IE를 지원해야한다면 계속해서이를 올바르게 지원하는 것을 거부 할 것입니다. 그들 하다 내가 아는 한 8 비트 이미지 (본질적으로 GIF와 동일)에서 단일 투명성을 지원하십시오. IE에서 8 비트 투명성을 얻기위한 수많은 해킹이 있습니다. 나는 결코 신경 쓰지 않았다.

요약해서 말하자면:

  • 사진 → JPG
  • ! 사진 → PNG

다른 팁

당신이 알고 있어야 한다는 몇 가지 중요한 요소...

첫째,두 가지 유형이 있의 압축: Lossless 고 손실.

Lossless 이미지 크기를 작게 만들어 하지만 아무에게 손해 품질이 좋습니다. 손실 을 의미하지 않는다(심지어)작은,하지만 손해하 품질입니다.당신이 저장한 이미지 손실이 형식과 이미지 품질을 얻을 것이라는 점점 더 심해졌다.

거기에는 또한 다른 색상 깊이(팔레트): 컬러 인덱스 고 직접적인 색깔.

가 인덱스 그것이 의미하는 이미지를 저장할 수 있는 제한된 수의 색상(일반적으로 256)에 의해 선택되는 이미지를 작성자 Direct 그것을 저장할 수 있는 수천 개의 색상되지 않은 저자가 선택.

BMP -무손실/인덱싱하고 직접적인

이것은 오래된 형식입니다.그것은 무손실(더 이미지 데이터의 손실에 저장)하지만 거기에 또한 거의 없는 압축에 의미로 저장 BMP 결과에 매우 크기가 큰 파일을.그것은 있을 수 있습 팔레트의 인덱싱하고 직접적인,하지만 그 작은 위안.파일의 크기는 그렇게 불필요하게 큰 것이라 아무도 정말 사용하는 이 형식입니다.

에 대한 좋은:정말 아무것도.아무것도 없 BMP 에서 탁월한,또는 완료되지 않았다는 것은 더하여 다른 형식으로 제공해 드립니다.

BMP vs GIF

GIF -무손실/색인만

GIF 를 사용하여 무손실 압축을 의미하는 이미지를 저장할 수 있고 잃지 않는 모든 데이터입니다.파일의 크기는 이보다 훨씬 작은 BMP 기 때문에,좋은 압축은 실제로는 사용되지만,그것을 저장할 수 있는 인덱스습니다.이것만 있을 수 있습니다 최대 256 개의 서로 다른 색상에서 파일입니다.처럼 들리는 아주 작은 금액을,그리고 그것입니다.

GIF 이미지할 수 있도 애니메이션 및 투명성에 있습니다.

에 대한 좋은:로고,라인 드로잉,그리고 기타 간단한 이미지해야하는 작습니다.만이 정말로 사용되는 웹사이트입니다.

GIF vs JPEG

JPEG -손실/Direct

Jpeg 이미지를 있게 만들 수 있도록 설계되었 자세한 사진 이미지로 작은 가능한 정보를 제거하여 인간의 눈지 않을 것이 될 수 있습니다.결과적으로의 손실이 형식으로 저장 같은 파일을 것입니다 그 결과 더 많은 데이터 손실되는 것을 통해 시간.그것은 팔레트의 수천의 색상이고 그래서는 좋은 사진을 위해,그러나 손실 압축을 의미합니에 대한 나쁜 로고와 라인 그림:뿐만 아니라 그들이 보는 퍼지이지만,이러한 이미지도가 더 큰 파일의 크기에 비해 Gif!

에 대한 좋은:사진입니다.또한,그라디언트입니다.

JPEG vs GIF

PNG-8 -무손실/인덱스

PNG 는 새로운 형식으며,PNG-8(인덱싱된 버전의 PNG)은 정말 좋은 대체하였습니다.슬프게도,그러나,그것은 몇 가지 결점:첫째로 그것을 지원할 수 없습니다 애니메이션과 같은 GIF 수 있습니다(잘할 수 있지만,Firefox 을 지원하는 것 같이 그것과는 달리,GIF 애니메이션에서 지원하는 모든 브라우저).둘째로 그것은 몇 가지 문제를 지원과 같은 이전 버전의 브라우저 IE6.셋째,중요한 소프트웨어를 포토샵과 같은 아주 가난한 구현의 형식입니다.(말,Adobe!) PNG-8 만 저장할 수 있습 256 처럼,색상 Gif.

에 대한 좋은:중요한 것은 PNG-8 보다 더 나은 Gif 는 데 지원을 위한 알파 투명도입니다.

PNG-8 vs GIF

중요 사항: 포토샵을 지원하지 않는 알파 투명도에 대한 PNG-8 파일이 있습니다.(말,포토샵!) 가 있 변환하는 방법 포토샵 PNG-24PNG-8 파일을 유지하면 투명성,하지만.방법 중 하나이 PNGQuant, 또 다른 파일을 저장과 불꽃 놀이.

PNG-24 -무손실/Direct

PNG-24 좋은 형식으로 결합하는 무손실이 인코딩과 함께 직접 color(색상의 수천,단지 JPEG).그것은 매우 다음과 같 BMP 에서는 점을 제외하고는 PNG 실제로 압축,이미지,그래서 그 결과 훨씬 작은 파일입니다.불행하게도 PNG-24 일 파일전보다 훨씬 더 큰 것으로 Jpeg,Gif,PNG-8s,그래서 당신은 여전히 고려해야 할 경우에 당신은 정말 하나를 사용하고 싶습니다.

도 PNG-24s 수천 개의 색상을 동안 압축,그들은 그를 대체하지 않습 JPEG 이미지입니다.사진으로 저장 PNG-24 될 가능성이 적어도 5 배 이상에 해당 JPEG 이미지와 함께 약간의 개선에서 보이는 품질입니다.(물론,이 경우 바람직한 결과에 대해 고려하지 않는 파일 크기,그리고 원하는 최고 품질의 이미지할 수 있습니다.)

처럼 PNG-8,PNG-24 을 지원하는 알파 투명도,too.

도움이 되기를 바랍니다!

PNG 다음과 같은 경우 사용해야합니다.

  • 투명성이 필요합니다 (1 비트 또는 알파 투명성)
  • 무손실 압축 (차트 또는 로고 또는 컴퓨터 생성 이미지 등)이 잘 작동합니다.

JPEG 다음과 같은 경우 사용해야합니다.

  • 무손실 압축은 잘 작동하지 않습니다 (예 : 사진)
  • 풀 컬러가 필요합니다

gif 언제 :

  • 매우 오래된 소프트웨어 또는 브라우저와 같이 PNG를 사용할 수 없습니다.
  • 애니메이션이 필요합니다

반대로 신화에도 불구하고, PNG는 대부분의 측면에서 GIF를 능가합니다. PNG는 애니메이션과는 별도로 GIF의 모든 이미지 모드를 사용할 수 있으며 동일한 이미지 모드를 사용할 때 PNG는 LZW에 비해 우수한 디플레이트 알고리즘으로 인해 압축이 우수합니다. PNG는 24 비트 색상 및 알파 투명성과 같이 GIF가 할 수없는 추가 모드를 사용할 수 있지만 웹에서 문제가 발생할 수 있습니다. 알파 투명성은 IE6과 관련하여 호환성 문제가 있는데, 이는 잘 문서화되어 있습니다 (해킹이 존재하지만).

PNG 모드는 포함됩니다 (이것은 단지 작은 서브 세트입니다)

  • 2 ~ 256 색의 팔레트 색상 (예 : GIF)
  • 투명한 색상 (예 : GIF)의 2 ~ 256 색의 팔레트 색상
  • True Color (24 비트 컬러)
  • 알파 채널이있는 진정한 색상 (24 비트 컬러 + 8 비트 알파 투명성)

웹의 PNG에서 최상의 압축을 위해서는 항상 팔레트 모드를 사용하십시오. PNG 파일이 동등한 GIF 파일보다 큰 경우 PNG를 24 비트 색상으로 저장하고 팔레트 모드에서 GIF를 저장합니다 (GIF는 항상 팔레트 모드에 있기 때문에). 먼저 팔레트 모드로 변환하십시오.

GIF 파일이있는 동안 투명성이있는 PNG 파일이 IE6에서 제대로 작동하지 않는 경우 PNG 및 PNG 모드에서 24 비트 컬러 + 알파 투명성을 사용하고 GIF가있는 투명한 색상을 사용합니다. PNG를 투명한 색상의 컬러 모드로 변환해야합니다.

PNG에는 팔레트에 알파 투명성이있는 팔레트 색상과 같은 다른 모드도 있습니다. 이와 같은 모드는 Photoshop에서 사용할 수 없습니다.

이 사이트를 살펴보십시오http://www.killersites.com/articles_2005/theory/imagesinwebpages.jsp

그들은 언제 사용 해야하는지 설명하려고 노력합니다

많은 이미지를 저장하거나 발표하는 경우 새로운 Google Webp 형식 PNG/JPG보다 25% 작기 때문에 고려할 가치가 있습니다. 참고 이것은 현재 모든 브라우저에서 지원되는 것은 아닙니다. NB. 이 질문이 게시 된 후 2010 년에 나왔습니다.

JPEG 파일 형식

  1. 크기를 작게 유지해야 할 때 이미지에 적합합니다.
  2. 사진에 좋은 옵션
  3. 로고, 라인 아트 및 평평한 색상의 넓은 영역에 나쁘다

GIF 파일 형식

  1. 애니메이션 효과에 좋습니다
  2. 클립 아트, 플랫 그래픽 및 최소한의 색상과 정확한 라인을 사용하는 이미지를위한 좋은 옵션
  3. 색상 블록이있는 간단한 로고에 적합한 옵션

PNG 파일 형식

  1. 무손실
  2. 투명성이 필수 일 때 탁월한 선택
  3. 로고 및 라인 아트에 적합한 옵션
  4. 어디서나 지원되지 않습니다

자세한 정보는이 인포 그래픽을 볼 수 있습니다. 이미지 파일 유형 : JPEG, GIF & PNG를 사용할 때

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top