WebP 이미지 및 WordPress: 왜 그리고 어떻게 사용합니까?

게시 됨: 2021-11-25

WebP 이미지 및 WordPress

WordPress 웹 사이트의 속도를 높이려면 WebP 이미지 형식을 사용하는 것이 좋습니다. 웹사이트의 콘텐츠가 느리게 로드되는 주된 문제는 모두 웹사이트에 있는 큰 사진 때문입니다.

그러나 이미지 압축기는 사용자가 이미지 파일의 메가바이트를 로드하도록 강제할 수 있으며 이로 인해 연결 크롤링이 지연됩니다. 이와 함께 압축기로 인해 웹사이트 이미지가 흐릿해질 수 있습니다.

그러나 이미지를 압축하지 않고 이미지 품질에 영향을 주는 파일 형식도 있습니다. 손실이 많은 JPEG 압축이 작동하는 방식과 이미지가 간신히 보이는 방식이 마음에 들지 않으면 WebP를 사용하도록 선택해야 합니다.

WebP 이미지와 워드프레스 가 의미하는 바는 무엇이며 언제 사용해야 하며 워드프레스를 기반으로 하는 웹사이트에 WebP를 어떻게 추가할 수 있습니까?

이 블로그에서 이 모든 질문에 대한 답을 찾을 수 있습니다. 또한 페이지 로딩 시간에 영향을 주지 않고 이미지 크기를 최소화하고 더 빠르게 로드할 수 있는 솔루션을 찾을 수 있습니다.

WebP: 무슨 뜻인가요?

우리가 사용하는 가장 인기 있는 이미지 형식은 www의 시작부터 널리 사용되었습니다. 그리고 예, JPEG, PNG 및 GIF와 같은 인기 있는 이미지 형식은 가능한 최선의 방식으로 작업을 수행합니다. 그렇다면 더 많은 이미지 형식이 필요한 이유는 무엇입니까?

이미지 형식의 다른 방법을 검색하는 주요 문제는 이러한 형식이 이미지를 최상의 방법으로 압축할 수 없다는 것입니다.

인터넷의 사용은 나날이 증가하고 있습니다. 따라서 점점 더 많은 사람들이 모바일 장치를 통해 모든 정보를 검색하는 것을 선호합니다. 이 장치는 데스크톱 컴퓨터에 비해 적은 전력 패키지와 같은 기술의 작은 부분입니다.

전 세계적으로 모바일 연결이 가능하므로 기존 유선 인터넷보다 속도가 느려질 수 있습니다.

2010년에 장기 실행 문제에 대한 대안 옵션과 함께 제공되는 WebP 이미지 및 WordPress가 발표되었습니다. 이전 이미지 형식을 사용하여 얻을 수 있는 것보다 뛰어난 압축률과 더 높은 품질의 이미지를 제공합니다.

WebM과 유사한 목표를 가지고 있습니다. WebM은 웹에 최적화하면서 오디오와 비디오를 압축하는 것을 의미합니다.

WebP는 무손실 압축과 손실 압축을 모두 사용합니다. 이와 함께 메타데이터, 색상 프로필, 투명도, 애니메이션 등도 지원합니다. 따라서 모든 주요 브라우저와도 호환됩니다.

그러나 Internet Explorer, KaiOS 및 기타 사파리 버전에서는 더 잘 작동하지 않습니다. 그러나 여전히 이전 버전의 Safari를 포함하여 이러한 브라우저를 사용하는 사용자가 너무 많습니다.

WebP가 필수 요소로 간주되는 이유

WebP 이미지 및 WordPress에서 Google은 많은 연구를 수행했습니다. 그러나 그들은 알고리즘이 손실 이미지의 경우 25-34% 더 작게 압축할 수 있고 무손실 이미지의 경우 26% 더 작게 압축할 수 있다는 것을 매번 발견했습니다.

이것은 WebP가 일관성 제공에 의존하기 때문에 압축을 더 잘 수행한다는 것을 의미합니다. 이와 함께 PNG와 같은 무손실 알고리즘과 비교해도 이미지 품질이 떨어지지 않습니다.

이것이 WebP를 사용하는 것의 장점이지만, 여전히 오래된 기술을 사용하여 이미지를 압축하는 사용자가 너무 많습니다.

그러나 WebP 기능을 활용한 웹사이트는 0.3%에 불과합니다. WebP와 함께 추세가 올라가고 있지만 여전히 사람들은 덜 사용되는 기술을 고수하고 있습니다.

WebP의 이점에 대해 이야기할 때 이것은 매우 놀라운 일입니다.

WebP는 투명도, 애니메이션 등과 일부 일반 브라우저와의 비호환성을 포함하는 일부 지원 기능을 제공할 수 없기 때문에 문제가 될 수 있습니다.

또한 PNG와 같은 다른 이미지 형식에서 WebP로 전환하는 작업도 쉽지 않습니다. WebP 이미지를 컴퓨터에 저장하는 것만으로는 웹사이트에 이미지를 업로드할 수 없습니다. 처리해야 할 몇 가지 단계가 더 포함되어 있습니다.

그러나 웹 사이트 콘텐츠가 빨리 로드되기를 정말로 원한다면 약간의 추가 노력을 기울일 가치가 있습니다.

WebP 및 기타 이미지 파일 형식 유형

이미지 파일 형식이 너무 많습니다. 모두 특정 작업을 수행하기 위한 훌륭한 기능을 제공합니다. 일부 파일 형식은 이미지를 잘 압축하는 데 유용하지만 일부는 애니메이션을 지원합니다.

투명한 배경을 제공하는 다른 형식도 찾을 수 있습니다. WebP가 모든 대안에 대해 최선의 선택이라고 말하지는 않지만 예, 다양한 상황에 사용할 수 있는 일부 기능을 제공합니다.

전 세계적으로 사용되는 일반적인 이미지 파일 형식을 살펴보겠습니다.

  • PNG: PNG는 가장 일반적인 파일 형식으로 간주될 수 있습니다. 이 파일 형식은 무손실 압축에 더 많이 사용되며 아트웍과 사진을 온라인으로 표시하는 것이 가장 좋습니다.
  • TIFF: 또 다른 파일 형식은 압축이 없는 TIFF입니다. 이 이미지는 모든 칭찬에 표시됩니다. TIFF로 저장되는 대부분의 파일은 파일 크기가 커지기 때문입니다. 웹의 경우 이것은 최선의 선택이 아닙니다.
  • GIF: 또 다른 형식은 애니메이션과 함께 지원되는 GIF입니다. 그러나 250가지 이상의 색상도 지원하는 가장 오래된 파일 형식이라고 할 수 있습니다. GIF 형식으로 저장된 이미지는 품질이 낮고 보기 흉합니다. 애니메이션을 찾고 있다면 GIF 형식을 선택해야 합니다.
  • EPS 및 SVG 파일: 이 두 가지는 자체적으로 연결되어 있습니다. 이것은 픽셀로 생성되지 않았기 때문에 확장 가능하고 선명한 벡터 이미지를 저장하고 표시합니다.
  • WebP: WebP의 이미지 품질은 파일 크기가 더 작은 PNG 또는 JPG와 동일합니다. 또한 애니메이션과 투명도를 지원합니다.

더 작은 이미지와 교환하여 일종의 이미지 품질을 잃는 것이 편안하다면 WebP가 이상적인 선택입니다.

포트폴리오 웹사이트와 같이 이미지 품질이 중요한 역할을 하는 프로젝트에서 작업하고 있지 않다면 절충안이 좋습니다. 그렇지 않은 경우 PNG가 좋은 옵션입니다. 이 대신 TIFF 이미지를 사용하는 경우가 거의 없습니다. 그렇지 않으면 WebP가 작업에 이상적인 옵션입니다.

WordPress에 WebP 이미지를 업로드하는 방법

WebP 이미지 및 WordPress를 업로드하는 데 도움이 되는 두 가지 방법이 있습니다.

  • 첫 번째 방법은 웹사이트에 WebP 이미지를 수동으로 업로드하는 것입니다.
  • 두 번째 방법은 플러그인을 사용하여 웹사이트에 WebP 이미지를 업로드하는 것입니다.

플러그인을 사용하여 웹사이트에서 WebP 이미지를 가져올 것을 권장합니다. 플러그인을 사용하는 동안 코딩 작업을 처리할 필요가 없고 설정이 거의 필요하지 않기 때문에 가장 쉬운 방법이기 때문입니다.

그러나 WebP 이미지를 수동으로 가져오기로 선택한 경우 먼저 WebP 이미지를 가져와야 합니다. WebP는 이미지를 저장할 수 없거나 컴퓨터에 확장자를 변경할 수 없으며 전용 변환기가 필요합니다.

이를 위해 WebPShop으로 알려진 Google의 Photoshop 플러그인을 사용할 수 있습니다. 또는 온라인 WebP 변환기를 사용하여 컴퓨터에 이미지를 업로드할 수도 있습니다.

WebP 이미지를 업로드할 준비가 되면 WebP 이미지를 HTML 또는 CSS로 표시할 수 있습니다. 지원되지 않는 브라우저의 경우 대체 이미지를 결정해야 합니다. 그러나 이것보다는 HTML의 다른 이미지를 참조하는 것과 같습니다.

이것으로 문제가 있습니다:

WordPress에서 허용하지 않기 때문에 미디어 업로더를 사용하여 WebP 이미지를 업로드할 수 없습니다. 이 유형의 파일이 귀하의 브라우저에서 지원되지 않는다고 판단하여 오류만 표시합니다.

서버에서 WebP 이미지를 수동으로 업로드할 수 있고 웹사이트를 적절하게 구성하여 표시할 수 있지만 많은 노력이 필요합니다.

프로세스를 단순화하기 위해 일부 WordPress 플러그인을 사용할 수 있습니다. 플러그인을 사용하면 변환을 훨씬 쉽게 수행할 수 있습니다. 그러나 이미지를 추가하기 위해 코드를 편집하는 데 많은 작업을 수행할 필요는 없습니다.

1. 상상하다

상상하다

Imagify는 단순한 WebP 변환이 아니라 업로드하는 이미지와 썸네일을 최적화하는 데 도움이 되는 플러그인이라고 말할 수 있습니다.

Imagify에는 세 가지 다른 수준의 압축이 포함되어 있습니다. 즉, ultra(최대 손실 압축), normal(무손실) 및 공격적(손실)입니다.

대량 최적화 프로그램은 업로드된 모든 이미지를 압축하는 데 도움이 됩니다. 따라서 백업 버전이 저장되므로 이미지를 압축하지 않으려면 실행 취소할 수 있습니다.

Imagify를 사용하여 웹사이트에 이미지를 추가하자마자 다른 WebP 버전이 추가됩니다. 이러한 방식으로 웹사이트에서 최적화된 WebP 이미지를 선보일 수 있습니다.

Imagify의 도움으로 매달 25MB의 이미지를 무료로 압축할 수 있습니다.

2. EWWW 이미지 최적화

ewww 이미지 옵티마이저

또 다른 가장 인기 있는 WordPress 이미지 최적화 플러그인은 EWWW입니다. 이 플러그인은 WebP 변환기로 두 배가 됩니다. 무료로 무제한 이미지를 압축할 수도 있습니다.

따라서 이 플러그인으로 작업하는 동안 월별 데이터 한도에 대해 걱정할 필요가 없습니다. 또한 대량 업로더로 구성됩니다. 그러나 미디어 라이브러리에 저장되었는지 여부는 중요하지 않은 모든 이미지를 압축합니다.

이 플러그인으로 WebP를 사용할 수 있습니다. 모든 과정은 자동입니다. 원본 이미지를 변경하지 않고 압축, 지연 로딩 및 페이지 크기 조정도 받게 됩니다.

3. ShortPixel 이미지 최적화 도구

숏픽셀 이미지 옵티마이저

ShortPixels를 사용하면 이미지를 압축할 수 있는 다양한 기능을 얻을 수 있습니다. 몇 번의 클릭으로 해당 기능을 사용할 수 있습니다.

따라서 매우 쉽게 WebP 버전을 자동으로 생성할 수 있습니다. 대량 최적화 프로그램을 사용하거나 직접 업로드하여 이미지를 최적화할 수 있습니다.

또한 이미지 파일 형식을 PNG에서 JPG로 변환하고, 이미지 크기를 조정하고, 축소판을 최적화하고, 이미지를 최적화하고, 메타데이터를 제거하고, 서버에서 최적화되지 않은 이미지를 백업하는 데 도움이 됩니다.

이 플러그인은 실제로 크레딧 시스템을 기반으로 작동합니다. 즉, 매월 100개의 이미지 크레딧이 있는 경우 매월 100개의 이미지를 압축하여 더 많이 압축할 수 있으므로 크레딧을 더 구입해야 합니다.

결론:
워드프레스에서는 WebP가 실제로 지원되지 않지만 웹사이트에서 WebP 이미지를 계속 사용할 수 있습니다. 직접 업로드하려고 하면 작동하지 않습니다. 그러나 웹사이트에 WebP를 매우 쉽게 추가할 수 있는 많은 플러그인을 찾을 수 있습니다.