어떤 웹 그래픽 형식을 사용해야합니까?

웹 사이트에는 JPEG, GIF, PNG, SVG 형식 그래픽이 포함될 수 있습니다. 어느 것을 사용해야합니까?

JPG를 사용하는 경우

• 사진 이미지
• 압축이 중요하지 않은 경우

PNG를 사용하는 경우

• 투명성이 필요할 때
• 패턴이있을 때 (배경)

GIF를 사용하는 경우

• 이전 버전과 호환되는 애니메이션 이 필요한 경우 *
• 이미지가 주로 소수의 색상으로 구성된 경우 (2-16) **
• 투명성이 필요하지 않고 패턴이있는 경우 (PNG가 선호되지만)

_{* 거의 모든 브라우저 에서 실행 가능한 옵션 으로 CSS 애니메이션이 등장함에 따라 .GIF 형식의 사용은 웹 애니메이션의 이동 형식이 점점 줄어 들었습니다. .jpg, .png, 및 .gif모든 CSS의 사용과 "애니메이션"기능을 설정할 수 있습니다. 경우에 따라 웹 디자인에서 애니메이션 GIF를 매력적으로 사용할 수 있지만 예외는 드물기 때문에 피하는 것이 가장 좋습니다.}

_{** ( .gif이미지는 팔레트 내에서 256 색으로 만 제한됩니다.)}

(중복 질문에서 마이그레이션)

저장하려는 이미지의 종류에 따라 다릅니다.

• PNG 는 "벡터와 같은"비트 맵 그래픽에 가장 적합한 무손실 압축 형식입니다 (예 : 같은 색상과 선명하게 정의 된 가장자리가있는 크고 일정한 영역이있는 그래픽, 일반 텍스트가 포함 된 그래픽).

• SVG 는 벡터 그래픽 을 포함하는 데 가장 적합한 벡터 형식입니다 (짧은 픽셀 모음 대신 기하학적 요소 모음). SVG는 무한대로 확장 가능하지만 비트 맵 그래픽을 확대하면 품질이 떨어집니다.

• JPG 는 손실 압축 형식입니다 (다른 무엇보다도 사람의 눈에 보이지 않는 이미지의 뉘앙스를 제거하여 저장 공간을 절약합니다). 사진에 가장 적합합니다. 압축 방법으로 인해 벡터 일러스트 또는 텍스트에 적합하지 않습니다.

브라우저 호환성 :

• PNG에 알파 투명도 (투명한 부분은 단색 회색으로 표시됨)가 포함 된 경우 IE 6을 제외하고 PNG 그래픽은 브라우저에서 지원되며 PNG가 100보다 작은 불투명도의 HTML 요소 내에있는 경우 모든 버전의 IE % (그러나 그것은 우연한 경우입니다).

• 브라우저 지원이 현재 100 %가 아니기 때문에 SVG는 항상 옵션 이 아닙니다 . 일반 <img>태그 와 다른 동작 차이가있을 수도 있습니다 . 현재하고있는 일을 알고있는 경우에만 사용하십시오.

• 표준 JPG는 CMYK가 아닌 RGB 모드로 저장되어있는 한 모든 브라우저에서 지원됩니다 (프로그램이 구별되지 않는 경우 기본값 일 수 있음).

몇 가지 핵심 요소를 알고 있어야합니다 ...

먼저, Lossless 와 Lossy 의 두 가지 압축 유형이 있습니다.

• 무손실 은 이미지가 더 작게 만들어 지지만 품질에 해를 끼치 지 않음을 의미합니다.
• 손실 은 이미지가 작지만 품질이 떨어짐을 의미합니다. 이미지를 Lossy 형식으로 반복해서 저장하면 이미지 품질이 점점 더 나빠질 수 있습니다.

색인 색상 과 직접 색상 과 같은 다른 색상 심도 (팔레트)도 있습니다 .

• 색인 은 이미지가 색상 맵이라는 무언가에 제한된 수의 색상 (보통 256 개)을 작성자가 제어 할 수 있음을 의미합니다.
• 직접 은 저자가 직접 선택하지 않은 수천 가지 색상을 저장할 수 있음을 의미합니다.

BMP- 무손실 / 인덱싱 및 직접

이것은 오래된 형식입니다. 무손실 (저장시 이미지 데이터가 손실되지 않음)이지만 압축이 거의 또는 전혀 없기 때문에 BMP로 저장하면 파일 크기가 매우 커집니다. Indexed와 Direct의 팔레트를 가질 수 있지만 약간의 위안입니다. 파일 크기가 너무 커서 아무도이 형식을 실제로 사용하지 않습니다.

장점 : 실제로는 없습니다. BMP가 뛰어나거나 다른 형식으로 더 잘 수행되지 않는 것은 없습니다.

GIF- 무손실 / 색인 만

GIF는 무손실 압축을 사용하므로 이미지를 계속 저장하고 데이터를 잃지 않을 수 있습니다. 파일 크기는 실제로 압축이 사용되기 때문에 BMP보다 훨씬 작지만 인덱스 팔레트 만 저장할 수 있습니다. 이는 대부분의 사용 사례 에서 파일에 최대 256 가지 색상 만있을 수 있음을 의미 합니다. 그것은 꽤 적은 양으로 들립니다.

GIF 이미지는 애니메이션이 가능하고 투명도를 가질 수 있습니다.

장점 : 로고, 선 그리기 및 기타 작은 이미지가 필요합니다. 웹 사이트에만 실제로 사용됩니다.

JPEG- 손실 / 직접

JPEG 이미지는 육안으로 알 수없는 정보를 제거하여 세부적인 사진 이미지를 가능한 한 작게 만들도록 설계되었습니다. 결과적으로 손실 형식이며 동일한 파일을 반복해서 저장하면 시간이 지남에 따라 더 많은 데이터가 손실됩니다. 수천 가지 색상의 팔레트가 있으므로 사진에는 적합하지만 손실이 많은 압축은 로고와 선 그리기에 좋지 않다는 의미입니다.

효능 : 사진. 또한 그라디언트.

PNG-8- 무손실 / 색인

PNG는 최신 형식이며 PNG-8 (인덱스 버전의 PNG)은 GIF를 대체하기에 좋습니다. 그러나 슬프게도 몇 가지 단점이 있습니다. 먼저 GIF와 같은 애니메이션을 지원할 수 없습니다 (물론 가능하지만 모든 브라우저에서 지원하는 GIF 애니메이션과는 달리 Firefox 만 지원하는 것으로 보입니다). 둘째, IE6과 같은 구형 브라우저에서 지원 문제가 있습니다. 셋째, Photoshop과 같은 중요한 소프트웨어는 형식 구현이 매우 불량합니다. PNG-8은 GIF와 같은 256 색만 저장할 수 있습니다.

장점 : PNG-8이 GIF보다 나은 점은 알파 투명도를 지원하는 것입니다.

중요 참고 : Photoshop은 마침내 최신 버전에서 알파 투명도에 대한 지원을 추가했습니다. 오래된 파일이있는 경우 투명성을 유지하면서 Photoshop PNG-24를 PNG-8 파일로 변환하는 방법이 있습니다. 한 가지 방법은 PNGQuant 이고 다른 방법은 Fireworks로 파일을 저장하는 것 입니다.

PNG-24- 무손실 / 직접

PNG-24는 무손실 인코딩과 직접 색상 (JPEG와 같은 수천 가지 색상)을 결합한 훌륭한 형식입니다. PNG는 실제로 이미지를 압축하므로 파일 크기가 훨씬 작다는 점을 제외하면 BMP와 매우 비슷합니다. 불행하게도 PNG-24 파일은 여전히 ​​JPEG, GIF 및 PNG-8보다 훨씬 큽니다. 실제로 파일을 사용하고 싶은지 고려해야합니다.

PNG-24는 압축하는 동안 수천 가지 색상을 허용하지만 JPEG 이미지를 대체하지는 않습니다. PNG-24로 저장된 사진은 가시적 인 품질이 거의 향상되지 않으면 서 동일한 JPEG 이미지보다 5 배 이상 커질 수 있습니다. (물론 파일 크기에 대해 걱정하지 않고 최상의 이미지를 얻으려는 경우 바람직한 결과 일 수 있습니다.)

PNG-8과 마찬가지로 PNG-24도 알파 투명도를 지원합니다.

SVG - 무손실 / 벡터

현재 인기가 높아지고있는 파일 형식은 SVG이며, 이는 벡터 파일 형식 이라는 점에서 위의 형식 과 다릅니다 (위의 모든 래스터 ). 이것은 실제로 픽셀 대신 선과 곡선으로 구성되어 있음을 의미합니다. 벡터 이미지를 확대해도 여전히 곡선 또는 선이 나타납니다. 래스터 이미지를 확대하면 픽셀이 나타납니다.

예를 들면 다음과 같습니다.

이는 SVG가 Retina 화면에서 또는 다른 크기로 선명도를 유지하려는 로고 및 아이콘에 적합하다는 것을 의미합니다.

또한 SVG 파일은 XML을 사용하여 작성되므로 원하는 경우 텍스트 편집기에서 열어서 편집 할 수 있습니다. 예를 들어, 자바 스크립트를 사용하여 웹 사이트에서 SVG 아이콘의 색상을 텍스트처럼 (예 : 두 번째 이미지가 필요하지 않은) 색상으로 변경할 수 있습니다.

도움이 되길 바랍니다.

JPG :

장점 :

• 사용 가능한 다양한 압축 수준
• 모든 이미지 편집기로 손쉬운 조작

불편 함 :

• 압축 아티팩트

용도 :

• 다양한 색상의 큰 사진 또는 이미지
• 높은 압축이 필요한 경우

PNG :

장점 :

• 알파 투명성!
• 많은 색상
• jpg를 대체 할 수 있습니다

불편 함 :

• JPG보다 압축률이 낮습니다 (그렇지는 않지만)
• IE6와 호환되지 않습니다 (그리고 7이라고 생각합니다)-패치 또는 해킹을 사용해야합니다. 그러나 누가 신경 쓰나요? 반드시 사용해야합니다;)

용도 :

• 색상이 많은 중소형 사진 / 이미지
• 그라디언트 투명도를 원할 경우 사용해야합니다
• 아이콘
• 로고

GIF :

장점 :

• 애니메이션 가능
• 8-16 또는 32 가지 색상과 같은 일부 색상 만 사용하면 매우 가볍습니다.
• 투명도

불편 함 :

• 255 개를 초과 할 수 없습니다.
• 애니메이션 GIF는 사람들을 도망 칠 수 있습니다
• 투명도를위한 알파 없음 (투명하거나 아닙니다!)

용도 :

• 애니메이션 gif (주로 뉴스 레터에서 사용)
• 아이콘
• 애니메이션 파비콘 \ o /
• 로고

웹 사이트에는 JPEG, GIF, PNG, SVG 형식 그래픽이 포함될 수 있습니다. 어느 것을 사용해야합니까?

사진 :

투명성이 필요없는 JPEG. 투명성이 필요한 사진 그래픽 용 PNG.

100 % 사실은 아니지만 좋은 경험입니다. 다른 형식에 대한 자세한 내용은이 질문에 대한 다른 답변을 확인하십시오. 또한 투명도가없는 경우 이미지를 디지털로 표시하는 데 더 나은 래스터 이미지 형식을 확인하십시오 . JPEG 또는 PNG? jpeg , png , gif & svg 와 같은 파일 형식 태그를 선택 하면 자세한 내용을 알 수 있습니다.

그래픽의 경우 :

PNG / JPEG 폴 백이 포함 된 SVG

이 시대에 SVG를 제공하지 않을 이유는 전혀 없습니다. 그것들은 일반 이미지와 거의 똑같은 방식으로 구현되며 훨씬 더 다양합니다.

따라서 최신 웹 사이트 디자이너의 워크 플로는 완전히 변경되지 않았으며 업데이트되었습니다. 그래도 그래픽을 위해 PNG 및 JPEG를 준비하고 제공하지만 SVG가 작동하지 않는 경우에만 해당됩니다.

SVG 란 무엇입니까?

SVG는의 약자입니다 Scalable Vector Graphic. 너무 기술적이지 않으면 서 SVG와 다른 픽셀 기반 형식의 차이점은 그래픽 구성을위한 데이터가 수학 계산으로 저장된다는 것입니다. 브라우저가 SVG를 열면 SVG를 렌더링하기 위해 계산해야합니다. 구형 브라우저에는 이러한 계산을 수행하거나 SVG를 처리하는 기능이 없으며, 구형 컴퓨터는 10 년 전에는 사용할 수 없었지만 SVG로 무거운 웹 페이지를 렌더링하는 데 어려움을 겪었을 수 있습니다. SVG의 데이터는 16 진수 형식 (16 진수)으로 저장되므로 픽셀 데이터의 이진 저장에 비해 매우 작은 파일 크기로 최적화 할 수 있습니다.

대체 기술을 달성하는 방법에 대한 자세한 내용은 다음을 참조하십시오.

1. PNG 스크립트를 사용하여 망막 웹에 SVG 사용 마스터 링

2. 투명한 데이터 URI로 성능 및 점진적 개발을위한 SVG 워크 플로우 재 방문

3. CSS 트릭-SVG 대체

첫 번째 링크에서 복사 한 다음 JavaScript 스 니펫은 모든 브라우저가 아닌 대부분의 SVG 지원을 감지하고 PNG 대체를 제공하도록 파일 이름을 변경하기 만하면됩니다.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

SVG를 사용하는 경우

• 일반적으로 가장 작은 파일 크기와 해상도에 독립적이므로 모든 장치 픽셀 비율 (예 : 망막 화면)을 처리 할 수 ​​있습니다.
• 아트가 벡터 파일 형식 (특히 아이콘)에 적합한 경우
• 최신 브라우저만을 대상으로하는 고급 스러움이있는 경우 (SVG 지원은 일부 브라우저에서 비교적 새로운 기능입니다)

아이콘 글꼴을 사용하는 경우

• 광범위한 아이콘 세트가 필요한 경우
• SVG와 같이 벡터 파일 형식의 이점을 원할 때
• 최신 브라우저만을 대상으로하는 고급 스러움이있는 경우 (일부 브라우저에서는 웹 글꼴 지원이 비교적 새롭습니다)

</DA01>

SVG가 가장 좋은 옵션 인 이유는 무엇입니까?

• 하나의 파일에서 원하는 크기로 아름답게 확장 가능 ( @2x.jpg망막 화면 을 제공 하거나 그래픽을 늘릴 필요가 없음 )

• JPEG 및 PNG보다 훨씬 작은 파일 크기

• 로고의 품질을 거의 희생하지 않아도됩니다.

• 다양한 방식으로 반응 형 디자인을보다 쉽게 ​​만듭니다.

노트

• 인라인 SVG에 대한 지원은 덜 일반적이므로 안전을 위해 현재 이미지 태그를 통해 파일에 연결하는 것이 가장 좋습니다. (내비게이션 아이콘과 같이 그래픽을 다른 곳에서 재사용하려는 경우 브라우저를 캐시하여 다른 페이지를로드하는 시간을 절약 할 수 있도록 외부 링크를 그래픽에 연결하려고합니다.)

• IE는 SVGZSVG 그래픽에 사용 가능한 압축 형식 인을 지원하지 않습니다 . 브라우저 와 최신 이전 버전 간의 호환성을 극대화 하려면 SVG 1.0이 시점에서 사용하는 것이 가장 좋습니다 .

• SVG를 사용하여 스프라이트 시트를 다른 이미지 형식과 거의 같은 방식으로 만들 수 있지만 실제 픽셀 값을 사용하여 각 이미지의 x 및 y 좌표를 정의하는 대신 백분율 기반 값을 사용하십시오.

  백분율 값이 정확하지 않은 경우는 어떻습니까?

  너비와 높이를 모두 100으로 나누고 정수 또는 소수점 이하 1 자리까지의 숫자를 달성 할 수 있도록 스프라이트 시트를 작성해야합니다. 예를 들어 10px x 10px스프라이트 시트에 7 x 아이콘을 함께 정렬하는 경우 캔버스를 만들지 마십시오 70px x 10px.

  왜? 100을 7로 나누면을 얻습니다 14.285714285714285714285714285714. 이는 반올림 비율로 어딘가에 불완전한 수학을 일으킬 것입니다.

  대신 80px x 10px캔버스를 만들고 빈 12.5 %에 대해 걱정하지 마십시오. 아이콘은 정확히 12.5 % 단위로 증가하므로 작업하기가 훨씬 쉽습니다.

다양한 색상의 사진 또는 이미지에는 .jpeg를 사용해야합니다. .gif 파일 형식은 애니메이션 이미지 나 투명성이 필요한 경우에 유용하지만 사용이 줄어 듭니다. 가장 많이 사용되는 형식은 .png이며 .gif 파일 형식보다 알파 ​​투명도 및 더 넓은 범위의 색상을 제공 할 수 있습니다. 더 자세한 개요는 Jonathan Snook의 어떤 이미지 형식이 가장 좋은지 확인하십시오 .

좋은 공식은 사진에 JPEG를 사용하고 다른 모든 것에 PNG를 사용하는 것입니다.

물론 알파 투명도가 필요하지 않고 256 색 미만의 그래픽이있는 경우 GIF는 대역폭을 절약 할 수 있지만 확실히 나갈 수 있습니다.

JEPG와 같은 압축 아티팩트가 없기 때문에 PNG를 거의 모든 용도로 사용하고 있으며 요즘에는 거의 호환 가능합니다 (예 : 홈스테드의 SiteBuilder 소프트웨어의 데스크탑 버전이지만 그게 전부입니다.

달성하려는 압축 / 품질 수준에서 기본적으로 이미지를 선택해야합니다.

웹은 정보 다운로드 속도 와 관련이 있으며 이미지 크기는 작을수록 페이지를로드하는 속도가 더 좋습니다.

JPG : 수백만 색상의 이미지 (사진)

PNG 및 GIF : 투명성과 적은 양의 색상. 64/128 가지 색상에서만 사용되지만 일반적으로 256 미만입니다. (아이콘, 래스터가 필요한 벡터 이미지, 고 대비 색상, 색상이 적은 그라디언트)

PNG와 GIF 중에서 선택하는 방법?

우선 압축 / 품질 최적화를 확인하고 더 적은 무게로 더 나은 결과를 제공 할 사람을 선택하십시오. 나는 여전히 광범위하게 GIF를 사용하며 같은 종류의 이미지에 대해 PNG보다 때로는 낫습니다. 한 형식을 다른 형식으로 구별하지 말고 최적화에 더 적합한 형식을 확인하십시오.

• GIF를 선택하십시오 : 256 색 이하의 애니메이션 이미지
• 애니메이션이 필요하지 않은 경우 PNG를 선택할 수 있습니다. 올바른 PNG 선택 : 2 가지 8 비트와 24 비트가 있습니다. 8 비트 품질 / 압축을위한 애니메이션이없는 GIF의 더 나은 버전 인 경향이 있습니다 (그러나 항상 말한 것처럼 웹용으로 저장할 때 확인하십시오). 24 비트는 압축이 없으므로 (특별한 그래픽 효과에는 거의 사용 하지 않음 ) 색상 투명도 사용에 대한 알파 값이 있습니다 (페이지에 특수 필터 또는 .htc 동작을 적용하지 않으면 이전 IE 브라우저는이를 지원하지 않습니다) ).

웹 기사의 90 %가 다양한 기사에서 여전히 PNG가 무손실 형식 일 뿐이라고 생각합니다 . 많은 전문가들은 PNG-8의 존재에 대해조차 모릅니다.

그러나 분명히 PNG-8은 PNG-32 대신 웹에 사용해야합니다. 허용 가능한 품질로 2x-5x 더 작은 파일 크기를 제공하기 때문입니다.

이미지에 어떤 압축이 더 좋은지 결정하기 어려운 경우가 있습니다. 예를 들어 사진이 아니지만 많은 색상과 그라디언트가있는 경우입니다. 이 도구를 사용하면 손실 형식을 시각적으로 비교하고 최상의 변형을 선택할 수 있습니다.

손실 된 PNG 및 JPEG 형식을 비교할 수있는 유용한 도구는 다음과 같습니다. PNG vs JPEG

기본 웹 그래픽 형식은 GIF, JPG 및 PNG입니다. 차이점을 알고 각 이미지에 가장 적합한 형식을 선택하는 것이 중요합니다. 따라서 사진이보기 좋고 크기가 작아 사이트 방문자의 화면에 빠르게 나타납니다.

GIF-그래픽 정보 형식

GIF 그래픽 형식은 차트, 그래프 또는 텍스트가 그래픽으로 설정된 몇 가지 색상 만있는 이미지에 가장 적합합니다. 사용하는 색상이 적을수록 GIF 파일이 더 효율적입니다. GIF 파일 ...

• 최대 256 색을 포함 할 수 있습니다.

• 256 가지 색상 중 하나의 색상이 투명하게 설정된 투명성 기능을 지원합니다. 이렇게하면 파일의 배경이 보이지 않아 웹 페이지의 배경이 보이기 때문에 그래픽이 상자 안에있는 것처럼 보이지 않게됩니다.

• 애니메이션을 적용 할 수 있습니다. 단일 파일 안에는 많은 사진 프레임과 각 프레임이 표시되는 시간을 알려주는 색인이 저장됩니다. 애니메이션 GIF는 표준 이미지 파일로 취급되므로 표준 태그와 함께로드됩니다.

• 손실이 없으며 압축 프로세스로 인해 이미지 품질이 저하되지 않습니다.

• 로딩하는 동안 인터레이스 될 수있어 낮은 품질에서 높은 품질로 페이드 인되는 것처럼 보입니다. 방문자가 기다리는 동안 살펴볼 내용을 제공합니다.

• 사진에 좋지 않습니다. 품질이 떨어지고 파일이 작지 않습니다. 사진에는 ​​JPG 그래픽 형식을 사용하십시오.

JPG-공동 사진 전문가 그룹

JPG 그래픽 형식은 사진 또는 스캔 한 아트 워크와 같이 다양한 색상의 이미지에 가장 적합합니다. JPG 파일 ...

• 최대 1600 만 색상을 포함 할 수 있습니다.

• 가변 압축을 지원합니다. 각 개별 이미지에 다소 압축을 적용 할 수 있습니다. 압축률이 높을수록 품질이 떨어집니다. 이 그래픽 형식으로 파일 크기를 상당히 작게 만들 수 있지만 파일 크기와 사진 품질 사이에서 절충해야하는 경우가 종종 있습니다. 최신 그래픽 소프트웨어를 사용하면 저장하기 전에 미리 볼 수 있습니다.이를 통해 다양한 압축 수준을 실험하여 품질과 파일 크기 간의 최상의 절충안을 선택할 수 있습니다.

• 기본 또는 표준, 기본 최적화 또는 표준 최적화 및 점진적의 세 가지 유형이 있습니다. 기준선은 오늘날 Internet Explorer 버전 1과 같은 고대 브라우저로 간주됩니다. 베이스 라인 최적화는 표준베이스 라인에 비해 더 많은 압축을 제공하며, 오늘날 거의 모든 브라우저에서 이러한 이미지를 읽을 수 있습니다. 인터레이스 GIF 파일과 같은 프로그레시브 JPG는 이미지의 조잡한 표현에서 완성 된 모양까지 다운로드 할 때 빌드됩니다. 이것은 훌륭한 웹 그래픽 형식이지만 이전 브라우저는이 형식을 모두 지원하지는 않습니다.

• 그래픽으로 설정된 텍스트 또는 평면 색상 영역이있는 이미지와 같이 몇 가지 색상 만있는 이미지에는 적합하지 않습니다. 이러한 그래픽에 JPG를 사용하면 필요 이상으로 커지고 "반점"처럼 보입니다.

PNG-프로그레시브 네트워크 그래픽

PNG는 최신 웹 그래픽 형식입니다. PNG 파일 ...

• 모든 최신 브라우저에서 지원됩니다. 이러한 파일은 이전 브라우저에 나타나지 않을 수 있으므로이 그래픽 형식을 사용하면 일부 웹 사이트 방문자가 이미지를 볼 수 없습니다.

• 작고 다재다능하며 투명한 배경을 가지거나 수백만 색상의 이미지를 포함하는 기능과 같은 GIF 및 JPG의 최고의 기능을 결합 할 수 있습니다.

• 여전히 오래된 브라우저에서 지원하지 않기 때문에 여전히 널리 사용되지 않습니다.

언제 사용합니까?

올바른 웹 그래픽 형식을 선택하면 이미지가 좋아 보이고 방문자의 컴퓨터에 빠르게 나타납니다. 잘못된 형식을 선택하면 이미지가 나빠 보이고 다운로드하는 데 시간이 오래 걸립니다.

사람들이 웹에서 저지르는 가장 일반적인 그래픽 실수는 이미지에 잘못된 그래픽 형식을 사용하는 것입니다. 그러나 선택은 정말 간단합니다 ...

• 그래픽에 사진과 같은 많은 색상이있는 경우 JPG를 선택하십시오.

• 그래픽에 색상이 거의없는 경우 GIF를 선택하십시오. GIF를 사용할 때는 사용 된 색상 만 포함 된 최적화 된 팔레트를 사용해보십시오. 파일 크기를 반으로 줄일 수 있습니다.

이상적인 세상에서는 다음과 같이됩니다.

JPEG-래스터 이미지 및 사진 용

PNG-벡터 그래픽 (예 : 로고 등)

불행하게도 Internet Explorer 6 (아쉽게도 많은 사용자)은 PNG 이미지의 투명도를 지원하지 않습니다. 따라서 PNG에 투명도가 포함되어 있으면 문제가 발생할 수 있습니다. 운 좋게도 우아한 방법은 아니지만이 문제를 우회하는 데 사용할 수있는 해킹이 있습니다.

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(편집 : 또한 IE 7에서도 PNG의 일부 기능에 문제가 있다고 생각합니다.)

GIF는 PNG보다 두 가지 장점 만 있습니다.

1. (거의) 완벽한 브라우저 지원 (투명성이 없지만 보너스는 아닙니다)
2. 애니메이션이 될 수 있지만 웹 디자인에서 애니메이션 그래픽을 드물게 사용해야합니다.

편집 : PNG는 개방 형식이므로 PNG가 지원되고 사용 가능한 경우 GIF보다 항상 PNG보다 선호됩니다.

가장 지적한 것처럼 JPEG는 사진 및 PNG와 텍스트 및 그래프가있는 그래픽에 적합합니다. GIF는 애니메이션을 지원한다는 점에서 유일한 이점이 있으며, 매우 신중하게 사용해야합니다.

좋은 팁은 이미지를 JPEG 및 PNG로 내보내는 것입니다. 거의 항상 그래픽에 적합한 형식이 파일 크기를 줄입니다. 사진은 JPEG보다 작아지고 그래프는 PNG보다 작아집니다. 따라서 어느 것을 선택해야할지 잘 모를 경우 좋은 결정자가 될 수 있습니다.