워드 프레스에서 제대로 이미지 크기를 조정하는 방법(페이지 속도 인사이트+지티 메트릭스 항목)

페이지 속도 인사이트 또는 지티 메트릭스를 통해 사이트를 실행 한 경우 이미지 크기를 적절하게 지정하는 권장 사항이 표시 될 수 있습니다.

워드프레스에서 이미지 크기를 제대로 조정하려면 페이지 속도 인사이트에서 항목을 확장하고 어떤 이미지가 너무 큰지 확인합니다. 올바른 크기로 크기를 조정합니다. 마지막으로 이전 이미지를 새 이미지로 바꿉니다. 귀하의 사이트를 다시 테스트 하 고 100%이어야 한다.

이미지 크기를 적절하게 조정

페이지 속도 인사이트는 테스트 중인 단일 페이지에 대해 최적화되지 않은 이미지만 표시하므로 웹 사이트에 표시되는 사이트 전체 이미지(로고,사이드바 및 바닥글 이미지)의 크기를 조정하여 시작합니다. 그런 다음 페이지 속도 통찰력을 통해 다른 페이지를 실행하고 이미지 크기를 조정하십시오.

플러그인을 사용하여 이미지 크기를 자동으로 조정할 수 있습니까?
그럴 가능성이 없다. 대부분의 이미지 최적화 플러그인에서 최대 너비+높이를 설정할 수 있습니다. 그러나 사이트의 다른 영역에는 특정 치수가 필요합니다(이미지에 따라 크기를 조정해야 함).

이미지 치수 치트 시트를 만듭니다.
제대로 크기 이미지 오류를 방지하는 가장 좋은 방법은 다른 영역(슬라이더,위젯,로고,전체 폭 블로그 이미지 등)귀하의 웹 사이트의 크기를 배우는 것입니다. 그런 다음 각 영역의 치수를 사용하여 이미지 치수 치트 시트를 만듭니다. 당신이 당신의 이미지 치수 치트 시트를 따라 업로드하기 전에 이미지 크기를 조정하는 경우,당신은 제대로 크기 이미지 오류가 없어야합니다.

지티메트릭스 레거시 보고서에서 오버사이즈 이미지 찾기

지티메트릭스 레거시 보고서에서는 큰 이미지의 정확한 치수를 보여 줍니다.이 보고서에는 다음과 같은 기능이 포함되어 있습니다.

지티메트릭스를 통해 페이지를 실행하고”배율 조정 이미지 제공”섹션을 봅니다. 자신의 권장 사항을 확장하고 이러한 이미지의 크기를 조정해야 올바른 크기를 볼 수 있습니다.또한 이미지가 너무 큰지 수동으로 확인할 수도 있습니다. 이미지를 마우스 오른쪽 버튼으로 클릭>이미지 주소 복사.

복사 이미지 주소

그런 다음 이미지를 새 브라우저 탭에 붙여 넣습니다. 당신은 당신의 웹 사이트에 표시된 이미지를 비교하면,당신은 그들의 크기에 눈에 띄는 차이가 볼 수 있습니다. 즉,이미지를 확장 할 필요가 있습니다. 이미지의 두 가지 변형을 나란히 비교하면 이미지가 실제로 얼마나 큰지(그리고 왜 페이지가로드 속도가 느릴 수 있는지)알 수 있습니다.

크기 조정 대 비 크기 조정 이미지

크기를 수정하려면 이미지 크기 조정

이전 이미지를 다운로드하여 선택한 이미지 편집 도구에서 엽니 다(김프 사용).. 이미지 크기 조정 및/또는 자르기를 지티메트릭스가 권장하는 크기로 조정합니다. 이미지 편집 도구를 사용하면 이미지를 압축하고 이미지를 더 빨리로드 할 수있는 데이터를 제거 할 수 있습니다.

이미지 크기 조정 김프

WordPress:

워드 프레스 미디어 편집기에서 이미지 크기 조정

이전 이미지를 새 이미지로 바꾸기

새 이미지를 워드 프레스에 업로드 한 다음 이전 이미지를 새 이미지로 바꿉니다.

되는 위젯 이미지

확장된 이미지 위젯

재시작 페이지에 GTmetrix

재시작 페이지에 GTmetrix(또는 통찰력도하십시오)및 오류가 고정되어야한다.

축소 이미지 제공 워드 프레스

모바일에서 이미지 크기를 적절하게 조정

모바일에서 이미지 크기를 적절하게 조정하는 것은 다릅니다.이 응용 프로그램은 당신에게 아름다운 욕실 꾸미기의 갤러리를 보여줍니다. 사이트가 적응 형 이미지를 사용하지 않는 경우 확장 된 이미지 오류를 더 많이 볼 수 있습니다(이는 일반적으로 플러그인에 의해 수행됨).1 단계:지티메트릭스의 안드로이드 테스트를 통해 사이트 실행:

지티메트릭스 모바일 테스트

모바일에서 배율 조정 이미지 제공

2 단계:지티메트릭스에서 제공하는 모바일 배경 크기 찾기:

최대 배경 너비

3 단계:적응 형 이미지 플러그인을 설치합니다(짧은 픽셀 또는 적응 형 이미지를 권장합니다).

짧은 픽셀 적응 이미지

4 단계:지티메트릭스가 제공하는 치수를 배경 최대 너비로 설정합니다.4475>배경 최대 너비

5 단계:오류가 없는지 확인하기 위해 모바일 테스트를 통해 사이트를 다시 실행합니다.

GTmetrix 모바일 테스트

5 단계:다른 설정을 구성에 적응한 이미지는 플러그인(ShortPixel 포함 WebP 지원으로드 이미지를,스마트르기고 제거하는 EXIF data). 이 역시 도움이 될 수 있습니다.

여러 페이지에 이미지 크기를 조정

여러 페이지/게시물에 동일한 이미지를 사용하고 고정해야하는 경우,당신은 이미지의 크기를 조정할 수 있습니다.

1 단계:더 나은 검색 바꾸기 플러그인을 설치합니다.

2 단계:이전 이미지를 복사하여 더 나은 검색 바꾸기 플러그인의”검색 대상”필드에 붙여 넣습니다. 워드 프레스 텍스트 편집기를 사용하여 이미지를 볼 수 있습니다. 참고: 더 나은 검색은 당신이 플러그인에 입력 한 정확한 이미지가 포함 된 경우에만 이미지를 대체합니다 교체합니다.2 단계:새 이미지를 복사하여”바꾸기”필드에 붙여 넣습니다.4 단계:테이블을 선택합니다(예:. 게시물)당신은 스캔 선택을 취소 할”드라이 스캔으로 실행.”

5 단계:”검색/바꾸기”를 클릭하면 플러그인이 이전 이미지를 새 이미지로 대체합니다.

이미지 크기 만들기 치트 시트

앞서 언급했듯이 업로드하기 전에 이미지 크기를 조정할 수 있도록 웹 사이트의 모든 영역의 크기를 측정해야합니다. 당신은(당신이 제대로 크기 이미지 오류가있는 경우에만)이 크기를 찾을 수 있습니다 또는 당신은 또한 테마의 스타일 시트에서 찾을 수 있습니다.

예:

  • 회전 목마 이미지:115(승)
  • 위젯 이미지:414(승)
  • 전체 폭 블로그 게시물 이미지:680(승)
  • 추천 이미지: 2018 년 11 월 1 일,서울시 강남구 테헤란로 102(삼성동),서울시 강남구 테헤란로 102(삼성동),서울시 강남구 테헤란로 102(삼성동),서울시 강남구 테헤란로 102(삼성동),서울시 강남구 테헤란로 102(삼성동),서울시 강남구 테헤란로 102(삼성동),서울시 강남구 테헤란로 102(삼성동),서울시 강남구 테헤란로 102(삼성동),서울시 강남구 테헤란로 102(삼성동),서울시 강남 image11

680 픽셀 너비 사각형

내 블로그의 너비는 680 픽셀이므로이 게시물의 모든 단일 이미지 크기가 680 픽셀로 조정되었습니다.대부분의 이미지 최적화 플러그인에는 이미지 크기를 조정할 수 있는 옵션이 있습니다. 그것은 확실히 당신의 이미지가 절대적으로 거대한되지 않습니다 만들기위한 더 많은입니다. 이미지화 플러그인이 말했듯이,최대 너비는 가장 큰 축소판 그림보다 작지 않아야 합니다.[8295]

이미지 크기 조정[193]

이미지 크기 조정

이미지 크기 조정

이미지를 최적화하는 다른 방법

워드 프레스에서 이미지 최적화에 대한 전체 자습서를 작성했습니다.:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지 압축:이미지

더 빠른 자습서를 찾고 계십니까?
내가 쓴 다른 자습서는 다음과 같습니다.:

  • 워드 프레스 속도 가이드(이 가이드는 영원히했다)
  • 어떻게 설치 포스트 로켓(내가 추천 캐시 플러그인)

또한 워드 프레스 속도 최적화에 멋진 비디오를:

자주 묻는 질문

이미지 크기를 올바르게 수정하려면 어떻게 해야 합니까?

이미지를 다운로드하고 크기를 조정하여 이전 이미지를 새 이미지로 바꿉니다.

플러그인을 사용하여 이미지 크기를 적절하게 조정할 수 있습니까?

아니요,웹 사이트의 다른 섹션에는 다른 이미지 치수가 필요합니다. 당신은 그 독특한 크기에 맞게 이미지를 확장 할 필요가있다.

어떤 이미지를 먼저 크기 조정을 시작해야합니까?

로고,사이드바 및 바닥글 이미지와 같이 여러 페이지에 표시되는 이미지의 크기를 조정하여 시작합니다.

이미지의 정확한 치수는 어디에서 찾을 수 있습니까?

페이지 속도 탭에서 항목을 확장하면 각 이미지의 정확한 치수가 표시됩니다.

답글 남기기

이메일 주소는 공개되지 않습니다.