SEO 및 로딩 속도 개선을 위해 이미지 최적화를 해야 한다는데, 어떻게 해야 하는지 몰라 혼란스럽던 와중에 워드프레스 이미지 최적화 플러그인 Converter for Media를 사용해보게 되었습니다. 간단한 설치 및 설정을 통해, 이미지 최적화에 대한 부담을 벗을 수 있어 아주 좋았습니다.
이미지 최적화 플러그인 Converter for Media 설치 및 설정
관리자 대시보드 [플러그인 Plugins] – [새 플러그인 추가 Add New Plugin]에서 ‘converter for media’를 검색한 후, ‘지금 설치 Install Now’ 클릭하여 설치하고 ‘활성화 Activate’ 합니다.
관리자 대시보드 [Settings 설정]에 ‘Converter for Media’가 추가되었습니다. 클릭하면 ‘General Settings’ 탭에 일반 설정 항목들이 나옵니다.
- 최적화 전략 Conversion strategy: Lossy(손실)부터 Optimal(최적), 그리고 Lossless(무손실)까지 총 5레벨로 최적화 전략을 설정할 수 있으며 Optimal(최적) 레벨이 대부분의 웹사이트에 적합한 선택이라는 도움말이 보입니다.
- 지원되는 출력 형식 Supported output formats: 지원되는 이미지 최적화용 출력 형식으로 AVIF와 WebP 두 가지 옵션이 나와 있으나, AVIF는 유료 버전인 PRO에서만 지원되므로 유일한 선택은 WebP입니다.
- 지원되는 디렉토리 Supported directories: 지원되는 디렉토리들 중 디렉토리 단위로 이미지를 최적화 할 디렉토리를 지정할 수 있습니다. 미디어 라이브러리에 업로드하는 미디어 파일이 저장되는 /uploads 디렉토리가 기본으로 선택되어 있습니다.
- 새 이미지 변환 Conversion of new images: 미디어 라이브러리에 이미지가 업로드될 때마다 자동으로 최적화해주는 기능입니다. 활성화하는 것을 추천합니다.
‘Save Changes’ 버튼을 눌러 변경 사항을 저장합니다.
하단으로 내려가면, 변환되지 않은 이미지들, 주로 플러그인 설치 이전에 업로드된 기존 이미지 파일들을 한꺼번에 대량 변환할 수 있는 옵션이 나옵니다. 전체 이미지들 중 WebP와 AVIF로 최적화된 이미지들이 각각 퍼센테이지로 표시되는데, 이전에 이미지 최적화 작업을 한 적이 있거나 다른 최적화 플러그인을 사용했던 경우가 아니라면 플러그인 설치 직후에는 0%가 나오는 것이 보통입니다. 최적화되지 않은 이미지들을 대상으로 대량 최적화가 적용되는 것이 기본이지만, ‘모든 이미지들을 다시 강제로 최적화하기’ 옵션을 활성화 하면 이미 최적화된 이미지들까지 모두 최적화 작업에 포함하게 됩니다. ‘Start Bulk Optimization’ 버튼을 클릭하면 대략 최적화 프로세스가 시작됩니다. 대량 변환시에도 AVIF로의 변환은 유료 PRO 버전에서만 지원되므로, WebP로의 변환만 진행됩니다.
위와 같이 최적화 진행 상태가 원형 그래프와 퍼센테이지, 그리고 남은 이미지 갯수로 표시되며, 하단에는 역시 진행 상태가 막대 그래프로 표시되며, 최적화를 통해 감량한 이미지 용량과 그 퍼센테이지, 그리고 현재까지 최적화가 성공적으로 완료된 파일수와 실패한 파일수가 실시간으로 보여집니다. 최적화에 실패한 파일이 있을 경우 하단에 실패 이유에 대한 로그가 함께 나옵니다. 최적화 대상 이미지 갯수에 따라 수 분이 소요될 수 있으며, 최적화 진행중에는 브라우저를 닫지 않도록 합니다.
기존 이미지들에 대한 일괄 변환이 완료되었습니다. 이제부터 새로 업로드되는 이미지들은 업로드 시점에 자동으로 최적화가 이루어질 것입니다.
이미지 파일 형식 WebP와 AVIF
WebP 및 AVIF는 JPEG 및 PNG와 같은 기존 형식에 비해 더 나은 압축 및 품질을 제공하도록 설계된 최신 이미지 파일 형식입니다.
WebP
- WebP는 주로 웹에서 사용하기 위해 Google에서 개발한 이미지 포맷입니다.
- 이미지에 대해 손실 및 무손실 압축을 모두 제공합니다.
- 손실이 있는 WebP 이미지는 일반적으로 유사한 이미지 품질을 유지하면서도 동일한 퀄리티의 JPEG 이미지에 비해 크기가 더 작습니다.
- 무손실 WebP 이미지는 품질 저하가 거의 없으면서도 크기는 동일한 퀄리티의 PNG 파일보다 작습니다.
- WebP는 투명도(알파 채널), 애니메이션, 메타데이터와 등의 기능을 지원합니다.
- 대부분의 최신 웹 브라우저에서 무리없이 지원되지만, 오래된 브라우저에서는 추가 플러그인 혹은 별도의 업데이트가 필요할 수 있습니다.
AVIF
- AVIF는 AOMedia(Alliance for Open Media)에서 개발한 AV1 비디오 코덱 기반 이미지 포맷입니다.
- 다른 이미지 형식에 비해 압축 효율성이 대폭 향상되었습니다.
- AVIF는 WebP처럼 손실 및 무손실 압축을 모두 지원합니다.
- JPEG, PNG, 심지어 WebP 보다도 더 작은 파일 크기로 더 나은 퀄리티의 이미지를 제공합니다.
- AVIF는 투명도, HDR(High Dynamic Range) 및 WCG(광색역) 등의 기능을 지원합니다.
- 상대적으로 새로운 형식인만큼, 마지막 업데이트부터 Google Chrome, Mozilla Firefox, Microsoft Edge와 같은 주요 브라우저에서 AVIF에 대한 지원을 추가하기 시작했지만 모든 플랫폼과 장치에서 보편적으로 지원되기까지는 다소 시간이 걸릴 수 있습니다.
WebP와 AVIF 모두 웹에서 보다 효율적인 이미지 형식에 대한 요구를 해결하여 대역폭 사용량을 줄이고 로딩 시간을 개선하는 동시에, 이미지 퀄리티의 손실을 방지하거나 퀄리티 향상을 목표로 하는 최신 이미지 포맷입니다.
