PNG와 GIF, JPEG, SVG의 다른 사용 사례는 무엇입니까?
답변:
몇 가지 핵심 요소를 알고 있어야합니다 ...
먼저, 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보다 나은 점은 알파 투명도를 지원하는 것입니다.
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 로고를 이미지 품질 저하없이 훨씬 더 큰 (더 큰) 크기로 사용할 수 있음을 의미합니다. 래스터 형식의 파일 크기 측면에서 별도의 큰 파일이 필요합니다.
SVG 파일 크기는 시각적으로 매우 크더라도 종종 작습니다. 그러나 사용되는 모양의 복잡성에 따라 달라집니다. SVG는 곡선과 선을 그리는 데 수학적 계산이 포함되므로 래스터 이미지보다 더 많은 컴퓨팅 성능이 필요합니다. 로고가 특히 복잡하면 사용자의 컴퓨터 속도가 느려지고 파일 크기가 매우 커질 수 있습니다. 벡터 모양을 최대한 단순화하는 것이 중요합니다.
또한 SVG 파일은 XML로 작성되므로 텍스트 편집기 (!)에서 열고 편집 할 수 있습니다. 즉, 해당 값을 즉석에서 조작 할 수 있습니다. 예를 들어, JavaScript를 사용하여 웹 사이트에서 SVG 아이콘의 색상을 변경하거나 텍스트 (예 : 두 번째 이미지가 필요하지 않음)와 유사하게 애니메이션을 적용 할 수 있습니다.
로고나 그래프와 같은 단순한 평면 모양에 가장 적합합니다.
도움이 되길 바랍니다.
JPEG는 모든 종류의 이미지 (또는 대부분)에서 가장 밝지는 않습니다. 압축 수준에 따라 모서리와 직선 및 일반 "채우기"(단색 블록)가 흐리거나 유물이 나타납니다. 손실 형식이며 아티팩트가 선명하게 보이지 않는 사진에 가장 적합합니다. 직선 (예 : 그림 및 만화 등)은 PNG에서 매우 잘 압축되며 손실이 없습니다. GIF는 IE6에서 투명도가 작동하거나 애니메이션을 원할 때만 사용해야합니다. GIF는 256 색 팔레트 만 지원하지만 무손실입니다.
기본적으로 이미지 형식을 결정하는 방법은 다음과 같습니다.
- IE6에서 작동하는 애니메이션 또는 투명성이 필요한 경우 GIF (IE6 이후 PNG 투명도 작동)
- 이미지가 사진 인 경우 JPEG.
- 만화 또는 다른 그림과 같이 직선이거나 투명도가 넓은 넓은 색상 범위가 필요한 경우 PNG (IE6은 중요하지 않음)
언급 한 바와 같이, 어떤 것이 적합한 지 확실하지 않으면 다른 압축 비율로 각 형식을 시도하고 그림의 품질과 크기를 측정 한 후 가장 적합한 형식을 선택하십시오. 나는 단지 경험의 법칙만을주고있다.
GIF보다 몇 가지 장점이있는 것처럼 일반적으로 PNG를 사용합니다. 이전에는 GIF에 대한 특허 제한이 있었지만 만료되었습니다.
GIF는 제한된 수의 색상을 가진 날카로운 모서리 라인 아트 (예 : 로고)에 적합합니다. 이 형식의 손실없는 압축은 가장자리가 잘 정의 된 균일 한 색상의 평평한 영역을 선호합니다 (JPEG와 달리 부드러운 그라데이션과 부드러운 이미지를 선호 함).
작은 애니메이션 및 저해상도 필름 클립에 GIF를 사용할 수 있습니다.
GIF 이미지 팔레트에서 256 색으로의 일반적인 제한을 고려할 때 일반적으로 디지털 사진 형식으로 사용되지 않습니다. 디지털 사진 작가는 TIFF, RAW 또는 손실이있는 JPEG와 같이 다양한 색상을 재현 할 수있는 이미지 파일 형식을 사용하여 사진 압축에 더 적합합니다.
PNG 형식은 더 나은 압축 기술을 사용하고 256 색의 제한이 없지만 PNG는 애니메이션을 지원하지 않기 때문에 GIF 이미지 대신 널리 사용됩니다. PNG에서 파생 된 MNG 및 APNG 형식은 애니메이션을 지원하지만 널리 사용되지는 않습니다.
GIF는 이미지 당 256 색 팔레트를 기반으로합니다 (적어도 기본 화신으로). PNG는 "TrueColour", 즉 1670 만 개의 색상을 사용할 수 있습니다. 무손실 PNG는 무손실 GIF보다 더 잘 압축됩니다. GIF는 "이진"투명도 (0 % 불투명도 또는 100 % 불투명도)를 수행 할 수 있습니다. PNG는 알파 투명도를 처리 할 수 있습니다.
대체로 알파-투명 이미지를 사용하지 않고 IE6를 지원할 필요가 없다면 벡터 일러스트 등을 위해 완벽한 픽셀 이미지가 필요할 때 PNG가 더 나은 선택 일 것입니다. JPG는 사진에 적합하지 않습니다.
2018 년 현재 여러 가지 새로운 형식, 이전 형식에 대한 지원 개선, 이미지 대신 비디오를 사용하는 영리한 해킹이 있습니다.
사진 용
jpg -여전히 가장 널리 지원되는 이미지 형식입니다.
webp- 구글의 새로운 형식 . 브라우저 지원 은 크지 않지만 좋은 잠재력 .
아이콘 및 그래픽
svg- 언제든지 가능할 때. Retina 화면에서 잘 확장되며 텍스트 편집기에서 편집 가능하며 DOM에로드 된 경우 JS / CSS를 통해 사용자 정의 할 수 있습니다.
png-래스터 그래픽이 포함 된 경우 (예 : Photoshop에서 만들 때) 이 사용 사례에서 매우 중요한 투명성을 지원합니다.
애니메이션
svg-벡터 그래픽을위한 CSS 애니메이션. svg + CSS 애니메이션의 모든 장점.
gif -여전히 가장 널리 지원되는 애니메이션 이미지 형식입니다.
mp4-애니메이션 이미지가 실제로 짧은 비디오 클립 인 경우 트위터 / Whatsapp는 GIF를 MP4로 변환합니다.
apng-괜찮은 브라우저 지원 (IE, Edge 없음).하지만 gif만큼 간단하지는 않습니다.
webp-mp4 사용에 가깝습니다. 불쌍한 지원
이것은 좋은 비교입니다 다양한 애니메이션 이미지 형식을 입니다.
마지막으로, 어떤 형식이든 최적화해야합니다. 각 형식에 대한 도구 (예 : SVGO, Guetzli, OptiPNG 등)가 있으며 상당한 대역폭을 절약 할 수 있습니다.
주요 차이점은 GIF는 특허를 받았으며 조금 더 광범위하게 지원된다는 것입니다. PNG는 공개 사양이며 IE6에서는 알파 투명도가 지원되지 않습니다. IE7에서는 지원이 향상되었지만 완전히 수정되지는 않았습니다.
파일 크기의 경우 GIF는 기본 색상 팔레트가 더 작으므로 언뜻보기에 파일 크기가 더 작습니다. PNG 파일은 기본 팔레트가 더 크지 만 색상 팔레트를 축소하면 GIF보다 파일 크기가 작아집니다. 문제는이 기능이 Internet Explorer에서 지원되지 않는 것입니다.
또한 PNG는 알파 투명도를 지원할 수 있으므로 이진 투명도 이외의 투명도 변형을 원하는 경우 유일한 옵션입니다.
JPEG를 선택하고 웹 사이트의 이미지를 다루는 경우 Google Guetzli 를 고려할 수 있습니다. 경우 무료로 사용할 수 지각 인코더 수 있습니다. 내 경험상 고정 품질을 위해 Guetzli는 표준 JPEG 인코딩 라이브러리보다 작은 파일을 생성하면서 JPEG 표준과의 완전한 호환성을 유지합니다 (따라서 이미지는 일반 JPEG 이미지와 동일한 호환성을 갖습니다).
유일한 단점은 Guetzli가 인코딩하는 데 많은 시간 이 걸린다는 것입니다 .. 그러나 웹 사이트의 이미지를 준비 할 때 한 번만 수행되며 이점은 영원히 남아 있습니다! 작은 이미지는 다운로드 시간이 덜 걸리므로 일상적인 사용에서 웹 사이트 속도가 증가합니다.