김프에서 WordPress의 이미지 크기를 조정하는 방법(및 중요한 이유)

WordPress 사이트에 이미지를 업로드하려고 하지만 이미지의 크기나 파일 형식을 잘 모르십니까? 웹용 이미지의 크기를 조정하고 압축하는 과정이 익숙하지 않습니까? 이 기사에서는 웹사이트에서 적절한 이미지 크기를 사용하는 것이 중요한 이유를 설명하고 무료 사진 편집기 김프를 사용하여 이미지 크기를 조정하고 압축하는 방법을 보여줍니다.

웹사이트 이미지 크기 조정이 중요한 이유

웹사이트의 이미지 크기를 조정하는 것이 중요한 이유부터 시작하겠습니다.

에 따르면 WordPress.org, 이미지의 전체 "물리적 크기"는 웹사이트 페이지의 성능에 큰 역할을 합니다. “[이미지의] 파일 크기는 페이지를 로드하는 데 걸리는 시간을 나타냅니다. 파일 크기가 커질수록… [페이지] 로드 시간이 길어집니다.” 다시 말해, 웹사이트에 큰 파일 크기를 업로드하면 콘텐츠를 추가하는 페이지의 성능이 느려지며 일반적으로 사이트의 분석 데이터에서 더 느린 페이지 로드 속도로 나타납니다.

“[이미지의] 파일 크기는 페이지를 로드하는 데 걸리는 시간을 나타냅니다. 파일 크기가 커질수록… [페이지] 로드 시간이 길어집니다.”
-WordPress.org

페이지 로드 속도(간단히 "속도 페이지,"는 "페이지의 콘텐츠가 로드되는 속도"입니다. SEO 사이트 모즈. 느린 페이지를 사용하면 "이탈률,'는 사이트 방문자가 단일 페이지를 본 후 사이트를 떠나는 세션을 나타내는 멋진 측정항목입니다. 느린 페이지는 방문자가 사이트 페이지에서 보내는 시간을 줄일 수도 있습니다. 사람들은 페이지의 콘텐츠가 로드되고 사이트를 더 빨리 떠나기를 참을성 없이 기다릴 수 있기 때문입니다.

이러한 측정항목은 일반적으로 사용자가 사이트에서 더 많은 시간을 보내고 사이트에서 더 많은 페이지를 보기를 원하기 때문에 중요합니다.

또한 검색 엔진 결과 페이지 또는 "SERP"에서 사이트 순위를 결정하는 역할을 하기 때문에 중요합니다. SERPs Google에 단어나 구를 입력하고 Enter 키를 누르면 표시되는 결과 페이지입니다. 더 큰 이미지는 잘못된 웹 디자인 관행을 나타내고 사이트에 있는 동안 사용자의 경험에 부정적인 영향을 미치기 때문에 Google과 같은 검색 엔진은 처벌하다 이러한 더 큰 이미지와 더 나은 성과를 내는 다른 웹사이트보다 귀하의 웹사이트 순위를 매기십시오..

예를 들어, Google에서 웹사이트 순위가 낮을수록 사이트 트래픽이 줄어들고 검색 결과에서 순위가 높은 경쟁업체에게 더 많은 트래픽이 이동합니다.

웹사이트에 있는 이미지의 파일 크기를 줄임으로써 속도 페이지 따라서 다음과 같은 다른 측정항목을 개선할 수 있습니다. 이탈률 및 페이지에 시간e 궁극적으로 검색 엔진에서 순위를 향상시킵니다.

검색 순위에 영향을 미치는 다른 많은 중요한 변수가 있으므로 이미지를 수정하는 것은 솔리드의 일부일 뿐입니다. SEO (검색 엔진 최적화) 전략. 그러나 사이트 트래픽을 늘리기 위해 Google과 같은 사이트에서 사이트 순위를 높이는 것은 확실히 매우 중요합니다.

김프에서 WordPress의 이미지 크기를 조정하는 방법

그렇다면 WordPress의 이미지 크기를 올바르게 조정하는 방법은 무엇입니까?

다음을 사용하여 이미지의 전체 크기를 줄이면 이미지의 파일 크기를 줄일 수 있습니다. 스케일링 및 자르기 웹사이트에 업로드하기 전에 또한 "압축"를 이미지에 추가하여 크기를 더 줄이십시오.

무료 오픈 소스 사진 편집기인 GIMP는 이러한 모든 작업을 수행하는 동시에 권장되는 "차세대" 파일 형식으로 내보내어 이미지 파일 크기를 더욱 줄이고 사이트 성능을 향상시킬 수 있습니다.

이미지 크기 조정

이 프로세스를 시작하려면 사이트에 업로드하려는 이미지를 김프로 엽니다. 컴퓨터에서 김프의 이미지 창으로 이미지를 끌어다 놓거나 김프 내부에서 파일>열기로 간단히 이동할 수 있습니다.

파일>열기 방법을 사용하는 경우 나타나는 "이미지 열기" 대화 상자 내에서 컴퓨터의 이미지 위치로 이동하고 이미지 파일을 찾은 후 김프에서 열려면 해당 이미지 파일을 두 번 클릭합니다(또는 대화 창의 오른쪽 하단 모서리에 있는 "열기" 버튼).

김프 창의 맨 위에는 "제목 표시줄"(위 이미지의 빨간색 화살표)이라는 기능이 있습니다. 여기에서 이미지의 현재 크기를 볼 수 있습니다(사진에서 확대된 녹색 상자). 내 이미지는 1920×1280입니다. 첫 번째 숫자 1920은 이미지 너비(픽셀)를 나타내고 두 번째 숫자 1280은 이미지 높이를 나타냅니다. 이미지에 사용할 최종 이미지 크기는 WordPress에서 이미지를 사용하려는 위치와 사용 중인 테마에 따라 다릅니다.

이 자습서에서는 블로그 게시물 이미지에 권장되는 표준 1200×630 픽셀 크기로 이미지 크기를 조정합니다.

이를 염두에 두고 가장 먼저 할 일은 원본 이미지의 가로 세로 비율이 권장 크기의 가로 세로 비율과 일치하도록 이미지를 자르는 것입니다. 이렇게 하려면 키보드에서 shift+c를 누르거나 김프 도구 상자에서 자르기 도구 아이콘(위 이미지의 빨간색 화살표)을 클릭하여 자르기 도구를 가져옵니다.

다음으로 이 도구의 도구 옵션에서 "고정"(녹색 화살표) 옆의 확인란을 선택하고 드롭다운을 클릭하여 "종횡비"(파란색 화살표)를 선택합니다.

"1200:630"을 입력하여 드롭다운(노란색 화살표) 아래의 텍스트 필드에 가로 세로 비율을 설정합니다. 이것은 내가 최종 이미지가 되기를 원하는 권장 이미지 크기의 종횡비와 일치합니다.

자르기 도구를 사용하여 이제 이미지에서 마우스를 클릭하고 끌어 자르기 영역을 그립니다. 마우스를 놓으면 자르기 영역 외부의 모든 항목이 흐리게 표시됩니다(위 이미지의 빨간색 화살표 – 도구 옵션에서 "강조 표시"가 선택되어 있으며 일반적으로 기본적으로 설정되어 있다고 가정).

기본적으로 자르기 영역에는 가이드가 "중앙선"으로 설정되어 있습니다(위 이미지의 노란색 화살표). 도구 옵션 하단에 있는 가이드 드롭다운을 사용하여 이 설정을 변경할 수 있습니다. 예를 들어 가이드를 "XNUMX분의 XNUMX 법칙"(녹색 화살표)으로 변경하겠습니다. 여기에 있는 다양한 가이드 옵션은 사진 원칙을 기반으로 하므로 이러한 원칙을 사용하여 구도를 쉽게 잡을 수 있습니다.

자르기 영역의 측면이나 모서리(즉, 위 이미지에서 빨간색 화살표로 표시된 강조 표시된 영역) 위에 마우스를 놓고 클릭하고 끌어 자르기 영역의 경계 크기를 조정할 수 있습니다. 도구 옵션(위 이미지에서 녹색으로 윤곽선)에 있는 "크기" 필드에서 자르기 영역의 크기를 항상 볼 수 있습니다. 자르기 영역의 전체 크기를 이미지의 최종 크기인 1200×630보다 크게 유지하는 것이 좋습니다.

자르기 영역(빨간색 화살표) 중앙에서 마우스를 클릭하고 끌어 이미지에서 자르기 위치를 변경할 수도 있습니다.

이미지를 자를 준비가 되면 자르기 영역 내부를 한 번 클릭하면 이미지가 잘립니다.

도구 옵션에서 "잘린 픽셀 삭제" 옵션이 선택되지 않은 경우(위 이미지의 녹색 화살표) 원래 이미지 경계는 여전히 노란색 점선(빨간색 화살표)을 통해 이미지 주위에 표시됩니다. 이미지>캔버스를 레이어에 맞춤으로 이동하여 원본 이미지를 복원하여 자르기를 취소할 수 있습니다. 캔버스 경계 내부의 이미지 영역만 내보내집니다.

이제 이미지가 원하는 종횡비로 잘렸지만 "제목 표시줄"에서 이미지 크기를 다시 한 번 보면 이미지가 1532×804임을 알 수 있습니다(녹색으로 윤곽선이 표시되고 위 사진에서 확대됨 - 크기는 이미지에서 자르기 영역을 얼마나 크게 그렸는지에 따라 약간 다를 수 있습니다. 이제 원하는 치수와 일치하도록 이미지의 크기를 조정해야 합니다.

이렇게 하려면 이미지>이미지 크기 조정(빨간색 화살표)으로 이동합니다.

나타나는 "Scale Image" 상자의 "Image Size"에서 "width" 및 "height" 상자 옆에 있는 체인 링크 아이콘이 연결되어 있는지 확인합니다(위 사진의 빨간색 화살표). 그런 다음 이미지의 "너비"를 1200(녹색 화살표)으로 변경합니다. 탭 키를 누르십시오. 이미지 높이는 자동으로 "630"으로 업데이트됩니다. "품질"에서 "보간" 드롭다운(파란색 화살표)이 스케일링 후 최상의 이미지 품질을 위해 "NoHalo" 또는 "LoHalo"로 설정되어 있는지 확인합니다. (보간법에 대한 자세한 내용은 주제에 대한 내 튜토리얼을 확인하십시오).

"Scale" 버튼을 눌러 이미지의 크기를 조정합니다(노란색 화살표).

크기 조정이 완료되면 제목 표시줄에서 이미지 크기를 확인합니다. 이제 우리가 원하는 정확한 크기인 1200×630의 이미지 크기가 표시되어야 합니다! 이제 어떻게 해야 합니까?

WebP로 내보내서 이미지 압축

이미지 자르기 및 크기 조정은 이미지의 높이를 1920에서 1200픽셀로, 너비를 1280에서 630픽셀로 줄여 파일 크기를 줄였지만 이미지를 내보낼 때 압축을 적용하여 이미지 크기를 더 줄일 수 있습니다.

따라서 이제 이미지 품질을 눈에 띄게 저하시키지 않으면서 이미지에 압축을 적용할 파일 형식으로 이미지를 내보내야 합니다. JPEG는 항상 좋은 옵션이지만 이제 더 나은 옵션을 사용할 수 있습니다. WebP.

WebP 형식은 JPEG보다 압축률이 높지만 이미지 품질에는 영향을 미치지 않습니다. 즉, 더 작은 파일 크기로 더 보기 좋은 이미지를 얻을 수 있습니다. 또한 WebP 형식은 상위 5개 웹 브라우저 모두에서 지원됩니다.

WebP로 내보내려면 파일>다른 이름으로 내보내기(빨간색 화살표)로 이동합니다.

"장소" 섹션(녹색 윤곽선)에서 폴더를 클릭하여 컴퓨터에서 이미지를 저장하려는 이미지를 선택합니다. 폴더를 두 번 클릭하여 입력하면 "폴더에 저장" 제목(빨간색 화살표) 옆에 있는 폴더를 확인할 수 있습니다. 그런 다음 이미지 이름을 원하는 대로 변경합니다. WebP 형식으로 이미지를 내보내려면 이미지 이름 끝에 확장자가 ".webp"(파란색 화살표)인지 확인하십시오. 준비가 되면 창의 오른쪽 하단 모서리에 있는 "내보내기"(노란색 화살표)를 클릭하십시오.

다음으로 "WebP로 이미지 내보내기" 대화 상자가 나타납니다. "무손실"이 선택 해제되어 있는지 확인하십시오(빨간색 화살표). 나는 일반적으로 "이미지 품질"을 80으로 설정합니다(파란색 화살표 – 백분율이므로 백분율이 낮을수록 이미지 품질은 낮아지지만 이미지 파일 크기는 작아집니다). 이미지에 투명도가 포함되어 있지 않은 경우(즉, 배경이 없는 로고) "알파 품질" 슬라이더에 대해 걱정할 필요가 없습니다. 투명한 배경이 있는 이미지의 파일 크기를 100kb에서 90kb로 늘렸습니다. "소스 유형" 드롭다운은 "기본값"으로 계속 설정할 수 있습니다.

Exif 데이터, ITPC 데이터 및 XMP 데이터를 포함한 메타데이터 옵션을 선택하거나 선택을 취소할지 여부는 사용자에게 달려 있습니다. Exif 및 XMP 데이터는 일반적으로 사용된 카메라 모델 또는 사용된 렌즈 유형과 같은 사진에 대한 정보를 설명하는 카메라에 의해 할당된 메타데이터입니다. 반면 ITPC는 언론인이 사용하며 소유권, 권리 및 라이선스와 같은 정보를 이미지에 할당합니다. 무엇을 해야 할지 잘 모르겠다면 이 옵션을 선택된 상태로 두십시오.

마찬가지로, 대부분의 브라우저는 GIMP가 사용하는 이미지를 표시하기 위해 자동으로 sRGB 색 공간을 사용하므로 "색상 프로필 저장" 옵션을 선택하지 않은 상태로 두는 것이 좋습니다. 다른 색상 프로필을 사용하는 경우 이 항목을 선택한 상태로 두는 것이 좋습니다. 또한 특정 브라우저에서 이미지가 제대로 표시되지 않는 것이 걱정되는 경우 이 옵션을 선택하면 전체 이미지 크기에 몇 kb만 추가됩니다.

마지막으로 "썸네일 저장" 옵션을 선택하지 않은 상태로 유지하면 몇 킬로바이트를 추가로 절약할 수 있습니다.

"내보내기"(위 이미지의 노란색 화살표)를 클릭하여 이미지를 WebP 형식으로 내보냅니다. 내보낸 WebP 파일을 크기가 동일하고 품질이 "80"으로 설정된 JPEG 파일과 비교할 때 WebP 이미지는 JPEG보다 크기가 작은 약 30kb 또는 약 25%로 나타납니다.

이제 WordPress 사이트에 로그인하여 이미지를 업로드하려는 페이지 또는 게시물로 이동하거나 기본 탐색을 사용하여 "미디어" 섹션으로 이동하고 이미지를 미디어 라이브러리로 끌어다 놓을 수 있습니다. 제 경우에는 기본 탐색(위 이미지의 빨간색 화살표)을 사용하여 "게시"로 이동하고 "블로그 게시물 1"(파란색 화살표)을 클릭하여 해당 블로그 게시물을 편집하겠습니다.