Jaka jest dobra alternatywa dla wykorzystania $ content_width do optymalizacji obrazu?

W $content_widthglobalnej w WordPressie Efekty wiele tematów, a nawet niektóre wtyczki poprzez ograniczenie rozmiaru obrazów i osadza w postach, jest to wymóg dla tematów przedstawionych wordpress.org.

Ustawia się go za pomocą:

$content_width = 584; // Twenty Twelve example

Jeśli wstawisz duży obraz (domyślnie 1024x1024) do postu, spowoduje to:

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

Jeśli zamiast tego usuniesz to ustawienie globalne i wstawisz rzeczywisty rozmiar obrazu, ustawienie add_image_sizego spowoduje:

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

Usuwanie globalnych i wstawianie dużych obrazów, co jest bardzo powszechne , często skutkuje oszczędnością ponad 2x, na stronach z wieloma obrazami widzę setki KB zapisane podczas ładowania strony.

Czy używanie add_image_sizei usuwanie możliwości wstawiania obrazów w pełnym rozmiarze nie jest lepszą opcją?

ps. Pisałem o tym tutaj z dokładniejszymi danymi

Pamiętaj, że $content_widthglobalny jest używany nie tylko dla obrazów, ale także dla obiektów osadzonych, takich jak wideo. Tak więc, każde rozwiązanie nie będzie po prostu rezygnacją z użycia / wsparcia $content_widthsamego siebie.

Zwykle motyw ogranicza obrazy w obszarze zawartości na kilka sposobów:

1. Duży rozmiar obrazu: Zdefiniowanie $content_widthczegoś odpowiedniego dla projektu motywu
2. Rozmiar oryginalnego / pełnego obrazu: zdefiniowanie reguły CSS w #content img { max-width: XXX; height: auto; }celu zapewnienia, aby wstawiane obrazy w pełnym rozmiarze nie uszkodziły układu
3. Rozmiar miniatury obrazu: Wywołanie w set_post_thumbnail_size()celu zdefiniowania domyślnego thumbnailrozmiaru wyróżnionego obrazu / postu . (Uwaga: osobiście nie zalecam korzystania z tej metody. Zdefiniuj niestandardowe rozmiary obrazu specyficzne dla danej lokalizacji dla wyróżnionego obrazu, a następnie wywołaj ten niestandardowy rozmiar w określonej lokalizacji szablonu, za pośrednictwem the_post_thumbnail( $size ).)

Jak odkryłeś, ze względu na sposób, w jaki WordPress wybiera z pośrednim rozmiarem obrazu, który ma być użyty dla dowolnego żądania obrazu, żądanie to może spowodować obraz skalowany w przeglądarce.

Wartości zdefiniowane tematycznie dla dużego obrazu

Jedną z opcji byłoby ponowne zdefiniowanie ustawień dla dużych wymiarów obrazu . (Kontynuuj ostrożnie. Jest to w porządku dla własnej witryny, ale publicznie rozpowszechniany motyw, który miesza się z ustawieniami konfiguracji użytkownika, jest w najlepszym razie ... szarym obszarem).

Ustawienia wymiarów dużego obrazu są przechowywane jako:

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

Możesz więc ustawić te wartości zgodnie ze swoją $content_widthwartością:

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

(Oczywiście, w razie potrzeby warto wprowadzić pewne zabezpieczenia przed awarią / sprawdzaniem błędów).

Usuń opcję wstawiania pełnowymiarowych obrazów

Jeśli chcesz po prostu uniemożliwić użytkownikom wstawianie zdjęć w pełnym rozmiarze (ponownie: zachowaj ostrożność; może to być terytorium wtyczki), możesz filtrować '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' );

Ponownie: możesz tu dodać kilka rozsądnych błędów, ponieważ ten filtr jest używany w więcej niż jednym miejscu.

Zdefiniuj niestandardowy rozmiar obrazu dla obrazów o pełnej szerokości

W związku z poprzednią opcją możesz zdefiniować 'full-post-width'rozmiar obrazu:

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

Następnie dodaj go do listy dostępnych opcji:

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' );

Tak myślę. Aby obejść $content_widthproblem dotyczący motywów przesłanych do repozytorium, używam filtrów opcji, aby wymusić rozmiary wybrane dla projektu.

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...