WordPress에서 WebP 이미지를 사용하는 방법은 무엇입니까?

사이트에 이미지가 너무 많으면 PNG 또는 JPG 형식으로 업로드됩니다. WordPress에서 WebP 이미지를 사용하는 방법을 배우면 이미지의 파일 크기를 줄이고 빠른 로드를 위해 사이트의 이미지를 최적화하는 데 도움이 됩니다.

WebP 란 무엇입니까?

과거에 JPEG, JPG, PNG와 같이 널리 사용된 이미지 파일 형식이 있어야 합니다. 이러한 기본 이미지 유형 외에도 들어봤어야 하는 다른 이미지 파일 유형도 있습니다.

WebP는 빠른 로딩을 위해 이미지를 최적화하기 위해 Google에서 개발했습니다. 파일 크기를 줄여 이미지 파일을 전달하는 데 중점을 둡니다. 사이트에서 정기적으로 이미지를 사용하고 모든 이미지의 파일 크기를 줄일 수 있다면 웹사이트 속도가 크게 향상됩니다.

Pagespeed 인사이트 를 통해 사이트를 확인하면 " 차세대 형식으로 이미지 제공 "에 대한 권장 사항이 표시됩니다. 아직 수행하지 않은 경우 WebP 가 이러한 권장 형식 중 하나입니다.

이미지 압축은 무손실 또는 손실이 있을 수 있습니다. PNG 이미지는 무손실 압축의 좋은 예입니다. 무손실 압축 중에 압축된 이미지는 손실에 비해 품질이 떨어집니다. 실제로, 무손실 이미지 의 압축은 이미지에 존재하는 원치 않는 데이터 비트를 줄임으로써 발생합니다. 이러한 이유로 필요한 경우 압축을 해제하여 원본 이미지를 복구할 수 있습니다.

반면에 손실 이미지 는 이미지에서 데이터 비트를 영구적으로 제거하므로 손실 없는 이미지보다 파일 크기가 작습니다. 결과적으로 JPG/JPEG 파일 압축 시 품질이 저하됩니다.

WebP 이미지 형식은 무손실 또는 손실 형식으로 압축할 수도 있습니다. 그러나 압축하는 동안 품질이 저하되는 것을 방지합니다. WebP는 손실 압축을 사용하는 경우 예측 코딩을 사용하여 파일 크기를 줄이는 반면, 무손실 압축의 경우 WebP는 복잡한 방법을 사용하여 이미지 파일을 압축합니다. 결과적으로 WebP 이미지 압축은 기존의 PNG/JPG 압축보다 우수합니다.

Google은 이미 WebP 이미지 파일의 크기가 PNG 이미지보다 26% 작고 JPEG 이미지보다 25~34% 작다고 말했습니다.

이것이 가능할 때마다 WordPress에서 WebP 이미지를 사용하는 방법을 배워야 하는 이유입니다.

WebP 이미지의 장점과 단점

WebP 이미지 파일이 작동하려면 페이지 방문자가 WebP 호환 브라우저를 사용해야 합니다. 사용자의 95% 이상이 WebP를 지원하는 웹 브라우저를 사용합니다. Chrome, Firefox, Opera, Microsoft Edge 와 같은 브라우저는 WebP 이미지를 완벽하게 지원합니다.

최신 버전의 ios 및 macOS Safari 는 WebP와 호환되지만 이전 버전은 WebP를 지원하지 않습니다. 또한 Internet Explorer는 WebP 버전의 이미지를 지원하지 않습니다. 그러나 Edge가 IE를 대체한 것은 안도의 일입니다.

WebP 이미지를 사용하면 사이트가 더 빨라지지만 마이너 브라우저 버전과 호환되지 않기 때문에 사이트에서 WebP를 사용하는 것이 좋습니다.

사이트를 더 빠르게 만든다고 해서 지원되지 않는 콘텐츠를 사용자에게 제공해야 하는 것은 아닙니다. 그러나 WebP 이미지를 지원하는 브라우저에 WebP 이미지를 전달해야 합니다. PNG/JPG 이미지 사본이 있는 경우 지원되지 않는 브라우저에 전달할 수 있습니다. 이것은 WebP 버전의 이미지를 처리하는 적절한 방법입니다.

WordPress에서 WebP 이미지를 사용하는 방법은 무엇입니까?

WebP 이미지를 추가하기 위해 귀하의 사이트에 적합한 아래 나열된 방법 중 하나를 선택할 수 있습니다.

CDN

WordPress 사이트에서 다양한 글로벌 위치에서 웹 사이트 콘텐츠를 제공하는 데 사용할 수 있는 CDN이 많이 있습니다. CDN을 사용하면 웹 사이트를 사용하지 않을 때보다 비교적 빠르게 만들 수 있습니다.

가장 인기 있는 CDN 중 일부는 Cloudflare, MaxCDN, KeyCDN 및 StackPath 입니다. 이러한 CDN을 사용하면 이미지 파일을 WebP 형식으로 변환할 수 있습니다. 또한 호환되는 브라우저에서 검색하는 사용자에게 해당 파일을 제공합니다.

이미지 최적화 플러그인

JPG/PNG로 이미지를 업로드하고 이미지 최적화 플러그인을 사용하여 WebP로 변환하는 것이 좋습니다. 다음은 이미지 파일을 WebP 형식으로 변환하는 권장 플러그인 목록입니다.

옵티몰

도움을 받아 사이트의 이미지를 Optimole에서 최적화한 이미지 URL로 바꿀 수 있습니다. WebP 변환 외에도 사용자의 화면에 따라 자동으로 이미지 크기를 조정합니다.

Optimole의 무료 계획에는 5000명의 방문자의 월별 할당량이 포함됩니다. 그러나 충분하지 않은 경우 프리미엄 플랜을 구입하여 해당 한도를 25000으로 업그레이드할 수 있습니다.

플러그인을 설치하고 활성화한 후 플러그인 설정에 지시된 대로 API 키를 생성해야 합니다. 플러그인이 연결되면 이미지를 최적화하고 CDN에서 지원되는 모든 브라우저에 이미지의 WebP 버전을 제공하기 시작합니다.

상상하다

Imagify에서 계정을 생성하면 활성화 후 플러그인에 입력해야 하는 API 키 를 받게 됩니다. 한 달에 200개 미만의 이미지를 업로드하는 경우 Imagify가 적합한 솔루션입니다. 무료 플랜에는 월 20MB 또는 200개의 이미지가 포함됩니다. 충분하지 않은 경우 사용 가능한 프리미엄 플랜을 선택할 수 있습니다.

설정을 보면 WebP 버전의 이미지를 생성하여 사이트에 표시할 수 있습니다. 이미지를 표시하는 동안 다시 쓰기 규칙보다 설정에서 그림 태그를 사용할 수 있습니다.

Imagify 플러그인을 사용하는 경우 WP Rocket 플러그인의 미디어 설정으로 웹사이트 속도를 향상시킬 수도 있습니다. WP Rocket과 Imagify는 WP Media에서 만들었기 때문에 플러그인도 호환됩니다.

WP Rocket 설정의 WebP 호환성에서 이러한 이미지가 WP Rocket 캐싱에서 제공되도록 하려면 WebP 캐싱 을 활성화할 수 있습니다.

공식 WordPress 저장소를 보면 다른 여러 이미지 최적화 플러그인을 얻을 수 있습니다. 그러나 웹 이미지에 대한 솔루션이 필요한 경우 이 게시물에서 언급한 이 두 가지 플러그인 중 하나를 사용하는 것이 좋습니다.

수동으로

CDN, 플러그인 또는 둘 모두를 사용하여 WebP 이미지를 사용할 수 있습니다. 수동 방법이 마음에 들면 아래 설명을 참조하십시오.

먼저 업로드하기 전에 이미지를 WebP 형식으로 변환해야 합니다. Google에서 찾을 수 있는 다양한 온라인 변환기가 있습니다.

Adobe Photoshop 플러그인은 이미지 파일을 WebP 형식으로 저장할 수 있는 권한을 부여합니다. 이미지를 WebP 형식으로 변환한 후 이제 이를 통해 업로드할 수 있습니다. 당신의 대시보드.

업로드하기 전에 테마 편집기를 약간 변경해야 합니다. 활성 테마의 functions.php 파일에서 아래 코드를 추가하세요.

 //** *webp 이미지 업로드를 활성화합니다.*/
기능 enable_webp_mimes($existing_mimes) {
$existing_mimes['webp'] = '이미지/webp';
$existing_mimes를 반환합니다.
}
add_filter('mime_types', 'enable_webp_mimes');

이 코드를 추가한 후 미디어>새로 추가로 이동하여 WebP 파일을 추가합니다.

마무리

이제 WordPress에서 WebP 이미지를 사용하는 방법을 알 수 있을 것입니다. 게시물에 나열된 방법 중 하나를 시도할 수 있습니다. 게시물과 관련하여 제안이나 혼란이 있는 경우 [email protected] 으로 저에게 연락하십시오.

관련 게시물

1. WordPress에서 IP 주소를 차단하는 방법
2. WordPress에서 댓글을 끄는 방법
3. WordPress에서 홈페이지를 사용자 정의하는 방법