가이드/콘텐츠 생성/미디어/이미지 최적화

이미지 최적화

웹사이트 방문자에게 최상의 환경을 제공하려면 웹사이트의 이미지가 빠르게 로드되는 것이 중요합니다. 이 가이드에서는 이미지의 품질을 유지하면서 파일 크기를 줄여 이미지를 최적화하는 방법을 설명합니다.

워드프레스 웹사이트에는 테마, 레이아웃 및 권장 이미지 크기를 결정하는 기타 요인이 다수 있을 수 있습니다. 따라서 여기에서 권장할 수 있는 일률적인 접근 방법은 없습니다. 일반적으로는 이미지 크기를 필요한 만큼만 크게 설정하면 됩니다.

최신 디지털 카메라와 스마트폰은 큰 파일 크기로 고품질 이미지를 캡처합니다. 이러한 이미지를 웹사이트에 표시할 경우 보는 사람에게는 품질을 유지하면서 파일 크기를 50% 이상 줄일 수 있습니다.

다음과 같은 단계를 사용하여 미디어 라이브러리의 이미지 편집 패널에서 파일 크기와 치수를 확인할 수 있습니다.

  1. 사이트 알림판의 미디어 라이브러리을 방문합니다.
  2. 파일 크기와 치수를 확인하려는 이미지 썸네일을 클릭합니다.
  3. 썸네일 주위의 경계선과 오른쪽 하단의 번호가 표시됩니다.
  4. 편집 버튼을 클릭합니다.
  5. 그러면 편집 패널에 파일 크기와 치수가 표시됩니다.
파일 크기, 치수 및 기타 이미지 상세 정보를 보여주는 이미지 편집 패널의 스크린샷.

사이트의 이미지를 살펴보세요. 화질은 높지만 로딩이 느린가요? 예를 들어 폭이 5000px인 경우 폭을 2500px로 줄이는 것이 좋습니다. 그래도 괜찮아 보이면 이미지 품질과 크기가 적절히 조화를 이룰 때까지 이미지 크기의 폭을 2000px 또는 1800px로 더 줄여 보세요.

이 가이드의 다음 섹션에서는 다양한 도구로 이미지 크기를 줄이는 방법을 설명합니다.

무료 소프트웨어로 이미지 크기 줄이기

이미지 크기를 조정하는 데 사용할 수 있는 방법은 많습니다. 다음 섹션에서는 컴퓨터, 온라인 프로그램 및 고급 소프트웨어에서 사용할 수 있는 도구를 설명합니다.

Windows

Windows 컴퓨터에서는 Microsoft 그림판을 사용할 수 있습니다. 그림판 프로그램으로 이미지를 연 다음 그림판 창의 상단에서 크기 조정을 클릭합니다. 이미지의 크기를 백분율로 줄이고 더 작은 새 버전을 저장할 수 있습니다.

Mac

Mac 컴퓨터에서는 Preview라는 앱을 사용할 수 있습니다. 앱으로 이미지를 연 다음에 도구를 클릭한 다음 “크기 조정“을 클릭합니다.

온라인 도구

이미지 크기를 줄이는 빠른 방법을 원한다면 다음과 같은 무료 타사 도구를 사용하시면 됩니다.

이러한 서비스를 통해 이미지를 업로드하고 새 크기를 선택하고 새 버전을 내보낼 수 있습니다. 이러한 서비스는 워드프레스닷컴과 제휴되어 있지 않습니다.

젯팩 모바일 앱

젯팩 앱을 사용하여 사이트에 게시하는 경우 앱에서 이미지를 최적화할 수 있습니다. 기본적으로 “이미지 최적화” 옵션이 켜져 있습니다. 원본 파일을 업로드할 때 자동으로 크기가 조정되도록 “최대 이미지 업로드 크기”를 설정할 수 있습니다.

iPhone용 젯팩 앱Android용 젯팩 앱에서 설정을 조정하려면 다음 단계를 따르세요.

  1. 휴대폰에서 젯팩 앱에 로그인합니다.
  2. 오른쪽 하단의 프로필 아이콘을 클릭합니다.
  3. 앱 설정“을 클릭합니다.

이미지 최적화” 끄기(권장하지 않음)를 전환하거나 “최대 이미지 업로드 크기” 를 조정할 수 있습니다. 기본값은 2000 x 2000px입니다.

최대 이미지 업로드 크기 설정이 강조 표시됩니다.
iOS 설정
이미지 최적화 설정이 켜졌습니다.
Android 설정

GIMP 이미지 편집기

이미지가 최적화되는 방식을 더 자세히 제어하려면 Windows, Mac, Linux 등의 운영 체제에 설치할 수 있는 Photoshop의 무료 대안인 GIMP(GNU Image Manipulation Program)를 사용하여 이미지 크기를 줄일 수 있습니다.

GIMP를 사용하여 이미지 크기를 줄이려면 다음 단계를 따르세요.

  1. GIMP에서 이미지를 엽니다.
  2. 도구 모음에서 이미지를 클릭한 다음에 “이미지 크기 변경“을 선택합니다.
  3. 이미지 크기에서 폭 값을 원하는 크기로 변경합니다.
  4. 크기 변경을 클릭합니다.
  5. 도구 모음에서 파일을 선택합니다. 그런 다음에 “다른 이름으로 내보내기“를 선택합니다.
  6. “.jpg”로 끝나는 파일에 이름을 지정합니다.
  7. 내보내기를 선택합니다.
  8. 열리는 대화상자에서 품질을 60으로 변경합니다.
  9. 고급 옵션을 클릭합니다.
  10. 하위 샘플링4:2:0(4분된 색도)으로 변경합니다.
  11. 내보내기를 클릭합니다.

다음은 결과 비교입니다. 슬라이더를 사용하여 각 이미지 전체 보기:

The left image has a file size of 1,072KB. The right image has a file size of just 384KB, yet there is no noticeable loss of quality!

기타 이미지 편집 소프트웨어

다른 이미지 편집 소프트웨어에는 사진 묶음을 빠르게 크기를 조정하고 압축하는 쉬운 옵션이 있을 수 있습니다.

다음과 같은 웹 기반 서비스도 사용할 수 있습니다.

플러그인이 활성화된 사이트

사용 중이신 워드프레스닷컴 요금제에서 플러그인이 지원되는 경우 기본 제공 젯팩 사이트 가속기(CDN)를 이용하여 자동으로 이미지 로드 시간을 단축할 수 있습니다.

  1. 사이트의 알림판을 방문합니다.
  2. 젯팩설정으로 이동합니다.
  3. “성능”이라고 표시된 탭을 클릭합니다.
  4. 성능 및 속도“라는 섹션까지 아래로 스크롤합니다.
젯팩 성능 설정의 "성능 및 속도" 섹션.
사이트 가속기

Retina 디스플레이

Retina 디스플레이는 일반 디스플레이보다 픽셀 밀도가 훨씬 높아서 일반 픽셀 밀도의 이미지는 흐려 보일 수 있습니다. 이 현상을 방지하기 위해 Retina 디스플레이가 감지되는 경우 이미지가 최대 선명도로 표시되도록 두 배 크기로 제공합니다. 두 배로 늘리기는 미디어 라이브러리의 이미지가 사이트의 이미지 크기보다 큰 경우에만 작동합니다.

사이트의 최대 표시 크기가 두 배이더라도 이미지 파일의 크기가 카메라에서 사용하는 전체 해상도의 크기보다 훨씬 작아야 이미지를 최적화할 수 있으며 Retina 디스플레이에 잘 어울립니다.

Copied to clipboard!