WordPress에서 크기 조정된 이미지를 쉽게 제공하는 방법 (단계별)

사이트를 방문한 적이 있나요, 그리고 이미지가 충분히 빠르게 로드되지' 않아 몇 초 만에 떠난 적이 있나요? 이것은 방문자가 워드프레스 사이트에서 크기 조정된 이미지를 제공하지' 않을 경우 겪을 수 있는 정확한 상황입니다. 

이 문제는 이미지가 표시 크기에 비해 너무 커서 발생하며, 이는 사이트 로딩을 느리게 만들고 사용자 경험에 부정적인 영향을 줍니다.

걱정하지 마세요, 저희가 도와드릴게요! 아래의 빠른 튜토리얼을 따라 이미지 크기를 맞추는 방법을 쉽게 배워보세요!

왜 크기가 맞는 이미지를 제공해야 할까요?

스케일된 이미지는 웹페이지에 표시될 정확한 크기에 맞게 크기가 조정된 이미지입니다. 이는 일반적으로 훨씬 큰 크기와 해상도를 가진 원본 업로드와 다릅니다.

예를 들어, 원본 대표 이미지가 4000 x 3000 픽셀일 수 있지만 웹사이트에서는 800 x 600 픽셀로만 표시됩니다. 축소된 버전 대신 원본 이미지를 사용하면 사이트 로딩 속도가 느려집니다.

이미지가 적절하게 크기 조정되지 않으면 브라우저가 실시간으로 수동으로 크기를 조정해야 합니다. 이는 페이지 로드를 느리게 하여 사용자가 기다리게 만들고 이탈률이 증가할 수 있습니다.

It's 크기 조정된 이미지를 사용하는 것이 중요합니다. 그렇지 않으면 여러 문제가 발생할 수 있습니다:

• 불필요한 로딩 시간, 사용자는 필요 이상으로 큰 파일을 다운로드해야 합니다.
• 픽셀화되거나 흐릿한 이미지, 이미지가 너무 작아 확대될 경우.
• 처리 시간 증가, 브라우저가 실시간으로 이미지를 크기 조정해야 하므로 콘텐츠 표시가 지연됩니다.

단계별 가이드

1. 이미지 편집 도구 사용

이 방법은 편집 도구를 사용하여 더 빠른 이미지 크기 조정을 제공합니다. Adobe Photoshop과 같은 도구를 사용하여 적절히 스케일된 이미지를 만들 수 있습니다. Photoshop은 광범위한 사용자 정의를 허용하므로 크기 요구 사항에 따라 픽셀 치수를 결정할 수 있습니다.

무료 대안을 찾고 있다면, PhotoPea와 같은 온라인 도구가 좋은 선택입니다. 하지만 이 튜토리얼에서는 포괄적인 기능 때문에 Photoshop에 집중하겠습니다.

업로드하기 전에 이미지를 크기 조정하려면, 아래 튜토리얼을 따라 주세요:

• 이미지를 열기 Photoshop
• 클릭하세요 이미지 탭을 선택하고 이미지 크기

• 표시되는 대화 상자에서, 웹페이지의 표시 요구 사항에 따라 이미지 크기를 변경하십시오. 

예를 들어, 원본 이미지가 1281 x 493 px이고 3600 x 2400 px로 확대하려면 새 치수를 입력하십시오. 

• 변경 해상도를 72 PPI로 웹 사용을 위해, 고품질 인쇄가 필요하면 300 PPI로 설정하십시오.
• 그런 다음, 재샘플링 방법을 선택하십시오. 웹 최적화를 위한 가장 적합한 두 가지 옵션은 다음과 같습니다:

• 클릭 확인 변경 사항을 적용합니다. 이미지가 이제 크기가 조정되었습니다.
• 이미지를 저장하려면, 파일 탭을 선택하고 내보내기.

• 클릭 다른 이름으로 내보내기 및 원하는 파일 형식을 선택하고 설정을 조정하여 이미지 품질을 크게 손상시키지 않으면서 가능한 가장 작은 파일 크기를 달성하십시오.

2. WordPress의 기본 이미지 크기 활용

타사 소프트웨어를 설치하고 싶지 않다면, 워드프레스에 내장된 이미지 편집기를 사용할 수 있습니다. 이 도구를 사용하면 자르기, 뒤집기, 크기 조정과 같은 기본 이미지 편집 작업을 수행할 수 있습니다.

게시물이나 미디어 라이브러리에서 이미지를 클릭하면 이 기능에 접근할 수 있습니다. 또한 테마의 functions.php 파일을 수정하여 사용자 정의 이미지 크기를 정의할 수 있습니다.

간단하게 유지하기 위해, 아래 기본 가이드부터 시작해 보겠습니다:

• 이미지를 워드프레스 게시물에 업로드하세요. 

• 이미지를 선택한 다음 클릭 바꾸기 그리고 선택 미디어 라이브러리 열기 메뉴에서.

• 사이드바에서 클릭 이미지 편집.

• 이미지 편집기로 이동합니다. 클릭 크기 조정 이미지 크기를 조정하려면

• 입력하세요 새 차원 이미지에 대해. 예를 들어, 다음과 같이 변경합니다 1198 × 744 px 로 805 x 500 px. 가로세로 비율이 고정되어 있어, 입력한 너비 또는 높이에 따라 다른 값이 자동으로 조정됩니다.

• 클릭하세요 크기 조정 버튼을 눌러 변경 사항을 적용합니다.
• 이미지가 이제 크기가 조정되어 게시물에 사용할 준비가 되었습니다.

3. 플러그인 활용

• WordPress 사이트에 WP Meta SEO 을 설치하고 활성화합니다.

• WordPress 대시보드에서 WP Meta SEO > 이미지 편집기로 이동합니다.

• 이미지 SEO 및 HTML 리사이즈 설정을 엽니다.

• 동적 이미지 리사이징 옵션을 활성화하여 WP Meta SEO 이 표시 크기에 따라 이미지를 자동으로 리사이즈하도록 합니다.

• 프런트엔드에서 이미지가 리사이즈되는 방식을 제어하기 위해 최대 너비와 높이 값을 정의합니다.

활성화되면, WP Meta SEO 은 사이트에 이미지가 표시될 때 자동으로 이미지 차원을 조정하여 수동 개입 없이 최적의 이미지 크기를 보장합니다. 이 접근 방식은 페이지 속도를 향상시키고 SEO 성능을 강화하며, 특히 이미지가 많은 웹사이트에 대해 더 나은 사용자 경험을 제공합니다—. 

자세한 내용은 공식 문서와 기능 개요를 확인하실 수 있습니다:

• WP Meta SEO 이미지 SEO & HTML 리사이즈 기능
• 동적 이미지 리사이징 문서

4. srcset 속성을 사용해 반응형 이미지 구현

이 srcset 속성 은 HTML의 태그에서 다양한 화면 해상도에 맞는 이미지 소스를 제공하기 위해 사용됩니다. 이 속성을 추가하면 브라우저가 사용자의 장치에 가장 적합한 이미지를 선택할 수 있습니다.

예를 들어, 사용자가 저해상도 디스플레이를 가진 모바일 기기로 웹사이트에 접속하면, 브라우저는 보다 부드러운 경험을 제공하기 위해 저해상도 이미지를 로드합니다.

확대된 이미지를 수동으로 제공하는 방법을 알고 싶다면, 아래 지침을 따르세요:

• 코드 편집기를 통해 웹사이트의 HTML 파일을 엽니다.
• 찾으세요 태그를 최적화하려는 이미지에 대해.

• 그림에 표시된 대로 태그를 편집하고 srcset 속성을 추가합니다. 

이 예시에서 100w와 400w는 각 이미지의 실제 너비를 나타냅니다. 브라우저는 이 정보를 사용하여 사용자의 장치에 로드할 이미지를 결정합니다.

• 변경 사항을 저장하고 웹사이트를 다시 로드하여 결과를 확인하세요.

크기가 맞지 않은 이미지 식별 방법

이미지 최적화 방법을 배운 후에는, 아직 크기 조정이 필요한 이미지와 이미 최적화된 이미지를 식별하는 것도 중요합니다.

크기가 조정되지 않은 이미지를 확인하는 일반적인 방법은 두 가지가 있습니다. 도구를 사용하거나 정기적인 사이트 감사를 수행하는 것입니다. 아래 튜토리얼을 따라 주세요:

1. Google PageSpeed Insights 사용

이 도구는 웹사이트를 더 빠르게 만들기 위한 제안을 제공하는 필수 도구입니다. 이러한 제안은 Google Lighthouse를 사용한 심층 분석을 통해 생성됩니다. 일반적인 제안 중 하나는 크기가 조정되지 않은 것으로 표시된 이미지를 적절히 스케일링하는 것입니다.

빠른 확인을 위해 아래 지침을 따를 수 있습니다:

• Google PageSpeed Insight를 열려면 https://pagespeed.web.dev.

• 전체 웹페이지 URL 입력 필드에 붙여넣으세요.
• 클릭 Analyze 프로세스를 시작하세요.
• 작업이 완료될 때까지 기다리세요. 그러면 PSI가 성능 보고서를 제공할 것입니다.
• 아래로 스크롤하여 라벨이 지정된 항목을 찾으세요 이미지 크기를 적절히 조정.
• 존재한다면, 사이트에서 찾은 크기 조정되지 않은 이미지 목록을 볼 수 있습니다.

이미지 중 하나가 크기 조정되지 않은 것으로 표시되면, Google PageSpeed Insights가 다음과 같은 여러 제안을 제공할 수 있습니다:

• 다음 세대 포맷으로 이미지 제공, 예를 들어 WebP, AVIM, JPEG XR, 또는 JPEG2000.
• 다양한 크기 요구 사항을 충족하도록 이미지를 적절히 리사이즈합니다. 예를 들어 제품 상세 페이지에서는 1000 x 1000px로, 제품 목록 페이지에서는 400 x 400px로 리사이즈합니다.
• lazy loading을 사용하여 사용자'의 화면에 보이는 이미지만 즉시 로드됩니다.

2. 정기적인 사이트 감사 수행

정기적인 사이트 감사를 수행하면 사이트'의 건강 및 성능에 대한 깊은 통찰을 얻을 수 있습니다.

감사 시, 잠재적인 문제를 발견하기 위해 사이트 아키텍처와 사용자 경험 검토를 우선순위에 두세요.

이 과정은 이미지 최적화 기회를 발견할 수도 있습니다. 모바일, 태블릿, 데스크톱 등 다양한 기기에서 사이트를 테스트하여 일관된 경험을 보장하세요.

또한, 이미지가 올바르게 크기 조정되었는지 확인하세요. 그렇지 않다면, 위의 튜토리얼을 따라 주세요.

결론

크기 조정된 이미지를 사용하는 것은 사이트 성능 최적화에 필수적이며, 특히 모바일 기기에서 중요합니다. 이는 페이지 로딩 속도를 높이고 이탈률을 감소시킵니다.

하지만, 많은 수의 이미지를 확장하는 것은 시간이 많이 걸릴 수 있습니다. 다음과 같은 플러그인 사용을 고려해 보세요 WP Media Folder, 이 플러그인은 이미지를 자동으로 크기 조정하고, 정리하며, 교체하면서 성능을 최적화하도록 유지합니다.