PNG 또는 JPG 또는 GIF: 사이트에 적합한 이미지 파일 형식 선택

오늘날 가장 일반적인 두 가지 이미지 파일 형식은 JPG와 PNG입니다. 언뜻보기에 JPG는 PNG 파일로 저장된 동일한 이미지와 똑같이 보일 수 있습니다. 파일을 저장할 때 PNG용 JPG 중 하나를 선택할 수 있기 때문에 확장자에 사용된 문자를 제외하고는 둘을 서로 바꿔 사용할 수 있는 것처럼 보입니다.

W3Techs에 따르면 JPG와 PNG는 모두 다른 파일 형식보다 더 많이 사용되며 PNG는 약간 더 자주 사용됩니다.

하지만 JPG와 PNG 파일 사이에는 뚜렷한 차이점이 있으며 온라인에서 이미지를 사용할 때 무엇을 선택해야 하는지 알아야 합니다. 파일 유형은 웹 페이지에서 파일이 배치되는 위치, 파일을 보는 품질 및 로딩 시간을 늦추는지 여부에 영향을 줄 수 있습니다. 웹사이트나 소셜 미디어 피드에 애니메이션을 포함하고 싶다면 GIF 파일과 JPG 및 PNG와의 차이점에 대해서도 알고 싶을 것입니다.

YouTube 채널 구독

무손실 및 손실 압축

이미지를 압축하는 목적은 공간을 절약하는 것입니다. 이미지가 작을수록 전송 및 저장이 더 쉽습니다. 큰 이미지는 많은 디지털 공간을 차지하며 웹 페이지 로딩 속도를 늦출 수 있습니다. 일반적으로 이미지를 압축하면 일부 데이터가 이미지에서 제거됩니다.

압축에는 무손실 및 손실의 두 가지 유형이 있습니다. JPG와 PNG의 뚜렷한 차이점 중 하나를 이해하려면 이 두 가지 압축 유형에 대한 소개가 필요합니다.

무손실 압축

이미지에 중복 정보가 포함되어 있습니다. 무손실 압축은 중복된 데이터를 제거하지만 컴퓨터에 중복된 데이터의 양과 이미지를 재구축하는 방법도 알려줍니다. 공간을 절약하기 위해 파일 크기가 줄어들지만 압축된 파일에서 전체 파일을 재구성할 수도 있습니다. 나는 Make Use Of의 이 예를 좋아합니다. 무손실 압축이 실제로 구조를 변경하지 않고 정보를 제거하는 방법을 의도적으로 단순하게 표현한 것입니다.

손실 압축

MP3 파일은 손실 압축의 좋은 예입니다. 원본 녹음에 있는 모든 오디오가 포함되어 있지는 않습니다. 사람이 들을 수 없거나 거의 들을 수 없는 소리가 제거됩니다. 이것은 이미지의 손실 압축이 작동하는 방식과 유사합니다. 이미지가 압축되면 정보가 일시적인 것이 아니라 영구적으로 제거됩니다. 제거된 데이터는 복원할 수 없습니다. 이미지가 편집 및/또는 다시 저장될 때마다 약간 더 많은 데이터가 손실되어 품질이 저하됩니다.

JPG

JPG(또는 JPEG)는 Joint Photographic Experts Group의 약자입니다. 파일 확장자는 .jpg 또는 .jpeg일 수 있습니다. 이러한 확장자는 동일하며 파일은 동일한 방식으로 작동합니다. 초기 Windows 버전은 세 글자의 파일만 처리할 수 있었기 때문에 JPEG는 JPG로 단축되었습니다. 웹사이트나 소셜 미디어 플랫폼에서 사진을 볼 때 JPG를 볼 가능성이 가장 큽니다.

JPG의 기능과 이점은 다음과 같습니다.

• 일반적으로 그래픽 대신 사진에 사용됩니다.
• 게임, 영화 및 이와 유사한 콘텐츠의 스크린샷에 가장 적합한 선택입니다.
• 흰색 또는 빈(투명하지 않음) 배경에 이미지가 저장되었습니다.
• PNG보다 파일 크기가 작습니다.
• 더 빠른 페이지 로드 시간과 더 나은 사용자 경험.
• 손실 압축이지만 압축 비율을 조정할 수 있습니다. 이미지를 압축할 정도를 선택할 수 있습니다.
• 편집하고 다시 저장하면 화질이 저하되지만 저장 횟수와 이미지가 표시되는 위치에 따라 인식하지 못할 수 있습니다.

JPG 알고리즘은 색상이나 값이 같은 픽셀을 찾아 타일로 차단합니다. JPG는 수백만 가지 색상을 지원하지만 최종 이미지는 원본보다 색상이 적습니다(예: 오디오 트랙). 이렇게 하면 더 작은 이미지가 생성되지만 복구할 수 없는 데이터가 손실되기도 합니다. 그러나 JPG는 사람들이 보는 밝기를 고려하므로 색상 정보를 떨어뜨리더라도 밝기를 유지할 수 있어 고품질 이미지를 생성합니다.

PNG

PNG는 휴대용 네트워크 그래픽을 나타냅니다. 파일 확장자는 .png입니다. 웹 사이트에서 브랜드 로고를 볼 때 PNG를 볼 가능성이 가장 큽니다.

PNG의 기능과 이점은 다음과 같습니다.

• 일반적으로 일러스트레이션 및 기타 유형의 그래픽에 사용됩니다.
• 일러스트레이션, 상세 다이어그램 및 앱 스크린샷을 위한 최고의 선택입니다.
• 투명한 배경에 저장된 이미지 – 주변에 방해가 되지 않고 웹사이트에 배치합니다.
• 다양한 색상 및 회색조 지원.
• 로고를 업데이트하려는 경우와 같이 PNG 파일의 색상을 변경할 수 있습니다.
• 사용되는 색상이 적을수록 파일이 작아질 수 있습니다.
• 무손실 압축.

사진을 PNG로 저장

대부분의 경우 사진을 JPG 파일로 저장하지만 PNG로 저장하려는 경우가 있습니다.

• 가능한 한 높은 품질의 이미지가 필요합니다. PNG는 JPG보다 더 자세한 정보를 제공합니다.
• 사진을 여러 번 편집하고 저장하게 됩니다. 편집이 끝나면 사진을 JPG로 저장하여 크기를 제한할 수 있습니다.
• 사진에 텍스트도 있습니다. JPG는 텍스트 품질을 현저히 떨어뜨립니다.
• 사진의 배경이 투명해야 합니다. 예를 들어 사진 중 하나를 로고로 사용하고 있을 수 있습니다.

GIF

GIF는 그래픽 교환 형식을 나타냅니다. 파일 확장자는 .gif입니다. 반복되는 짧은 애니메이션 비디오를 볼 때 GIF를 보고 있을 가능성이 큽니다.

다음은 GIF의 기능과 이점입니다.

• 세 가지 중 애니메이션을 지원하는 유일한 파일 형식입니다.
• 단순한 그래픽을 위한 최고의 선택입니다.
• 제한된 색상 범위.
• 제한된 색상 조정으로 인해 JPG보다 작습니다.
• 무손실 압축.

압축용 WordPress 플러그인

WordPress 웹 사이트의 이미지를 압축하려면 소프트웨어, 브라우저 기반 도구 또는 플러그인을 사용할 수 있습니다. 일부 사람들은 서버에 추가 부담을 주지 않거나 호환성 문제에 대해 걱정하거나 백업을 생성하는 추가 단계를 거치고 싶지 않기 때문에 플러그인을 사용하지 않습니다. 하지만 프로세스를 간소화하려는 경우 플러그인이 매우 효율적일 수 있습니다.

압축을 위해 WordPress 플러그인을 사용할 때 염두에 두어야 할 몇 가지 사항은 다음과 같습니다.

• 크기를 조정한 후 이미지를 업로드할 필요가 없습니다. 이미지는 이미 WordPress 미디어 라이브러리에 있을 것입니다.
• 많은 플러그인에는 업로드 중에 최적화하여 프로세스에서 다른 단계를 제거할 수 있는 설정이 있습니다.
• 두 개의 압축 플러그인이 동일한 작업을 수행한다고 해도 자체 설정, 장단점이 있습니다. 압축률과 품질의 적절한 균형을 찾기 위해 몇 가지를 가지고 놀아야 할 수도 있습니다.
• 압축 플러그인의 무료 버전은 처음에는 매력적으로 들리지만 압축 결과가 형편없어 보일 수 있으므로 더 높은 품질의 이미지를 원하면 업그레이드해야 합니다.
• 일부 플러그인은 설치 및 설정이 까다롭지만 다른 플러그인은 기본적으로 완벽하게 작동합니다.
• 추가 기능은 일부 플러그인을 다른 플러그인보다 더 매력적으로 만듭니다. 예를 들어, ShortPixel에는 전문 사진작가에게 적합한 광택 옵션이 있습니다. Imagify는 원본 이미지를 별도의 폴더에 보관하므로 언제든지 복원할 수 있습니다.

마지막 생각들

이미지를 어떻게 사용할지 아는 것은 선택할 파일 형식을 결정하는 첫 번째 단계입니다. 궁극적으로 목표는 대상에 필요한 만큼의 품질을 유지하면서 가능한 가장 작은 파일을 사용하는 것입니다. 웹사이트에서 본 이미지는 Instagram에서 본 이미지보다 더 큰 페이지에 표시되므로 품질이 필요합니다. 결함을 덜 눈에 띄게 만들기 위해 더 높게 설정합니다. 마음이 상해서 잃어버릴 사진의 경우 원본을 저장하는 백업 시스템을 사용하십시오. 실수로 너무 많이 압축하면 처음부터 다시 시작할 수 있습니다.

웹사이트에 대한 더 많은 이미지를 찾고 싶으십니까? Unsplash는 내가 가장 좋아하는 무료 스톡 사진 장소 중 하나입니다. 한 번의 클릭으로 WordPress에서 Unsplash 이미지를 사용하여 기사를 확인하십시오.