워드프레스 이미지 최적화 방법｜WebP·AVIF 변환과 지연 로딩 설정

워드프레스 속도가 느린 원인 중 하나는 용량이 큰 이미지입니다. 스마트폰으로 촬영한 사진을 그대로 올리면 이미지 한 장이 수 MB를 넘을 수 있으며, 여러 장이 들어간 페이지는 방문자가 내려받아야 할 데이터가 크게 증가합니다.

이미지 크기 조절과 압축, WebP·AVIF 변환, 지연 로딩을 함께 적용하면 화질 저하를 줄이면서 페이지를 가볍게 만들 수 있습니다.

30초 요약

• 업로드 전 이미지 가로 크기를 줄입니다.
• 사진은 JPEG·WebP·AVIF, 투명 이미지는 PNG·WebP가 적합합니다.
• 호환성과 관리 편의성은 WebP가 좋습니다.
• 용량을 더 줄이고 싶다면 AVIF를 검토합니다.
• 첫 화면의 대표 이미지는 지연 로딩에서 제외합니다.
• 적용 전 원본 이미지와 사이트를 백업합니다.

이미지 형식 차이

형식	주요 특징	추천 용도
JPEG	사진에 적합하고 호환성이 높음	일반 사진과 썸네일
PNG	투명 배경을 지원하지만 용량이 큼	로고, 아이콘, 캡처 화면
WebP	화질과 용량의 균형이 좋음	워드프레스 본문 이미지
AVIF	높은 압축 효율을 기대할 수 있음	사진이 많은 페이지
SVG	확대해도 선명한 벡터 형식	단순 아이콘과 도형

이미지를 WebP나 AVIF로 변환하더라도 원본 크기가 지나치게 크면 효과가 제한적입니다. 본문에서 800픽셀로 표시할 사진을 4,000픽셀로 올리면 브라우저가 불필요하게 큰 파일을 내려받을 수 있습니다.

이미지 최적화 순서

먼저 사이트 전체를 백업합니다. 이미지 최적화 플러그인에서 일괄 변환을 실행하면 미디어 라이브러리의 여러 파일이 한꺼번에 변경될 수 있기 때문입니다.

그다음 실제 표시 크기에 맞춰 이미지 크기를 조절합니다. 일반적인 본문 이미지는 테마의 콘텐츠 폭을 확인해 가로 1,200~1,600픽셀 정도로 준비하면 관리하기 편합니다.

크기를 조절한 후 압축을 적용합니다. 손실 압축은 용량을 크게 줄일 수 있지만 글자가 포함된 캡처 화면은 흐릿해질 수 있으므로 압축 전후를 비교해야 합니다.

마지막으로 WebP 또는 AVIF 변환을 적용하고 PageSpeed Insights에서 모바일 환경을 다시 측정합니다.

WebP와 AVIF 중 무엇이 좋을까?

간단하게 적용하려면 WebP가 무난합니다. 사진과 투명 이미지를 모두 처리할 수 있고 현재 사용되는 주요 브라우저에서 폭넓게 지원됩니다.

AVIF는 같은 조건에서 더 작은 파일을 만들 수 있지만 서버의 이미지 처리 기능과 플러그인 지원 여부를 확인해야 합니다. 모든 이미지를 한 번에 AVIF로 바꾸기보다 대표적인 사진 몇 장으로 화질과 용량을 먼저 비교하는 것이 안전합니다.

지연 로딩 설정 시 주의사항

지연 로딩은 화면 아래에 있는 이미지를 방문자가 해당 위치에 가까이 갔을 때 불러오는 방식입니다. 처음부터 모든 이미지를 내려받지 않기 때문에 초기 페이지 로딩을 줄이는 데 도움이 됩니다.

하지만 첫 화면에 표시되는 대표 이미지나 LCP 대상 이미지까지 지연 로딩하면 오히려 주요 콘텐츠가 늦게 나타날 수 있습니다. 상단 대표 이미지는 즉시 불러오고, 본문 중간과 하단 이미지만 지연 로딩하는 것이 좋습니다.

TIP

이미지 최적화 플러그인에서 원본 보관 옵션을 켜면 문제가 발생했을 때 복원하기 쉽습니다. 다만 원본과 변환본을 모두 저장하면 서버 저장 공간이 빠르게 증가할 수 있으므로 백업 완료 후 용량을 확인하세요.

자주 묻는 질문

기존 이미지도 WebP로 변환할 수 있나요?

일괄 최적화를 지원하는 플러그인을 이용하면 기존 미디어 라이브러리의 이미지도 변환할 수 있습니다. 실행 전 백업은 필수입니다.

모든 이미지를 AVIF로 바꾸는 것이 좋은가요?

반드시 그렇지는 않습니다. 화질, 서버 지원, 변환 시간과 브라우저 호환성을 비교한 후 선택하는 것이 좋습니다.

이미지 파일명도 SEO에 영향을 주나요?

의미를 알 수 있는 영문 파일명과 정확한 대체 텍스트를 사용하는 것이 이미지 관리와 검색엔진 이해에 도움이 됩니다.

마무리

워드프레스 이미지 최적화는 형식 변환만으로 끝나지 않습니다. 크기 조절, 압축, WebP·AVIF 변환과 지연 로딩을 함께 적용해야 효과를 확인할 수 있습니다.

먼저 용량이 큰 대표 이미지부터 최적화한 후 PageSpeed Insights로 적용 전후를 비교해 보세요. 자세한 플러그인 기능은 WordPress 이미지 최적화 플러그인 안내에서 확인할 수 있습니다.