사진은 웹사이트의 “액면가 보유자'이지만 제대로 처리하지 않으면 웹사이트 속도를 저하시키는 ”책임'이 되고 SEO를 개선할 기회도 놓치게 됩니다. 이미지 최적화의 핵심은 “시각적 효과에 영향을 주지 않으면서 볼륨을 줄이고”, “검색 엔진이 사진의 내용을 이해할 수 있도록 하는 것”이며압축 크기그리고대체 태그 추가는 가장 기본적이고 효과적인 두 가지 방법입니다.
첫째, 이미지를 최적화하는 이유는 무엇인가요?
이 단계를 더 진지하게 진행하기 전에 먼저 최적화의 중요성을 이해하는 것이 중요합니다:
- 로딩 속도 향상최적화되지 않은 큰 이미지는 페이지를 로드하는 데 시간이 오래 걸리고 방문자가 페이지가 완료될 때까지 기다리지 않고 떠날 수 있습니다(연구에 따르면 53% 방문자는 로드하는 데 3초 이상 걸리는 페이지를 이탈한다고 합니다).
- 서버 공간 절약압축 이미지 크기가 작아져 서버 저장 공간과 트래픽 소비를 줄일 수 있습니다(트래픽에 따라 과금하는 서버의 경우 특히 중요).
- SEO 순위 도움말검색 엔진(예: 바이두, 구글)은 이미지를 직접 “읽지 못하고” 텍스트 정보(예: 대체 태그)를 통해서만 콘텐츠를 이해할 수 있으며, 이미지를 최적화하면 검색 결과에 더 많이 노출될 수 있습니다.
- 모바일 장치에 대한 적응휴대폰 사용자는 트래픽이 제한적이며, 작은 크기의 이미지는 로딩 소비를 줄이고 모바일 환경을 개선할 수 있습니다.
둘째, 사진 압축: 화질 손실 없이 용량을 줄입니다.
이미지 압축의 원리는 이미지에서 중복된 픽셀 정보(예: 육안으로 구분할 수 없는 색상 차이)를 제거하여 시각적 효과는 유지하면서 파일 크기를 줄이는 것입니다. 초보자에게 추천플러그인 자동 압축수동 조작이 필요하지 않습니다.
방법 1: 플러그인을 사용한 자동 압축(초보자에게 권장)
권장 플러그인: 스머시 또는 쇼트픽셀(무료 버전이면 충분)
이에 따라… Smush 예를 들어 단계는 다음과 같습니다:
- 플러그인 설치: 백그라운드 [플러그인] → [플러그인 설치] → “Smush” 검색 → [설치] → [활성화]를 클릭합니다.
- 기본 설정:
- 활성화 후 플러그인 설정 페이지로 이동하여 “새로 업로드한 이미지 자동 압축”을 선택합니다(새로 업로드한 이미지는 자동으로 압축되므로 수동으로 압축할 필요가 없습니다).
- “일괄 압축'을 클릭하고 ”모든 이미지 압축'을 선택합니다(미디어 라이브러리에 업로드한 이전 이미지의 경우).
- 압축 완료 대기 중: 플러그인에 압축 진행률과 절약된 공간이 표시됩니다(예: “50개의 이미지가 압축되어 20MB의 공간이 절약되었습니다”).
최첨단완전 자동 처리, 일괄 압축 지원, 중소규모 웹사이트의 요구를 충족하는 무료 버전(Smush 무료 버전은 단일 이미지 최대 5MB, ShortPixel 무료 버전은 월 최대 100개의 이미지를 압축할 수 있음).
방법 2: 업로드 전 수동 압축(극단적인 최적화를 위해)
이미지의 크기가 특히 큰 경우(예: 카메라로 촬영한 원본 사진이 10MB를 쉽게 초과할 수 있음) 웹사이트에 업로드하기 전에 컴퓨터에서 수동으로 압축하는 것이 좋습니다:
- 온라인 도구(소프트웨어 설치가 필요하지 않습니다):
- TinyPNG (tinypng.com): PNG 및 JPG를 지원하며, 압축률이 높고 이미지 품질 손실이 적으며 한 번에 20장의 사진을 업로드할 수 있습니다.
- 이미지 압축 도구, WebP 형식 지원(JPG 30%-50%보다 작은 크기).
- 절차：
- 도구 열기 → 이미지 업로드 → 압축이 완료될 때까지 기다리기 → 압축된 이미지 다운로드 → 워드프레스 미디어 라이브러리에 업로드합니다.
시나리오홈페이지 배너, 상품 상세 페이지 메인 이미지 등 중요 이미지 수동 압축을 사용하면 이미지 품질을 보다 정확하게 제어할 수 있습니다.
압축 노트:
- 기사에 첨부된 이미지와 같은 일반 이미지는 200KB 이내 홈페이지 큰 그림 컨트롤이 완료되었습니다. 1MB 이내。
- 우선순위 지정 WebP 형식(워드프레스 5.8 이상은 기본 지원), 동일한 이미지 품질에서 크기가 JPG보다 약 50% 작습니다.
- 과도한 압축 방지: 압축률이 80%를 초과하면 특히 텍스트가 많은 이미지(예: 스크린샷, 인포그래픽)의 경우 이미지가 흐릿해질 수 있습니다.
셋째, 대체 태그 추가: 검색 엔진이 사진을 “이해'할 수 있도록 합니다.
“alt 태그”(전체 이름 “alt 속성”)는 네트워크 문제로 인해 이미지가 로드되지 않을 때 표시되는 이미지의 “텍스트 설명'으로, 더 중요한 것은 검색 엔진은 이를 통해 사진의 내용을 이해하여 검색 결과에서 사진의 순위에 영향을 미칩니다.
대체 태그를 추가해야 하는 이유는 무엇인가요?
- 예 1: “빨간 운동화” 사진에 대체 태그가 없는 경우 검색 엔진은 이것이 사진이라는 것만 인식할 수 있으며, 대체 태그 “가볍고 통기성이 좋은 빨간 운동화'를 추가하면 검색 엔진은 ”빨간 운동화'와 관련된 검색어와 연관 검색어를 표시합니다. 빨간 운동화“ 관련 검색어.
- 예 2: 이미지 로드에 실패하면 방문자는 공백 또는 “이미지를 표시할 수 없음” 아이콘 대신 대체 태그 텍스트를 보고 이미지가 무엇이었어야 하는지 알 수 있습니다.
대체 태그는 어떻게 추가하나요?
방법 1: 이미지 업로드 시 직접 추가(권장)
- 미디어 라이브러리 또는 에디터를 통해 이미지를 업로드하고 이미지 설정 팝업창에서 대체 텍스트(즉, 대체 태그) 입력 상자를 찾습니다.
- 설명을 입력합니다:
- 간결하고 정확하며(10~15단어가 적당) 이미지의 핵심 내용(예: “회사 사무실 앞” “2023년형 노트북의 외관”)을 포함하세요.
- 키워드를 겹쳐서 입력하지 마세요(예: “워드프레스 웹사이트 빌더 웹사이트 디자인 회사”는 잘못된 설명입니다).
- 이미지가 장식적인 경우(예: 칸막이, 배경 무늬) 비워 두거나 “장식 이미지'를 입력합니다(검색 엔진의 오해를 피하기 위해).
- “글에 삽입'을 클릭하면 대체 태그가 자동으로 적용됩니다.
방법 2: 업로드한 이미지의 대체 태그 추가/수정하기
- 미디어] → [라이브러리]로 이동하여 수정할 사진을 찾은 후 사진을 클릭하여 수정 페이지로 들어갑니다.
- 오른쪽의 “대체 텍스트” 상자에 내용을 입력하거나 수정한 후 [업데이트]를 클릭합니다.
alt 태그와 제목, 캡션: 혼동하지 마세요!
많은 초보자가 이 세 가지 개념을 혼동하여 간단하게 구분합니다:
- alt 태그(대체 텍스트)검색 엔진 및 로드 실패로 인해 SEO에 영향을 미치는 경우 반드시 입력해야 합니다.
- 제목이미지 위로 마우스를 가져갔을 때 표시할 텍스트(선택 사항, “고해상도 이미지를 보려면 클릭” 등 추가 세부 정보에 적합).
- 설명(캡션)그림 아래에 표시되는 텍스트(그림 캡션과 유사, 예: “그림 1: 회사 연례 회의 장소”, 필요에 따라 입력).
IV. 신규 사용자를 위한 자주 묻는 질문
- 모든 이미지에 대체 태그를 지정해야 하나요?거의. 순수한 장식용 이미지(예: 단색 배경, 테두리) 외에 실제 콘텐츠가 포함된 다른 이미지(제품 이미지, 인물 이미지, 장면 이미지 등)는 SEO의 기본 요구 사항으로 추가해야 합니다.
- 압축 후 사진이 흐릿해지면 어떻게 해야 하나요?압축 강도를 낮추거나(압축률은 플러그인에서 조정할 수 있음) 수동 압축 도구(예: TinyPNG)로 다시 압축하여 더 높은 이미지 품질을 유지합니다.
- 이전 브라우저에서 WebP 형식 이미지가 표시되지 않나요?WebP는 최신 브라우저(크롬, 엣지, 파이어폭스, 사파리 14+)에서 지원되며, 구형 브라우저(예: IE)에서도 별다른 문제 없이 사용되어 왔습니다. 호환성을 위해 구형 브라우저에 자동으로 JPG 대체 파일을 제공하는 플러그인 “WebP Express'를 설치하세요.
- 이미지 최적화 후 사이트 속도에 변화가 없나요?다른 요인(예: 느린 서버, 너무 많은 플러그인)으로 인한 것일 수 있으므로 먼저 GTmetrix 도구를 사용하여 “이미지 크기'가 여전히 주요 문제인지 확인할 수 있습니다.
이미지 최적화는 “저비용 고수익” 작업으로, 플러그인을 설정하고 대체 태그를 추가하는 데 10분만 투자하면 사이트의 속도와 SEO 성능을 크게 향상시킬 수 있습니다. “업로드 및 최적화”를 습관화하면 방문자와 검색 엔진으로부터 더 많은 인기를 얻을 수 있습니다.
한국어