이미지 형식을 올바르게 선택하고 이미지를 최적화하는 것은 웹 사이트 이미지를 올바르게 사용하는 데 중요합니다. 잘못 사용하면 웹 사이트 성능이 느려지고 사용자 경험이 저하 될 수 있습니다.
jpeg, gif, png, svg 및 webp는 일반적으로 웹 사이트 이미지 형식으로 사용됩니다. JPEG, GIF 및 PNG는 오랫동안 사용되는 형식이지만 SVG와 Webp는 비교적 새롭지 만 응답하고 빠르게로드하는 웹 사이트에 적합한 적합성으로 인해 점점 인기를 얻고 있습니다.
이미지 형식 선택은 이미지 유형, 파일 크기 및 브라우저 호환성에 따라 다릅니다. 예를 들어, JPEG는 품질과 압축으로 인해 사진에 적합하지만 PNG는 투명성에 대한 지원으로 인해 로고 및 아이콘에 적합합니다.
Webp는 큰 파일 크기를 생성하지 않고 JPEG 및 PNG의 장점을 결합하여 Google에서 개발 한 최신 이미지 형식으로 네트워크 사용에 이상적입니다. 그러나 모든 브라우저에서 보편적으로 지원되는 것은 아닙니다.
-
이 기사는 Siteground와 공동으로 작성된 일련의 기사의 일부입니다. Sitepoint를 가능하게 한 파트너를 지원해 주셔서 감사합니다. -
2017 년 3 월 현재 이미지는 웹 콘텐츠의 65% 이상을 차지했습니다.
그것은 놀라운 일이 아닙니다 : 이미지는 아름다움을 추가하고, 정보를 전달하고, 이야기를 전하고, 웹 사이트 방문자와 연결합니다. -
반면에, 부적절하게 사용하는 경우 이미지는 종종 웹 사이트 속도가 느리고 사용자 경험이 좋지 않은 주된 이유입니다.
인터넷에서 이미지의 올바른 사용에는 주로 두 가지가 포함됩니다.
-
올바른 이미지 형식을 선택하십시오
최적화 된 이미지
이 기사에서는 첫 번째 요점에 대해 논의 할 것입니다. 특히 웹에서 가장 좋은 이미지 형식과 가장 적합한 이미지 유형을 다룰 것입니다.
그러나 추가 논의 전에 몇 가지 용어를 간단히 설명해 봅시다. 
라디계/비트 맵 및 벡터 이미지
라디칼 또는 비트 맵 이미지는 2 차원 픽셀 그리드로 구성됩니다. 각 픽셀은 색상 및 투명성 값을 저장합니다.
래스터 이미지의 축소 효과는 좋지 않습니다. 확대되면 선명도와 품질이 상실됩니다. 네트워크에서 일반적으로 사용되는 래스터 이미지 유형은 JPEG 또는 JPG, GIF 및 PNG 형식입니다.
다음은 Apple의 두 개의 래스터 이미지 (JPG)입니다. 첫 번째는 이미지의 자연적인 크기입니다. 두 번째는 동일한 이미지 확대 버전의 세부 사항을 보여줍니다.
래스터 이미지의 자연 크기의 예.
자연 크기보다 훨씬 큰 래스터 이미지 세부 사항.
확대 된 이미지 버전은 원래 사본에 비해 품질이 악화됩니다.
대조적으로 벡터 이미지는 선, 모양 및 경로 지점으로 구성됩니다. 벡터의 정보는 픽셀에 저장되지 않습니다. 대신, 그것들은 픽셀과 완전히 관련이없는 수학적 드로잉 지침에 저장됩니다. Alex Walker는 SVG (웹에서 가장 인기있는 벡터 형식)를 언급했을 때 매우 잘 말했다 :
SVG는 이미지 형식이 아닙니다. 이미지 "레시피"와 비슷합니다.
왜 JPEG가 맥도날드의 사과 파이와 같은지 (그리고 SVG는 그렇지 않습니다)
해상도와 관련이없는 의미 중 하나는 벡터 이미지를 마음대로 확장 할 수 있다는 것입니다. 항상 깨끗하고 밝고 망막 스크린에 완벽하게 보일 것입니다.
소규모 SVG 그래픽.
SVG 그래픽 세부 사항을 축소하십시오.
위의 두 이미지는 동일한 벡터 그래픽의 뷰이지만 두 번째 이미지에서는 벡터의 렌더링 크기가 첫 번째 이미지보다 두 배 이상 큽니다. 그러나 품질 상실은 없습니다.
손실 및 비파괴
"Lossy"및 "Lossless"는 디지털 미디어에 적용되는 파일 압축 기술 (예 : 이미지, 오디오 및 비디오)을 참조하십시오.
손실 압축 :
디지털 데이터는 원래 데이터의 100%로 다시 압축되지 않습니다. 손실 방법은 높은 수준의 압축을 제공하고 더 작은 압축 파일을 생성 할 수 있지만 원래 픽셀, 사운드 파 또는 비디오 프레임의 어느 정도가 영원히 손실됩니다.
<.com .com> pcmag.com Encyclopedia
이것은 실제로 더 많은 손실이 압축 될수록 작다는 것을 의미합니다. 그러나 파일 크기가 감소함에 따라 일부 원본 파일의 품질을 돌이킬 수 없게 손상시킬 수도 있습니다. 손실 압축은 파일 크기와 품질 사이의 상충 관계를 포함합니다.
웹에서 자주 볼 수있는 하나의 손실 이미지 유형은 jpeg입니다.
대조적으로, 무손실 압축은 압축 자원과 원래 자원 사이의 데이터 손실을 일으키지 않습니다. 이는 압축으로 인해 파일 품질이 떨어지지 않음을 의미합니다. 그러나 이로 인해 무손실 파일 형식은 일반적으로 손실 파일 형식의 형식보다 큽니다.
웹에서 쉽게 찾을 수있는 무손실 이미지 형식은 GIF 및 PNG입니다.
이 예비 정보는 컨텐츠에 가장 적합한 이미지 형식을 결정할 때 매우 유용합니다.
아래에서 소개하고 싶은 첫 번째 3 가지 이미지 파일 유형, 즉 JPG, GIF 및 PNG가 오랫동안 웹 사이트에서 사용되었습니다. 마지막 두, 즉 SVG와 Webp는 완전히 새로운 형식이 아니라 아직 주류가되지 않았습니다. 그러나 응답 및 빠른 로딩 웹 사이트에 대한 수요에 적합하기 때문에 인기가 높아지고 있습니다.
jpeg
JPEG 또는 JPG는 Joint Image Expert Group이 개발 한 손실 된 이미지 형식입니다.
웹 사이트의 모든 콘텐츠 유형의 거의 3%가 JPG 이미지로 구성됩니다. 이것이이 이미지 형식이 그렇게 인기있는 이유입니다 :
JPG 형식은 수백만 개의 색상을 표시 할 수 있습니다. 이것은 웹에 사진 작품을 표시하기에 이상적인 선택입니다.
손실 파일 유형으로 압축을 사용하여 파일 크기를 크게 줄일 수 있습니다. JPG 파일은 다양한 압축 수준을 제공합니다. 약 60%는 네트워크 이미지에 충분하며 75% 이상의 압축으로 인해 이미지 품질 저하가 발생합니다. -
모든 인터넷 지원 장치는 JPG 이미지 형식을 지원하므로 웹 사이트에서 쉽게 사용할 수 있습니다.
-
JPG 파일에서 누락 된 것은 투명성에 대한 지원입니다. 따라서 투명한 배경을 사용하여 웹 페이지의 배경색 또는 질감과 이미지를 혼합하려면 JPG 이미지가 적합한 선택이 아닙니다. 아래에 나열된 옵션 중 하나를 선택하는 것이 좋습니다.
gif -
gif는 그래픽 교환 형식을 나타냅니다. 최대 256 개의 색상을 지원하는 8 비트 무서운 형식입니다. 이 제한으로 인해 GIF 파일은 넓은 색 영역 및 사진 이미지를 표시하는 데 부적합합니다.
다음은 웹 사이트에서 GIF 파일을 장기적으로 사용하는 데 큰 역할을하는 핵심 요점 중 일부입니다.
파일 크기는 일반적으로 256 개의 색상의 제한을 감안할 때 매우 작습니다.
지원 투명도
<.> 지원 애니메이션. 따라서 아이콘, 이모티콘, 배너 등과 같은 루프 애니메이션 이미지를 표시하는 데 적합합니다.
평평한 색상의 간단한 이미지에 적합하지만 사진에는 적합하지 않습니다
png
PNG는 휴대용 네트워크 그래픽을 나타냅니다. W3C에서 개발 한 GIF의 대안 형식입니다. GIF와 마찬가지로 무손실 압축 알고리즘을 사용하고 8 비트 또는 24 비트 형식이 있습니다. 두 형식 모두 투명성을 지원합니다. 그러나 24 비트 PNG 이미지의 투명성은 알파 채널과 빨간색, 녹색 및 파란색 채널을 사용하여 달성됩니다. 따라서 GIF 및 8 비트 PNG 이미지는 완전히 불투명하거나 완전히 투명하지만 PNG 이미지의 각 픽셀은 최대 256 개의 불투명도 수준을 제공합니다.
당신은 에 24 비트 PNG 형식을 사용할 수 있습니다
다양한 수준의 투명도 가있는 네트워크 이미지
복잡한 그림 및 그래픽
그래픽 자주 편집하고 내보내는 데 필요한 그래픽 : 무손실 형식은 품질의 저하를 보장하지 않습니다.
GIF 형식과 달리 PNG 이미지 유형은 애니메이션을 지원하지 않으며 파일 크기는 상당히 클 수 있습니다. -
svg
SVG는 XML 기반 벡터 파일 유형 인 확장 가능한 벡터 그래픽을 나타냅니다. 2001 년 이후에 있었지만 최근 웹 개발자들 사이에서 매우 인기를 얻었습니다. 이 뒤늦은 사랑의 이유는 SVG가 수년간 브라우저 지원이 좋지 않았기 때문입니다. 다행스럽게도 글을 쓰는 시점에서 SVG는 불일치와 버그에도 불구하고 모든 주요 브라우저에서 지원된다고 말하게되어 기쁩니다. -
SVG 형식에는 많은 기능이 있으며 특히 로고, 맵, 아이콘 등과 같은 간단한 이미지에 사용될 때 웹 그래픽 형식에 탁월한 선택으로 권장 할 수 있습니다. 특히 적합합니다.
SVG 형식의 장점
SVG는 일반적으로 래스터 대응 자보다 파일 크기가 작습니다. 특히 네트워크에 최적화하고 GZIP 형식으로 제공하는 경우
그들은 확장 가능합니다. 즉, 화면 해상도에 관계없이 날카 로워 보입니다
다음은 웹을 구현하는 방법에 대해 더 많이 배울 수있는 훌륭한 리소스입니다.
Webp FAQ
Webp 이미지 형식은 무엇입니까?
웹 사이트를 최적화하기 위해 완벽한 이미지 형식을 선택하는 방법
웹 사이트 사용 안내서 : 사례 연구
Webp Images 사용
결론
이 기사에서는 네트워크 이미지 형식을 간략하게 설명하고 더 적합한 이미지 유형에 대해 간략하게 논의합니다.
JPG, GIF 및 PNG는 매우 인기가 있으며 오랫동안 사용되어 왔습니다. SVG와 Webp는 새롭고 흥미로운 대안입니다. SVG는 삽화와 간단한 이미지에 적합하며 Webp는 JPG 및 PNG를 사용할 수있는 모든 경우에 적합합니다.
개발 작업에서 SVG 또는 Webp를 사용 했습니까? 당신은 어떤 도전에 직면합니까? 상당한 성과 이익을 경험 했습니까?
주석 상자를 클릭하여 공유하십시오!
웹 사이트 이미지 형식 (FAQ)에 대한 FAQ 웹 사이트 이미지 형식을 선택할 때 고려해야 할 주요 요소는 무엇입니까?
웹 사이트의 이미지 형식 선택은 몇 가지 요소에 따라 다릅니다. 먼저 작업중인 이미지의 유형을 고려하십시오. 예를 들어, 사진은 최고의 품질과 압축을 위해 JPEG 형식으로 가장 잘 저장되는 반면, 로고와 아이콘은 PNG 형식으로 사용하여 투명성을 지원할 수 있습니다. 둘째, 파일 크기를 고려하십시오. 파일 크기가 작게로드하여 웹 사이트의 속도와 성능을 향상시킵니다. 마지막으로 브라우저 호환성을 고려하십시오. 대부분의 최신 브라우저는 JPEG, PNG 및 GIF와 같은 형식을 지원하지만 Webp와 같은 최신 형식은 모든 브라우저에서 지원되지 않습니다.
이미지 형식이 내 웹 사이트 SEO에 어떤 영향을 미칩니 까?
이미지 형식은 웹 사이트 SEO에 큰 영향을 줄 수 있습니다. Google과 같은 검색 엔진은 더 빠르게로드되는 사이트의 우선 순위를 지정하지만 이미지 파일 크기가 작아지면이를 달성하는 데 도움이 될 수 있습니다. 또한 Google은 우수한 압축 및 품질 특성으로 인해 JPEG 2000, JPEG XR 및 Webp와 같은 특정 이미지 형식을 선호합니다. 이러한 형식을 사용하면 웹 사이트의 검색 엔진 순위가 향상 될 수 있습니다.
손실 압축과 무손실 압축의 차이점은 무엇입니까?
손실과 무손실은 이미지 형식에 사용되는 두 가지 유형의 데이터 압축입니다. 손실 압축은 "불필요한"데이터 비트를 제거하여 파일 크기를 줄이지 만 이미지 품질 저하로 이어질 수 있습니다. JPEG는 일반적인 손실 형식입니다. 반면에 무손실 압축은 이미지 품질을 희생하지 않고 파일 크기를 줄이지 만 를 생성합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
