다양한 이미지 형식

이미지와 다양한 시각적 요소는 웹사이트 디자인의 영향을 결정하는 데 중요한 역할을 하는 경우가 많습니다. 다양한 범주의 이미지 파일이 존재하며 각 범주에는 고유한 장점과 단점이 있습니다. 여기에서는 래스터 이미지, GIF, PNG, JPEG, SVG 및 WebP에 대해 자세히 살펴보겠습니다. 이러한 형식은 웹 전반에 걸쳐 널리 활용되며 웹 사이트 이미지의 특정 요구 사항에 따라 선택적으로 선택할 수 있습니다.

래스터 이미지

압축 지원이 부족하여 웹사이트에서 이 파일 형식을 사용하지 않는 것이 좋습니다. 결과적으로 파일 크기가 상당히 커져서 페이지 로딩 속도가 느려집니다.

GIF

"JIF"라고도 알려진 GIF는 기본 애니메이션에 자주 사용됩니다. 색상은 256개로 제한되어 있어 단순한 그래픽에 적합합니다. GIF는 알파 투명도 지원이 없더라도 투명도를 허용하므로 잠재적으로 반투명 요소에 대한 표시 문제가 발생할 수 있습니다.

PNG

이 형식은 투명도, 특히 알파 투명도가 필요한 이미지에 이상적입니다.

PNG 형식은 8비트와 24비트의 두 가지 변형으로 제공됩니다. 8비트 버전은 더 적은 색상 옵션과 제한된 투명도를 제공하는 반면, 24비트 버전은 광범위한 색상 선택과 전체 알파 투명도 지원을 제공합니다. 두 버전 모두 온라인에서 활용할 수 있지만 일반적으로 알파 투명도 때문에 24비트 PNG 형식이 선호됩니다. 다음과 같은 도구 이미지최적화[↗] 그리고 이미지알파[↗] 24비트 PNG 파일을 256색까지 압축할 수 있어 투명도를 유지하면서 파일 크기를 크게 줄일 수 있습니다.

JPEG

JPEG는 파일 크기를 줄이는 압축 기능으로 유명한 매우 인기 있는 형식입니다. 300KB 바로 위에 있는 JPEG 형식으로 저장된 이미지를 생각해 보세요.

비교해 보면 동일한 해상도와 크기의 비트맵 형식의 동일한 이미지는 50MB를 초과할 수 있으므로 JPEG 이미지보다 약 150배 더 커집니다. 이는 각 픽셀에 대한 세부 정보를 저장하는 비트맵으로 인해 파일 크기가 커지기 때문입니다. 비트맵 파일을 저장한다는 것은 각 픽셀에 대해 "회색 픽셀, 회색 픽셀, 회색 픽셀"과 같은 데이터를 저장하는 것과 같습니다.

JPEG 압축을 사용하면 이미지 품질을 저하시키지 않고 데이터를 크게 줄일 수 있습니다. 반복적인 픽셀 데이터를 생략하는 이러한 유연성은 다용도 형식으로서 JPEG의 매력을 강화합니다.

SVG

SVG 또는 확장 가능한 벡터 그래픽은 고정된 픽셀 크기를 사용하는 다른 형식과 달리 벡터 그래픽을 사용하므로 해상도에 독립적입니다.

이러한 그래픽은 뛰어난 결과를 바탕으로 무한히 확장될 수 있습니다. 일반적으로 SVG는 모양, 텍스트, 스케치 및 로고에서 적용됩니다.

메모: 실제 픽셀로 구성된 사진 이미지의 경우 다른 형식을 선택하는 것이 좋습니다.

중요한: SVG는 Gmail과 같은 다양한 이메일 클라이언트와 호환되지 않기 때문에 제품 및 변형 이미지 필드는 물론 전자상거래 이메일 브랜드 로고에 적합하지 않습니다.

WebP 형식

그만큼 WebP 이미지 형식 파일 크기를 크게 줄이면서 이미지 품질을 유지합니다. 이는 이미지 집약적인 웹사이트나 저장 공간 절약을 목표로 할 때 매우 유용한 것으로 입증되었습니다.

WebP를 선호하는 파일 형식으로 만드는 몇 가지 장점은 다음과 같습니다.

• JPEG 또는 PNG에 비해 압축이 향상되어 웹 사이트 로딩 속도가 빨라지고 사용자 유지율이 향상되며 저장 공간 사용량이 줄어듭니다.
• 투명도 및 애니메이션 지원
• 무손실 및 손실 압축 옵션 제공

기존 이미지 자산은 자산 패널 내의 Webflow 변환 도구를 사용하여 WebP 파일로 변환할 수 있습니다.

메모: Webflow 변환 도구는 손실 압축만 제공합니다. 압축에 대한 자세한 내용은 Webflow에서 이미지 자산을 WebP 파일로 변환하는 방법에 대한 지침을 참조하세요..

WebP 이미지에는 측면 길이 제한이 16383픽셀로 제공됩니다. 웹페이지 성능과 저장 효율성을 향상시키지만 특정 브라우저에서는 이 형식을 지원하지 않을 수 있습니다. WebP 지원을 위한 브라우저 호환성 확인.