이미지는 웹사이트 콘텐츠의 중요한 부분이지만 속도를 저하시키는 '최고의 킬러'이기도 합니다. 최적화되지 않은 고해상도 이미지(예: 5MB)는 페이지 로딩 시간을 3~5초까지 증가시켜 사용자의 인내심을 잃게 만들 수 있습니다. 좋은 점은 이미지 최적화가 간단하다는 것입니다. '압축 크기'와 '지연 로딩'이라는 두 가지 핵심 수단을 통해 50% 이상 이미지의 로딩 시간을 줄일 수 있습니다. 이 섹션에서는 플러그인을 사용하여 초보자도 기술 지식 없이도 처리할 수 있는 완전 자동 최적화를 달성할 것입니다.
사진을 최적화해야 하는 이유 3가지 확실한 데이터
- 일반적으로 웹사이트의 총 로딩량 중 이미지가 차지하는 비중은 60%-80%로, 텍스트나 코드 등 다른 콘텐츠보다 훨씬 높습니다.
- 로딩 시간이 1초 증가할 때마다 사용자 이탈률은 20%씩 증가합니다(특히 모바일 사용자는 속도에 더 민감합니다).
- 최적화되지 않은 이미지는 Google 페이지스피드 점수를 직접적으로 떨어뜨릴 수 있습니다(SEO 순위에 영향을 미침).
핵심 목표이미지 품질에 눈에 띄는 손실 없이 이미지 크기를 50%-80%로 압축하고 첫 화면이 아닌 이미지를 '필요에 따라 로드'할 수 있습니다.
II. 방법 1: 이미지 압축(플러그인을 사용한 자동 볼륨 감소)
이미지 압축의 원칙은 육안으로 보기에 이미지 품질은 기본적으로 그대로 유지하면서 중복 데이터(예: 촬영 장치 정보, 표시되지 않은 픽셀 세부 정보)를 제거하는 것입니다. 완전 자동 압축을 위해서는 기존 이미지의 일괄 처리와 새로 업로드한 이미지의 자동 압축을 지원하는 "Smush" 플러그인을 사용하는 것이 좋습니다.
1단계: 스머시 플러그인 설치 및 활성화하기
- 워드프레스 백엔드에 로그인하고 "플러그인 → 플러그인 설치"로 이동합니다.
- "Smush"를 검색하고 "개발사: WPMU DEV"라고 표시된 플러그인을 찾은 다음 "설치" → "활성화"를 클릭합니다.
2단계: 자동 압축 구성(새 이미지의 경우 수동 처리 필요 없음)
활성화 후 플러그인은 자동으로 설정 페이지로 이동하여 다음과 같이 구성합니다:
- 자동 압축 사용'설정' 탭에서 '새로 업로드한 이미지 자동 압축'이 선택되어 있는지 확인합니다(기본적으로 선택되어 있음). 그러면 향후 업로드할 때 수동으로 압축할 필요 없이 자동으로 압축됩니다.
- 압축 모드 선택：
- 초보자에게는 '무손실 압축'(기본 옵션)을 권장합니다. 중복 데이터만 제거되고 화질 손실이 없으며 압축률은 약 30%-50%입니다.
- 더 높은 압축률을 원하는 경우(예: 이미지 크기가 여전히 너무 큰 경우) '손실 압축'을 선택하면 최대 60%-80%의 압축률로 이미지 품질이 약간 손실(육안으로는 거의 눈에 띄지 않음)됩니다('고급 설정'을 클릭해 켜야 함).
- 설정 저장페이지 하단의 '설정 저장'을 클릭합니다.
3단계: 기존 이미지 일괄 압축(한 번의 작업으로 네트워크 전체 최적화)
웹사이트에 이미 압축되지 않은 이미지(예: 이전에 업로드한 글 이미지)가 많은 경우 '일괄 압축' 기능을 사용하여 한 번의 클릭으로 최적화할 수 있습니다:
- 스머시 플러그인 페이지에서 왼쪽의 '배치 스머시' 탭을 클릭합니다.
- "지금 시작"을 클릭하면 플러그인이 미디어 라이브러리에 있는 모든 이미지를 자동으로 스캔합니다.
- 스캔 후 'XX 이미지에 스머시 적용'을 클릭하면 시스템이 일괄 압축합니다(이 과정은 몇 분 정도 걸릴 수 있으며 기다릴 필요 없이 백그라운드에서 실행할 수 있습니다).
- 압축 결과 보기압축이 완료되면 "총 저장 공간"(예: "12MB 저장됨")이 표시되고 압축 전후의 각 이미지의 용량 비교가 나열됩니다.
방법 2: 지연 로딩(이미지 '주문형 로드' 허용)
지연로드의 원리는 다음과 같습니다:이미지 로드는 사용자가 이미지 위치로 스크롤할 때만 시작됩니다.이렇게 하면 첫 화면(페이지를 열었을 때 가장 먼저 표시되는 영역)이 먼저 로드됩니다. 이렇게 하면 첫 화면(페이지를 열었을 때 가장 먼저 표시되는 영역) 이미지가 먼저 로드되고 첫 화면이 아닌 이미지(예: 다음 글 이미지 및 푸터 이미지)는 당분간 로드되지 않으므로 초기 로드 시간이 크게 단축됩니다.
Smush 플러그인을 사용하여 클릭 한 번으로 지연 로딩을 활성화합니다(추가 플러그인 필요 없음).
Smush에는 지연 로딩 기능이 내장되어 있어 별도의 플러그인을 설치하거나 설정 단계를 거칠 필요가 없습니다:
- Smush 플러그인 페이지에서 왼쪽의 '지연된 로딩' 탭을 클릭합니다.
- '지연 로드 활성화'를 선택하고 아래 권장 사항에 따라 구성합니다:
- '로딩 지연 이미지 유형': 모두 선택(이미지, 아바타, 썸네일 등)합니다.
- '첫 화면 이미지 제외': 사용자가 페이지를 열었을 때 핵심 콘텐츠를 빠르게 볼 수 있도록 첫 화면 이미지가 지연되지 않도록 하는 것을 선택하는 것이 좋습니다.
- "애니메이션 로드": 기본값으로 둡니다(이미지가 로드 중임을 사용자에게 알리기 위해 약간의 애니메이션을 표시합니다).
- '설정 저장'을 클릭하면 지연 로딩이 즉시 적용됩니다.
지연 로딩이 적용되었는지 확인합니다.
- 웹사이트의 문서 페이지(여러 이미지가 포함된)를 열고 F12를 눌러 브라우저 '개발자 도구'를 엽니다.
- '웹' 탭을 클릭하여 페이지를 새로고침하고 이미지가 로드되는 것을 확인합니다:
- 처음 로드할 때는 '네트워크' 목록에 첫 번째 화면 이미지만 표시됩니다.
- 페이지를 아래로 스크롤하면 첫 화면이 아닌 이미지가 표시될 때만 이러한 이미지의 로딩 기록이 '네트워크' 목록에 표시되어 지연 로딩이 적용되고 있음을 알 수 있습니다.
초보자들이 알아야 할 사진 최적화를 위한 추가 기술
1. 올바른 이미지 형식 선택(압축보다 더 기본)
이미지를 업로드하기 전에 올바른 형식을 선택하면 소스에서 크기를 줄일 수 있습니다:
- 사진/복잡한 이미지WebP 형식(JPG보다 작고 이미지 품질이 더 좋은 30%-50%)의 경우, Smush 플러그인은 JPG/PNG를 WebP로 자동 변환할 수 있습니다("고급 설정"에서 "WebP로 자동 변환"을 켜세요).
- 간단한 그래픽 / 아이콘PNG 형식 사용(투명 배경, 작은 크기 지원), JPG는 피하세요.
- BMP, TIFF 형식 사용 금지: 이러한 형식은 크기가 커서 웹용으로 적합하지 않습니다.
2. 이미지 크기 조절('큰 이미지 축소 표시' 사용 안 함)
많은 초보자가 카메라로 직접 찍은 고해상도 이미지(예: 3000×2000픽셀)를 업로드하고 워드프레스를 통해 300×200픽셀로 표시되도록 설정하는데, 이는 잘못된 방법입니다! 브라우저는 여전히 원본의 큰 이미지를 로드하여 대역폭과 시간을 낭비하기 때문입니다.
올바른 접근 방식：
- 업로드하기 전에 이미지 도구(예: '페인트' 또는 '캔버스')를 사용하여 이미지 크기를 실제 표시 크기에 맞게 자릅니다(예: 첫 번째 배너의 경우 너비 1200픽셀).
- 이미지 도구 사용법을 모르는 경우 플러그인 'Imsanity'를 설치하면 업로드한 대용량 이미지를 지정된 크기(예: 최대 너비 1200픽셀)로 자동 압축할 수 있습니다.
3. 이미지 오용 방지(많을수록 좋지 않음)
- 말로 설명할 수 있는 내용(예: 간단한 단계별 지침)은 사진을 사용하지 마세요.
- 여러 개의 연속 이미지를 회전하는 이미지(예: 제품 디스플레이)로 병합하여 동시에 로드되는 이미지 수를 줄일 수 있습니다.
V. 일반적인 문제 해결
1. 압축 후 이미지 품질이 현저히 나빠졌나요?
- '손실 압축'을 사용하는 경우, 스머시 설정에서 압축 강도를 낮출 수 있습니다('고급 설정' → '압축 강도'를 50%로 설정).
- 크기와 이미지 품질의 균형을 맞추려면 '무손실 압축' + 'WebP 형식'을 사용하는 것이 좋습니다.
2. 로딩이 지연되어 이미지가 비정상적으로 표시되나요(예: 공백, 정렬 불량)?
- 첫 화면 이미지가 제외되었는지 확인합니다(제외하지 않으면 첫 화면 이미지 로딩이 지연되고 잠시 공백이 생길 수 있습니다).
- 일부 이미지를 즉시 로드해야 하는 경우 Smush "지연 로드" 설정의 "제외" 상자에 이미지의 CSS 클래스 이름을 입력할 수 있습니다(간단한 코드 지식이 필요하며 초보자는 이미지가 있는 페이지에서 일시적으로 지연 로드를 비활성화할 수 있습니다).
3. 최적화 후 속도가 크게 증가하지 않았나요?
- GTmetrix로 다시 테스트( 웹사이트 속도 확인 도구)에서 '폭포수 차트'를 확인하여 이미지 로딩 시간이 단축되었는지 확인하세요.
- 여전히 느린 경우 다른 요인(예: 느린 서버 응답, 너무 많은 플러그인)이 원인일 수 있으므로 후속 최적화 방법(예: 캐싱 활성화)과 함께 사용해야 합니다.
짧은
이미지 최적화는 사이트 속도 최적화에서 ROI가 가장 높은 작업으로, Smush 플러그인을 사용하면 설정하는 데 10분이 걸리며 이미지 로딩 시간을 50% 이상 단축할 수 있습니다. 핵심 단계는 Smush 설치 → 자동 압축 및 일괄 압축 활성화 → 지연 로딩 활성화(첫 화면 이미지 제외) 순서로 진행됩니다.
이미지 최적화의 원칙은 '적당히'라는 점을 기억하세요. 최고의 압축률을 추구하거나 초고화질 이미지를 업로드할 필요는 없으며, 사용자가 콘텐츠를 보고 동시에 빠르게 로드할 수 있도록 이미지 품질과 속도 사이의 균형을 찾는 것이 가장 좋습니다.
한국어