워드프레스 WEBP 이미지 변환 및 압축 플러그인 - Imagify

워드프레스 WEBP 이미지 변환 및 압축 플러그인 - Imagify

구글크롬등에서 이미지를 저장하게 되면 WEBP 확장자의 이미지를 볼 수 있습니다. 이는 2010년에 구그렝서 공개한 이미지 포맷형식으로서 기존에 이미지 포맷으로 널리 사용되는 JPEG 이미지를 대체하기 위한 규격으로서 웹사이트의 트래픽 감소와 로딩속도를 단축하기 때문에 무거운 워드프레스의 속도를 빠르게 접속할 수 있도록 개선합니다.

 

그렇기 때문에 워드프레스 속도가 느려 고민하는분들이라면 데이터베이스의 Gzip 압축과 함께 CSS, 자바스크립트, 제이쿼리등의 작업 뿐만 아니라 이미지 포맷을 압축하고 WEBP 변환하는것이 좋습니다.

 

워드프레스 WEBP 변환 이미지 압축 Imagify

그리고 워드프레스 무료플러그인으로 Imagify 사용하면 한달에 50MB의 이미지 압축과 함께 WEBP 변환이 가능하며 해당 플러그인을 사용하면 WP-Rocket 플러그인을 할인해주며 함께 조합해서 사용하면 워드프레스 속도를 개선할 수 있습니다.

워드프레스 WP ROCKET 플러그인 CSS 압축 Gzip 최적화

하지만 WP ROCKET 플러그인은 유료 플러그인으로 확실히 쉽고 빠르게 홈페이지 속도를 개선하지만 무료플러그인을 찾고 있는 분들이라면 허밍버드와 클라우드플레어를 사용하면 무료로 워드프레스 속도를 개선할 수 있습니다.

워드프레스 CloudFlare "클라우드플레어"CDN HTTS GZIP 압축 로딩 속도개선

 

워드프레스 CSS Gzip 압축 최적화 플러그인 Hummingbird

Webp 확장자란?

WEBP 확장자	특징
파일 형식	WEBP는 이미지 파일 형식으로 개발되었으며, 비손실 및 손실 압축 방식을 지원합니다.
개발자 및 출처	Google에서 개발한 WEBP 형식은 JPEG, PNG, GIF에 대한 대안으로 제시되었습니다.
압축 방식	WEBP는 VP8 또는 VP9 비디오 코덱을 사용하여 이미지를 압축합니다. VP8은 비손실 및 손실 압축을 지원하며, VP9은 주로 손실 압축에 사용됩니다.
투명도 및 애니메이션 지원	WEBP 형식은 투명도를 지원하며, 애니메이션 GIF 대체로 사용될 수 있습니다.
파일 크기 및 품질 조절	WEBP는 이미지의 파일 크기를 상당히 줄일 수 있어 웹 페이지의 로딩 속도를 향상시킬 수 있습니다. 품질 설정을 조절하여 이미지의 압축률과 품질을 조절할 수 있습니다.
브라우저 및 플랫폼 호환성	WEBP 이미지는 주로 Google Chrome 및 다른 일부 브라우저에서 지원됩니다. 다양한 플랫폼에서도 호환성이 점차 향상되고 있으나 모든 브라우저와 플랫폼에서 지원되지는 않을 수 있습니다.
애니메이션 및 스틸 이미지 사용	WEBP는 애니메이션 이미지와 스틸 이미지 모두를 지원하며, GIF나 APNG와 같은 다른 형식의 대안으로 사용될 수 있습니다.
손실 및 비손실 압축의 유연성	WEBP는 손실 압축과 비손실 압축 모두를 지원하며, 압축 레벨을 조절하여 원하는 이미지 품질을 달성할 수 있습니다.
웹 및 온라인 미디어에 적합	WEBP 형식은 웹 및 온라인 미디어에 적합한 이미지 파일 형식으로서, 빠른 로딩과 고품질 이미지를 동시에 제공하기 위해 개발되었습니다.
변환 및 호환성 유지	기존의 JPEG, PNG, GIF 이미지를 WEBP로 변환하여 사용할 수 있습니다. 또한 브라우저나 플랫폼이 WEBP를 지원하지 않을 경우를 대비해 기존 이미지 포맷과 함께 사용할 수 있도록 호환성을 유지할 수 있습니다.

WEBP(웹피)는 Google에서 개발한 이미지 파일 형식으로, 웹 페이지 및 온라인 미디어에서 사용되는 이미지를 효율적으로 압축하고 품질을 유지하는 목적으로 만들어진 형식입니다. WEBP 형식은 기존의 JPEG, PNG, GIF 형식에 비해 더 작은 파일 크기와 빠른 로딩 속도를 제공하면서도 고품질 이미지를 보여줄 수 있는 특징을 가지고 있습니다. WEBP 이미지는 주로 웹 페이지의 로딩 속도를 개선하고 데이터 사용량을 줄이기 위해 사용되며, 특히 모바일 기기에서의 웹 브라우징 환경에서 효과적입니다.

WEBP 형식은 손실 압축과 비손실 압축 두 가지 방식을 지원하며, 이미지 품질과 압축률을 조절할 수 있습니다. 또한 WEBP 형식은 투명도와 애니메이션도 지원하므로 GIF 및 APNG와 같은 다른 이미지 형식을 대체할 수 있는 다목적 이미지 형식으로 활용될 수 있습니다. WEBP 형식은 주로 Google Chrome 브라우저를 포함한 일부 브라우저와 플랫폼에서 지원되며, 지속적으로 다양한 환경에서의 호환성이 개선되고 있습니다.

워드프레스 이미지 압축 - Imagify

imagify Optimze Image & Convert Webp

워드프레스 플러그인 "Imagify Optimze Image & Convert Webp"설치 합니다.

빠른 사이트는 검색 엔진이 웹사이트 속도를 순위 요소로 고려하기 때문에 너무 느린 웹사이트를 떠날 수 있는 방문자에게 주로 중요하지만 SEO 성능에도 중요합니다.

웹사이트 크기는 웹사이트 성능에 영향을 미치는 가장 중요한 요소 중 하나입니다. 이미지는 로딩 시간의 50%를 차지할 수 있습니다.

이미지를 최적화하면 소중한 시간을 빠르게 확보하고 웹사이트를 더 빠르게 만들 수 있습니다.

플러그인을 설치하면 상단에 imagify 탭이 추가됩니다.

자동으로 이미지 최적화 진행 및 EXIF 사진정보 저장

• 일반, 무손실 이미지 압축 알고리즘입니다. 이미지 품질은 전혀 변경되지 않습니다.
• 공격적이며 손실이 많은 이미지 압축 알고리즘입니다. 약간의 품질 손실과 함께 더 강력한 압축은 대부분의 경우 전혀 눈에 띄지 않습니다.
• Ultra는 손실 알고리즘을 사용하는 가장 강력한 이미지 압축 방식입니다.

이미지 크기변경 - 리사이즈 및 테마 최적화

WEBP 이미지 압축변환

Imagify 플러그인으로 최적화한 각 이미지에 대해 WebP 버전 도 얻게 됩니다 (설정에서 옵션을 선택하는 경우). 미디어 라이브러리에 다음과 같은 이미지 버전이 생성됩니다.

• 전체 크기의 최적화된 이미지,
• 전체 크기의 WebP 이미지,
• 최적화된 축소판
• WebP 축소판.

최적화는 테마에 포함된 이미지, 플러그인 및 "사용자 지정 폴더" 설정을 통해 미디어 라이브러리 폴더 외부에 있는 이미지에도 적용됩니다.

원하는 경우 Imagify는 아직 WebP 이미지를 표시할 수 없는 브라우저에 대한 대체 지원을 제공하는 두 가지 방법을 사용하여 프론트엔드에 WebP 이미지를 표시할 수도 있습니다.

– <picture>태그
– .htaccess 파일(Apache) 또는 nginx에서 규칙 재작성 .conf(NGINX – 수동으로 추가해야 함)

원본 이미지의 백업 복사본을 보관하는 경우 WebP 버전을 별도로 만들 수 있습니다 (하나씩 또는 대량 최적화 기능을 통해).

 

매달 20MB의 무료 이미지(약 200개 이미지)에 대해 최적화할 수 있습니다. 차세대 WebP 형식으로 무료로 변환할 수도 있습니다.

모든 설정이 완료되었다면 SAVE & GO TO BULK OPTIMZER 선택합니다.

이후 압축되지 않은 이미지 갯수를 확인하고 이미지 압축을 진행합니다.

그럼 기존 워드프레스 이미지를 압축하고 구글 페이지 속도측정을 통해 접속속도가 개선된것을 확인할 수 있습니다.

워드프레스 홈페이지 로딩 속도 측정 최적화