JPEG 대 PNG에 대한 초보자 가이드(및 둘 다 사용하는 방법)

웹은 이미지와 함께 무엇입니까? 수십 년 안에 인터넷은 디지털 도트 매트릭스 프린터에서 이미지, 비디오, 애니메이션 등을 포함한 동적 멀티미디어 서버로 바뀌었습니다. 그러나 디지털 스틸의 경우 JPEG와 PNG, 특히 각각을 언제 사용해야 하는지에 대해 혼동이 있을 수 있습니다.

JPEG 이미지와 동일하지만 PNG와 함께 보면 차이가 없을 것입니다. 두 이미지 형식 모두 웹에 가장 적합한 이미지를 재현하는 것을 목표로 하기 때문에 이것이 이상적입니다. 그러나 유념해야 할 다양한 사용 사례와 최적화 기술이 있습니다.

이 기사에서는 JPEG와 PNG를 비교하고 언제 각 이미지 형식을 사용해야 하는지 알려줄 것입니다. 먼저 각 파일 형식을 소개하겠습니다.

JPEG와 PNG의 차이점

표면적으로(문자 그대로) JPEG와 PNG 사이에는 차이가 없습니다. 다시 말해, 두 개의 이미지를 올리고 어떤 것이 JPEG이고 어떤 것이 PNG인지 선택하라고 하면 대부분의 시간을 말할 수 없을 것입니다. 예를 들어 다음 이미지를 사용합니다.

이 Scarlet Mormon 나비가 JPEG 이미지인지 PNG 이미지인지 결정할 수 있습니까? 물론 참조 프레임이 없으면 비교할 수 없습니다.

이 경우에는 큰 차이를 만들지 않을지라도 분명한 차이가 있습니다. 브라우저의 개발자 도구를 살펴보지 않고 결정하려고 하는 동안 공유할 수 있는 몇 가지 기술적인 세부 정보가 있습니다.

• JPEG(Joint Photographic Experts Group) 파일 형식은 디지털 이미지의 손실 압축을 제공합니다. 이것은 이 값과 파일 크기 사이의 균형이 너무 많이 흔들리면 이미지 품질이 눈에 띄게 된다는 것을 의미합니다. JPEG는 '플랫' 파일입니다. 즉, 파일 내에서 투명도를 표시할 수 없습니다. 압축 수준을 조정할 수 있지만 최상의 설정에서도 JPEG는 동적 범위에 영향을 미치는 8비트 파일이 됩니다. 게다가 JPEG에는 종종 색상 프로필이 포함되어 있어 모니터에 색상을 표시하는 방법을 알려줍니다.
• 대조적으로, PNG(Portable Network Graphics) 이미지는 웹용 파일입니다. 24비트 파일을 출력할 수 있는 기능으로 JPEG보다 더 동적인 형식입니다. 또한 '무손실' 형식이므로 이미지 품질을 저하시키지 않고 복제할 수 있습니다. 그러나 PNG 파일의 압축을 조정할 수 없으며 색상 프로필이 없습니다. 그럼에도 불구하고 PNG는 기술 사양에 따라 웹에 적합합니다.

PNG는 웹에 적합하고 JPEG는 적합하지 않습니다. 글쎄, 이것은 전체 이야기가 아닙니다. 각 파일 형식은 특정 응용 프로그램에 적합합니다. 다음으로, 우리는 그것들에 대해 논의할 것입니다.

JPEG 대 PNG: 각각을 사용해야 하는 경우

웹은 JPEG와 PNG를 최대한 활용합니다. 사실, 그들은 많은 교차 없이 좋은 방식으로 도브테일(dovetail)합니다. 편리한 사운드 바이트로서 JPEG 대 PNG를 사용해야 하는 경우는 다음과 같습니다.

사진을 표시하려면 JPEG를 사용하십시오. 다른 파일, 특히 디지털 그래픽의 경우 PNG를 사용하십시오.

그러나 이 조언이 모든 상황에 해당되는 것은 아닙니다(거의 모든 경우에 해당되지만). 예를 들어, 디지털 드로잉을 스톡 이미지와 결합하면 JPEG와 PNG 모두 기술적으로 사용하기에 올바르지 않습니다. 나중에는 올바른 결정을 내리기 위해 더 많은 지식을 갖게 될 것입니다.

예를 들어 이미지를 복사하려는 경우 JPEG와 다른 파일 형식을 사용하십시오. 이는 손실 압축 형식이 파일의 대략적인 버전만 재구성하기 때문입니다. 대조적으로 PNG는 무손실 압축을 제공하기 때문에 1:1 재생산입니다.

또한 이미지를 저장한 후 크기를 조정하려면 크기 조정을 잘 처리하는 JPEG를 사용하십시오. PNG는 치수(또는 기타 기술적 속성)를 변경하면 성능이 저하되는 다른 인코딩 구조를 사용합니다.

알아야 할 기타 이미지 형식

물론, JPEG와 PNG는 고려해야 할 유일한 이미지 파일 형식 비교가 아닙니다. 주의를 끌기 위해 경쟁하고 다른 사용 사례가 있는 다른 많은 파일 형식이 있습니다.

• 그래픽 인터페이스 형식(GIF). 움직이는 밈이나 반응 동영상을 Twitter에 게시하면 GIF입니다. 사실 PNG는 원래 사양에서 GIF 파일을 대체하려고 했으며 둘 다 투명 레이어를 제공합니다.
• 태그가 지정된 이미지 파일 형식(TIFF). 이 래스터 기반 파일 형식은 CMYK 색상 공간을 지원하기 때문에 인쇄에 적합합니다.
• 원시 이미지 형식(RAW). 사진가인 경우에만 사용할 수 있으며 사용하는 카메라에만 해당됩니다. 컴퓨터에서 RAW 파일을 볼 수 있지만 이를 보려면 전용 소프트웨어가 필요합니다. 데이터가 완전하기 때문에 파일 크기는 천문학적입니다. 실제로 RAW 형식은 이미지가 아니라 인코딩될 때 이미지를 나타내는 데이터입니다.
• 고효율 이미지 파일(HEIF). 이것은 iOS 장치의 기본 파일 형식입니다. JPEG보다 더 나은 압축 및 파일 크기를 제공하며 다양한 멀티미디어 형식을 처리할 수 있습니다.

이러한 각 이미지 파일은 웹에서 사용되지만(디스플레이와 관련된 RAW 파일 제외) JPEG와 PNG는 여전히 우세합니다. 둘 다 장단점이 잘 균형을 이루는 특정 사용 사례가 있습니다.

업로드를 위해 이미지를 준비하는 방법(3가지 방법)

JPEG 대 PNG가 최종 디스플레이 품질과 관련하여 무승부로 나왔음에도 불구하고 최상의 결과를 얻으려면 각 형식을 다른 방식으로 처리해야 합니다. 파일 크기, 품질 및 이미지의 전반적인 준비에 영향을 줄 수 있는 세 가지 영역이 있습니다.

• 측정기준이 마주하게 될 관련 사용 사례를 설명하는지 확인하세요.
• 웹에 적합한 이미지의 해상도를 선택하십시오.
• 품질에 너무 많은 영향을 미치지 않으면서 이미지의 파일 크기를 더 줄이려면 '맛있는' 압축을 사용하십시오.

예상대로 여기에 균형이 잘 잡혀 있습니다. 이미지의 크기부터 시작하겠습니다.

1. 치수 설정

이미지의 크기는 체인의 다른 어떤 지점보다 최종 사용자에게 더 중요합니다. 브라우저에서 이미지를 로드해야 하고 파일이 크면 사용자 경험(UX)이 손상되기 때문입니다. 그러나 이것이 유일한 고려 사항은 아닙니다. 물론 품질도 중요합니다. 이미지 크기를 작게 만들기로 결정하면 최종 이미지 품질에 영향을 미치게 됩니다(PNG보다 JPEG의 경우 더 그렇습니다).

답은 이미지 크기부터 시작하여 몇 가지 영역에 걸쳐 최적의 지점을 찾는 것입니다. 일반적으로 필요한 세부 정보를 전달할 수 있도록 이미지를 충분히 크게 만드는 것이 좋습니다. 타겟 플랫폼과 이미지 자체에 따라 다른 부분이 어딘가 과한 부분이 있습니다.

최신 크롭 센서와 풀프레임 디지털 카메라는 기본 크기가 약 6,000px x 3,000px인 이미지를 생성할 수 있습니다(카메라 간에는 큰 차이가 있음). 대조적으로, 약 2,000픽셀의 '긴 가장자리'가 있는 이미지는 소셜 미디어에서 일반적입니다. 이것은 장치의 전체 뷰포트에 표시하기 위한 것임을 명심하십시오.

블로그 이미지의 경우 이 2,000픽셀 경험 법칙은 1,000픽셀만큼 낮을 수도 있습니다. 이것은 고화질 또는 'Retina' 이미지도 고려합니다. 고화질 화면에서 선명하게 표시하려면 두 배의 치수가 필요한 경우가 많습니다. 사실, 결의안은 다음으로 넘어가기 좋은 곳입니다.

2. 올바른 해상도 설정

디지털 화면의 기본 요소 중 하나는 픽셀입니다. 픽셀이 균일한 크기는 아니지만 이 작은 점들이 전체 디스플레이를 구성합니다. 이 때문에 JPEG 및 PNG 이미지를 준비할 때 해상도도 고려해야 합니다.

인치당 픽셀 수(PPI)를 사용하여 화면에 들어갈 수 있는 픽셀 수를 논의합니다. 이것을 센티미터 또는 '점'으로 표현할 수도 있습니다. 후자는 실제 인쇄 형식을 위한 것이며 그래픽 디자인 업계에서는 DPI를 자주 사용합니다. 따라서 PPI가 올바른 용어이지만 상호 교환 가능한 방식으로 사용되는 것을 듣게 될 것입니다.

PNG 이미지 사양은 최적의 디자인 해상도로 72 PPI를 사용하지만 이것은 최신 고화질 화면을 고려하지 않습니다. 모든 화면에서 선명하게 렌더링하기 위해 이미지 크기를 두 배로 늘릴 수 있지만 해상도에서도 동일한 작업을 수행할 수 있습니다. 예를 들어 macOS Big Sur 데스크탑의 다음 스크린샷을 찍습니다.

긴 가장자리(이 경우 위쪽과 아래쪽)에 1,000픽셀이 있는 PNG입니다. 144 PPI를 사용하지만 WordPress에 업로드할 때 해상도를 72 PPI로 변환하는 일부 업로드 '마법'이 있습니다.

PNG 및 JPEG 이미지 모두 훨씬 더 높은 PPI도 사용할 수 있습니다. 인쇄 가능한 해상도는 약 300DPI/PPI입니다. 또한 Pixabay와 같은 스톡 사진 사이트의 많은 이미지가 300 PPI를 사용하여 다운로드됩니다.

따라서 이 값을 줄이면 웹 및 다양한 디스플레이용으로 이미지를 더 잘 준비할 수 있습니다.

3. 압축을 사용하여 이미지 최적화

이미지 최적화에 대해 많이 말할 필요는 없습니다. 블로그의 다른 곳에서 찾을 수 있는 주제이며 거의 모든 WordPress 사용자는 업로드 프로세스 전이나 도중에 이미지를 최적화하는 방법을 알고 있습니다.

일반적인 개념은 종종 손실 방식으로 이미지에 추가 압축을 적용한다는 것입니다. 이것은 이미지 품질에 영향 을 미치며, 손실 압축을 많이 적용하기 전에 크기와 해상도를 크게 변경하면 눈에 띄게 나타납니다.

이미지를 잘 표현하려면 이러한 아티팩트가 최소화되어야 합니다. 이 때문에 작업을 수행하는 데 사용할 수 있는 도구가 많이 있습니다. 가장 접근하기 쉬운 것은 TinyPNG이지만 JPEG도 압축합니다.

그러나 적용되는 압축은 일부 이미지에서 부드럽기 때문에 파일 크기가 충분히 줄어들지 않을 수 있습니다. ShortPixel과 같은 서비스는 공격적인 손실 압축 형식을 사용할 수 있지만 광택 압축은 TinyPNG에 비해 훌륭한 작업을 수행합니다.

여기서 중요한 점은 압축 수준과 파일 크기 및 이미지의 다른 모든 요소의 균형을 맞춰야 한다는 것입니다. 다음 섹션에서 우리는 가장 좋은 접근 방식에 대해 논의할 것입니다.

JPEG 대 PNG: 각 형식을 최대한 활용하는 방법

파일 형식의 차이에도 불구하고 웹 검색의 특성으로 인해 이미지를 다음과 같이 준비할 수 있습니다.

• 긴 가장자리에 1,000–2,048픽셀 사이의 치수를 사용합니다.
• 모든 이미지에 대해 144 PPI의 해상도를 설정하여 모든 화면에서 선명하고 선명하게 표시되도록 합니다.
• 이미지 최적화를 통해 미묘한 압축을 적용하면 파일 크기를 줄이는 데 도움이 됩니다. 모든 것을 고려하면 대부분의 이미지 크기는 약 100–200kb입니다.

여기에는 특정 파일 형식을 기반으로 한 추가 정보가 있습니다.

• PNG 파일의 경우 크기를 줄이면 이미지 품질이 너무 떨어질 수 있습니다. 여기서 아이디어는 이러한 요인을 완화하기 위해 해상도를 가능한 한 높게 유지하는 것입니다.
• JPEG 파일은 복사를 견디지 ​​못합니다. 각 복제는 마지막보다 성능이 저하되기 때문입니다. JPEG의 출처를 제어할 수 있는 경우(예: 사진을 찍은 경우) TIFF 또는 RAW 파일에서 JPEG를 만들어 이미지의 품질을 유지합니다.
• 경험상 JPEG는 다른 파일 형식과 마찬가지로 압축을 사용하지 않습니다. 즉, 압축 단계를 수행하기 전에 해당 이미지를 준비하고 최적화하는 것이 중요합니다.

지금쯤이면 JPEG와 PNG, 사용 시기 및 파일 준비 방법에 대해 확실히 이해하고 있을 것입니다. 그리고 기사의 시작 부분에서 어떤 이미지가 JPEG인지 여전히 알고 싶다면 첫 번째 이미지입니다!

마무리

이미지가 웹을 실행하는 것처럼 보입니다. 이 때문에 우리는 응용 프로그램에 적합한 파일 크기로 올바른 품질을 제공하는 데 도움이 되는 다양한 파일 형식을 보유하고 있습니다. JPEG와 PNG는 둘 중 어느 것이 좋은지 명확하지 않고 널리 사용되는 두 가지 이미지 형식이기 때문에 일반적인 비교입니다.

간단히 말해 JPEG는 사진용이고 PNG는 그래픽용입니다. 파일을 준비하려면 파일 크기보다 이미지 품질을 높게 유지해야 합니다. 그러나 해상도를 조정하면 가장 큰 변화를 얻을 수 있지만 이는 이미지 품질에 더 큰 영향을 미칩니다. 비결은 궁극적인 웹 지원 이미지를 얻기 위해 크기, 해상도 및 압축의 균형을 맞추는 것입니다.

여기에 설명된 대로 웹용 이미지를 준비합니까, 아니면 다른 작업을 수행합니까? 아래 의견 섹션에서 알려주십시오!

이미지 크레디트: minka2507, christels .