이미지 최적화를 위해 $ content_width를 사용하는 좋은 대안은 무엇입니까?

$content_widthWordPress 의 GLOBAL은 게시물의 이미지 및 임베드의 크기를 제한하여 많은 테마 및 일부 플러그인에 영향을 미치므로 wordpress.org에 제출 된 테마의 요구 사항입니다.

다음을 사용하여 설정됩니다.

$content_width = 584; // Twenty Twelve example

큰 이미지 (기본값 1024x1024)를 게시물에 삽입하면 다음과 같은 결과가 발생합니다.

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

대신이 전역 설정을 제거하고 실제 이미지 크기를 삽입하면 다음과 add_image_size같이 설정 됩니다.

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328" 

전역 이미지를 제거하고 매우 일반적인 큰 이미지를 삽입 하면 여러 이미지가 포함 된 페이지에서 2 배 이상 절약 되는 경우가 종종 있습니다. 페이지로드시 수백 KB가 절약됩니다.

add_image_size전체 크기 이미지를 삽입하는 기능을 사용 하고 제거하는 것이 더 좋은 옵션이 아닙니까?

추신. 더 정확한 데이터로 여기에 썼습니다.

것을 명심 $content_width글로벌에만 비디오와 같은 포함 된 개체에 대한 또한 이미지에 사용하지만,하지 않습니다. 따라서 어떤 솔루션도 $content_width그 자체의 사용 / 지원을 중단하는 경우가 아닙니다 .

일반적으로 테마는 몇 가지 방식으로 컨텐츠 영역 이미지를 제한합니다.

1. 큰 이미지 크기 : $content_width테마 디자인에 적합한 것을 정의
2. 원본 / 전체 이미지 크기 : #content img { max-width: XXX; height: auto; }삽입되는 전체 크기 이미지로 인해 레이아웃이 손상되지 않도록 CSS 규칙 정의
3. 썸네일 이미지 크기 : set_post_thumbnail_size()추천 이미지 / 포스트 썸네일 기본 thumbnail크기 를 정의하기 위해 호출 합니다 . (참고 : 개인적으로이 방법을 사용하지 않는 것이 좋습니다. 추천 이미지의 특정 위치에 특정한 사용자 정의 이미지 크기를 정의한 다음을 통해 특정 템플릿 위치에서 해당 사용자 정의 크기를 호출하십시오 the_post_thumbnail( $size ).)

아시다시피, WordPress가 특정 이미지 요청에 사용할 중간 이미지 크기를 선택하는 방식 때문에 해당 요청으로 인해 브라우저 크기의 이미지가 생성 될 수 있습니다.

큰 이미지를위한 테마 정의 값

하나의 옵션은 큰 이미지 크기에 대한 설정 을 재정의하는 것 입니다. (주의해서 진행하십시오. 이것은 자신의 사이트에는 적합하지만 사용자 구성 설정을 방해하는 공개적으로 배포 된 테마는 ... 회색 영역입니다.)

큰 이미지 치수 설정은 다음과 같이 저장됩니다.

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

따라서 값에 따라 해당 값을 설정할 수 있습니다 $content_width.

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(물론,이 문제를 적절하게 페일 세이프 / 오류 검사에 배치하고 싶을 것입니다.)

전체 크기 이미지를 삽입하는 옵션 제거

사용자가 전체 크기 이미지를 삽입하지 못하게하려면 (주의 : 계속 진행하십시오. 플러그인 영역 일 수 있음) 다음을 필터링 할 수 있습니다 'image_size_names_choose'.

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

다시 :이 필터는 여러 곳에서 사용되므로 여기에 적절한 비상 안전 장치를 추가 할 수 있습니다.

전폭 이미지의 사용자 정의 이미지 크기 정의

이전 옵션과 관련하여 'full-post-width'이미지 크기를 정의 할 수 있습니다 .

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

그런 다음 사용 가능한 옵션 목록에 추가하십시오.

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

예, 그렇게 생각합니다. $content_width리포지토리에 제출 된 테마 의 문제를 해결하기 위해 옵션 필터를 사용하여 디자인에 선택한 크기를 강제 적용합니다.

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...