사전 정의 된 이미지 크기로 이미지 최적화 [WordPress 팁]
웹 사이트에서 이미지를 최적화하는 것은 어려운 작업입니다. 더 적은 수의 이미지, 압축 된 이미지, 스프라이트 또는 svg를 사용하도록 선택할 수 있습니다. 그 목록은 계속된다. 많은 WordPress 사이트가 걸려있는 한 곳에서 이미지 크기를 정의하고 있습니다. 내용이 많은 사이트 최적화의 중요한 측면.
이미지가 업로드 될 때 주어진 크기에 따라 이미지가 자동 생성되기 때문에 이미지 크기가 중요합니다. 이렇게하면 3000px 너비의 원본 이미지가 있더라도 600px 이미지로 충분하면이 이미지가 사용되지 않습니다. 이상적인 600px 와이드 공간은 더 큰 이미지를 축소하는 대신 600px 와이드 이미지를 사용해야합니다..
이 기사에서는 어떤 이미지 크기가 과 그들을 정의하는 방법.
WordPress가 이미지를 처리하는 방법
WordPress 기사에 이미지를 삽입 한 적이 있다면 이미지 크기 선택기가 있어야합니다. 이를 통해 이미지의 소형, 중형 및 대형 버전을 삽입 할 수 있습니다. 이들의 실제 크기 WordPress 설정에서 수정할 수 있습니다..
WordPress를 통해 이미지를 업로드 할 때마다 이미지의 버전이 생성되어 별도로 저장됩니다. 예를 들어, 1200 × 800 이미지를 업로드하면 WordPress에서 100 × 100, 600 × 400 및 900 × 600 버전을 만들 수 있습니다. 이미지를 삽입하고 "중간"을 선택하면 원본의 축소 버전과 달리 실제 중간 버전이 사용됩니다.
이것은 매우 유익합니다. 클라이언트 컴퓨터에서 서버의 대역폭과 처리 시간을 절약합니다.. 600 × 400 이미지를 다운로드하는 것이 1200 × 800 이미지를 다운로드하는 것보다 빠르다는 것은 놀라운 일이 아닙니다..
큰 이미지를 사용하는 경우 크기를 줄여야하는 경우, 브라우저가 계산을 처리해야합니다. 이 일을 만들기 위해서. 시간이 걸리는 것은 아니지만 이미지가 많은 웹 사이트에서는 눈에 것입니다..
적절한 장소에서 올바른 이미지
궁극적 인 목표는 항상 적절한 이미지 크기를 사용하십시오.. 440 × 380 이미지가 필요한 경우 서버에서 그 정확한 크기로 이미지를 가져옵니다. 업로드 된 이미지를 사용할 두 가지 주요 장소가 있습니다 : 추천 이미지 및 인 - 포스트 이미지 - 먼저 추천 이미지에 초점을 맞출 것을 권합니다..
가장 시각적으로 다루어 진 기사를 제외한 모든 게시물에서 인 이미지가 220px 또는 245px인지 여부는 중요하지 않습니다. 어떤 버전을 사용하더라도 똑같이 사용할 수 있습니다. 추천 이미지는 일반적으로 공통 크기로 표시됩니다. 기사 목록의 경우 178 × 178 축소판을 사용할 수 있으며 기사 헤더의 경우 1200 × 600 와이드 이미지를 사용할 수 있습니다.
이 외에도 설정에 정의 된대로 별도의 축소판 / 보통 / 큰 크기를 유지하려는 경우가 있습니다. 특정 차원에 쉽게 액세스 할 수 있습니다. 소식에 이미지를 추가 할 때.
모든 것이 다 끝나면 다음과 같습니다. 우리가 특색있는 이미지에 사용할 수있는 두 가지 이미지 크기가 더 있으면 좋지 않을까요? 이러한 이미지 크기는 이미지를 업로드 할 때 나머지 이미지와 나란히 만들어집니다. 희소식은 WordPress가 당신에게 아주 간단한 기능으로 덮었다이다.
이미지 크기 만들기
다음을 사용하여 add_image_size () 함수 웹 사이트에 필요한 모든 이미지 크기를 정의 할 수 있습니다. 위에서 언급 한 두 가지 예를 만들어 보겠습니다. 아래 코드를 테마의 functions.php 파일이나 플러그인 파일에 삽입하십시오..
add_image_size ( 'featured_thumbnail', 178, 178, true); add_image_size ( 'featured_wide', 1200, 600);
보시다시피이 함수는 네 개의 매개 변수를 사용합니다. 첫 번째 매개 변수를 사용하면 크기의 이름을 설정할 수 있습니다. 두 번째 매개 변수는 최대 너비, 세 번째, 최대 높이입니다. 네 번째 매개 변수는 하드 자르기를 설정합니다. true로 설정된 경우, 지정한 크기로 이미지가 생성됩니다..
일단 이것이 당신의 주제 또는 플러그인에 추가되면, 업로드하는 각 파일의 두 가지 새로운 버전이 WordPress에 의해 생성됩니다.
이미지 크기 사용
이러한 이미지 크기는 미디어 검색과 관련된 여러 기능에서 사용할 수 있습니다. 먼저 특집 이미지를 살펴 보겠습니다.. the_post_thumbnail () 게시물의 추천 이미지를 표시하는 데 일반적으로 사용됩니다. 다음 코드는 WordPress 루프에 배치 할 수 있습니다.
the_post_thumbnail ( 'featured_thumbnail');
이 함수의 첫 번째 매개 변수를 사용하여 사용할 이미지 크기를 지정할 수 있습니다. "featured_thumbnail"을 지정 했으므로이 파일의 178 × 178 버전이 사용됩니다.
다른 여러 기능이 있습니다. wp_get_attachment_image ()과 wp_get_attachment_image_src () 이미지 크기 매개 변수도 사용합니다. 이러한 함수를 사용할 때마다 적절한 이미지 크기를 지정해야합니다..
미리보기 재생성
이미 사이트가있는 경우 이미지 크기를 정의하여 기사를 소급하여 최적화 할 수 없습니다. 이미지 크기는 새 이미지가 업로드 될 때만 고려되므로 이미 시스템에있는 이미지에는 적용되지 않습니다.
두려워하지 마라. Thumbnails Regenerate 플러그인은 모든 것을 더 좋게 만들 것이다! 이 플러그인은 정의 된 모든 이미지 크기를 고려하여 모든 이미지의 축소판을 다시 생성 할 수 있습니다. 그것은 또한 할 수있다. 특정 이미지를 목표로 삼다., 방금 몇 개 있거나 테스트를하고있는 경우 유용합니다..
미리보기 이미지가 재생성되면 사이트에 최적화 된 버전이로드되어야합니다. 이미지의 원본을보고이를 확인할 수 있습니다. 'example.jpeg'를 업로드하고 추천 이미지의 소스로 'example.jpeg'가 표시되면 뭔가 이상하지 않습니다. 당신이 볼 경우 “example-178 × 178.jpeg” 그러면 모든 것이 잘됩니다. 최적화 된 이미지가 표시됩니다..
반응 형 이미지
최적화 된 사이트를 유지하는 데있어 한 가지 어려움은 응답 성입니다. iPad에서 기사를 볼 때 최대 너비가 786px 정도이므로 큰 크기의 인 - 포스트 이미지가 축소됩니다..
가장 쉬운 해결책은 Hammy와 같은 플러그인을 사용하는 것입니다. Hammy는 테마의 콘텐츠 너비 (브라우저의 창 너비와 반대)에 따라 작동하며이를 기반으로 최적화 된 이미지를 제공 할 수 있습니다. 이는 처리 능력과 대역폭이 문제가 될 수있는 모바일 사용자에게 특히 편리합니다..
추가 이미지 최적화
소개에서 언급했듯이 이미지를 최적화 할 수있는 수많은 방법이 있습니다. 스프라이트에서 이미지 압축에 이르기까지 많은 기술을 사용하여 이미지로드 시간을 단축 할 수 있습니다. Ashutosh KS는 이미지 성능을 향상시키기 위해 9 개의 WordPress 플러그인을 선보이는 훌륭한 기사를 작성했습니다.!
또한 그림 요소에 대한 지원을 추가하는 방법을 보여주는 Hassle Free Responsive Images를 살펴볼 것을 제안합니다.이 요소는 자신 만의 코드를 작성하려는 경우 사용할 것입니다..
