JPG 대 PNG: 웹사이트에 무엇을 선택해야 할까요?

사이트의 사진을 선택할 때 중요한 것은 사진에 있는 것만이 아닙니다. 사실 올바른 이미지 형식을 선택하는 것도 마찬가지로 중요할 수 있습니다. 선택해야 하는 JPG와 PNG, 그리고 그 이유에 대해 이야기해 보겠습니다.

잘못된 형식을 선택하면 웹 사이트 속도가 느려지고 이탈률이 높아지고 전환율이 낮아질 수 있습니다. 특히 쉽게 피할 수 있는 경우에는 이것이 원하는 것이 아닙니다.

PNG와 JPG의 차이점

기본 정의부터 시작하겠습니다.

PNG는 소위 "무손실" 압축을 사용하는 Portable Network Graphics를 나타냅니다. 즉, 압축 전후의 이미지 품질이 동일했습니다.

JPEG 또는 JPG는 Joint Photography Experts Group의 약자로 소위 "손실" 압축을 사용합니다.

짐작하셨겠지만, 이것이 둘의 가장 큰 차이점입니다. JPEG 파일의 품질은 PNG 파일보다 훨씬 낮습니다.

그러나 낮은 품질이 반드시 나쁜 것은 아닙니다.

JPEG 란 무엇입니까?

JPEG 이미지는 디지털 사진으로 생성된 이미지에 일반적으로 선택되며 복잡한 색상과 음영이 있는 사진에 적합합니다.

JPG의 10:1 압축에서는 품질 손실이 거의 감지되지 않지만 사진에 사용되는 데이터의 양을 줄이는 것이 반응형 프레젠테이션에 도움이 되기 때문에 크기가 작을수록 JPEG는 웹 사용에 적합합니다.

반면에 JPG 사진은 인접 픽셀 간의 선명한 대비 때문에 선 그리기 및 기타 텍스트 또는 아이콘 그래픽에 가장 적합한 선택이 아닙니다. 사이트에 해당 유형의 이미지를 사용하려면 무손실 그래픽 형식 사용을 고려해야 합니다.

PNG 란 무엇입니까?

PNG는 GIF의 향상된 대체품으로 만들어졌으며 인터넷에서 가장 일반적인 무손실 이미지 압축 형식이 되었습니다.

그래서 PNG 파일은 무엇입니까?

Portable Network Graphics로 알려진 PNG 이미지는 팔레트 기반, 회색조 및 풀 컬러 비팔레트 기반 RGB/RGBA가 될 수 있습니다.

PNG 파일 형식은 인쇄 그래픽이 아닌 인터넷에서 이미지를 전송하기 위해 특별히 설계되었기 때문에 CMYK와 같은 비 RGB 색상 공간을 지원하지 않습니다.

큰 장점은 .png가 다양한 투명도 수준을 제공한다는 것입니다. 즉, PNG 배경이 완전히 투명할 수 있으며 이는 png 로고 디자인 등에 중요합니다. 또한 페이드 효과가 있는 사진에 가장 적합한 선택입니다.

JPG 대 PNG – 기본 규칙

JPG와 PNG 형식 모두 장단점이 있으므로 둘 다 최대한 활용하고 장점을 활용해야 합니다.

실제로는 사진에 .jpeg를 사용하고 그래픽과 스크린샷에 .png를 사용해야 함을 의미합니다.

정말 중요합니까?

JPG와 PNG에 대해 이야기하고 두 가지를 나란히 비교할 때 사실은 사진에서 많은 차이를 볼 수 없다는 것입니다.

따라서 PNG 사진이 훨씬 더 나은 JPG처럼 보이지 않는다면 항상 JPG 형식을 사용하고 작업을 더 쉽게 만들지 않겠습니까?

불행히도, 그렇게 간단하지 않으며 그 이유는 이미지 압축 때문입니다.

최고 품질의 이미지 형식을 원하지만 반응형 웹사이트도 원하므로 jpeg와 png의 차이, 특히 이미지 압축의 차이를 고려해야 합니다.

다음과 같이 생각하십시오. 이미지 압축은 크기를 위해 품질을 희생하지 않고 이미지 크기를 줄이는 것을 의미합니다. 일반적으로 압축이 강할수록 파일 크기가 작아져 이미지 품질이 떨어집니다.

따라서 좋은 압축을 원한다면 파일의 품질과 크기 사이에서 적절한 균형을 찾아야 합니다.

컴퓨터에 저장된 이미지를 보면 압축되지 않은 파일이기 때문에 가장 좋은 버전으로 보입니다. 그러나 동일한 이미지가 웹사이트에 있는 경우 다운로드해야 볼 수 있습니다.

논리적으로 이는 이미지가 클수록 로딩 시간이 길어짐을 의미합니다.

이미지 압축 서비스

이미지 압축을 위한 많은 서비스와 도구가 있으며 다음은 jpg 또는 png에 사용할 수 있는 몇 가지 좋은 것들입니다.

• Kraken.io – 크기와 품질 간의 훌륭한 균형

• Kraken WordPress 플러그인 – 사이트에 업로드한 이미지의 자동 압축

• WP Smush – 이미지를 자동으로 압축하는 WordPress 플러그인

텍스트가 포함된 그림

때때로 텍스트가 포함된 사진을 사용하고 jpeg 또는 png를 선택하는 것이 중요합니다. PNG는 일반적으로 이러한 유형의 사진과 세부 정보가 포함된 그래픽에 더 나은 선택입니다.

jpg와 png의 중요한 차이점은 JPG를 사용하면 문자의 윤곽과 그래픽의 가는 선이 일반적으로 덜 선명하게 나타난다는 것입니다.

일반 사진

그리고 그래픽과 글자가 있는 이미지는 일반적으로 .png 파일에서 더 잘 보이지만 일반 사진에서는 크기가 작을 경우 JPG가 더 나은 선택입니다.

PNG만 사용하기로 결정하면 웹 사이트가 느려져 사용자가 좌절할 수 있습니다.

이미지 크기 조정

압축 외에도 웹 디자인에 사용하려는 이미지의 크기를 조정할 수도 있습니다. 좋은 소식은 크기 조정이 복잡한 과정이 아니며 올바르게 수행하는 두 가지 방법이 있다는 것입니다.

1 – 이미지의 가장자리를 수동으로 이동할 수 있는 크기 조정 도구를 사용합니다. 원래 높이-너비 비율을 유지하려면 측면 중 하나가 아닌 이미지의 모서리를 잡으십시오. 그러면 이미지 크기를 비례적으로 조정할 수 있습니다.

2 – 이미지를 수동으로 조정하여 크기를 조정하고 싶지 않거나 특정 크기의 이미지가 필요한 경우 이미지 크기를 지정한 다음 시간을 조정할 수 있는 고급 그래픽 프로그램 중 일부를 사용할 수 있습니다. 그에 따라 이미지.

그러나 이미지 크기를 조정한 후 이미지의 초점이 약간 흐려지는 경우가 있으므로 PNG 또는 jpg로 내보내기 전에 일부 선명 도구를 사용하는 것이 좋습니다.

확실하지 않은 경우 PNG 대 JPG

지금까지 우리는 JPG가 사진에 더 좋고 .png 이미지가 그래프와 텍스트가 있는 사진에 더 잘 작동한다는 것을 알고 있습니다. 그러나 그 사이 어딘가에 있는 이미지에는 무엇이 더 좋을까요?

스크린샷은 종종 사진과 텍스트, 날카로운 선을 포함하기 때문에 좋은 예입니다.

그러나 스크린샷에 대해 이야기할 때 JPG와 PNG에 관해서는 거의 항상 PNG 형식을 사용하여 그림 텍스트의 선명도와 가독성을 유지하는 것이 좋습니다.

하루가 끝나면 어떤 형식을 사용해야 하는지 여전히 확신이 서지 않는 경우에는 항상 두 형식 모두에 사진을 저장한 다음 비교하고 필요에 가장 적합하다고 생각되는 형식을 결정할 수 있습니다.

JPG 대 PNG 비교에 대한 결론

이제 PNG 파일이 무엇인지, PNG와 JPG의 차이점이 무엇인지 알았으므로 웹 사이트를 보기 좋고 빠르고 반응이 좋은 상태로 유지하기 위해 올바른 형식을 선택하는 것이 더 쉬울 것입니다.

JPG와 PNG에 대해 이야기할 때 염두에 두어야 할 몇 가지 핵심 사항이 있습니다.

PNG는 그래프, 텍스트가 있는 사진, 스크린샷 및 로고 디자인 등과 같이 투명도를 사용해야 하는 디자인에 가장 적합합니다. 그러나 가장 큰 단점은 크기가 더 크고 웹 사이트 속도가 느려진다는 것입니다.

반면에 JPG는 더 작고 로드 속도가 빠르지만 압축하면 품질 손실이 발생하므로 일반적으로 사진에는 문제가 되지 않지만 텍스트나 가는 선이 포함된 이미지에는 좋지 않을 수 있습니다.

어떤 것을 사용해야 할까요? 글쎄, 그것은 이미지의 유형과 당신이 만들고 있는 웹사이트의 유형에 달려 있습니다.