Was ist eine gute Alternative zur Verwendung von $ content_width für die Bildoptimierung?

Das $content_widthGLOBAL in WordPress wirkt sich auf viele Themen und sogar einige Plugins aus, indem es die Größe von Bildern begrenzt und in Posts einbettet. Dies ist eine Voraussetzung für Themen, die an wordpress.org gesendet werden.

Es wird eingestellt durch:

$content_width = 584; // Twenty Twelve example

Wenn Sie ein großes Bild (Standard 1024 x 1024) in einen Beitrag einfügen, führt dies zu folgenden Ergebnissen:

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

Wenn Sie stattdessen diese globale Einstellung entfernen und die tatsächliche Bildgröße einfügen, führt add_image_sizedies zu folgenden Ergebnissen:

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

Das Entfernen der globalen und das Einfügen großer Bilder, was sehr häufig vorkommt , führt häufig zu einer Einsparung von mehr als 2x. Bei Seiten mit mehreren Bildern werden beim Laden von Seiten Hunderte von KB gespeichert.

Ist das Verwenden add_image_sizeund Entfernen der Funktion zum Einfügen von Bildern in voller Größe keine bessere Option?

ps. Ich habe hier mit genaueren Daten darüber geschrieben

Denken Sie daran, dass das $content_widthGlobal nicht nur für Bilder, sondern auch für eingebettete Objekte wie Videos verwendet wird. Eine Lösung besteht also nicht nur darin, die Nutzung / den Support von sich $content_widthselbst einzustellen.

Normalerweise schränkt ein Thema die Bilder im Inhaltsbereich auf verschiedene Arten ein:

1. Große Bildgröße: Definieren eines $content_widthfür das Design des Themas geeigneten Objekts
2. Original /#content img { max-width: XXX; height: auto; } Vollbildgröße : Definieren Sie eine CSS-Regel, um sicherzustellen, dass eingefügte Vollbildbilder das Layout nicht beschädigen
3. Thumbnail- Bildgröße: Ruft set_post_thumbnail_size()auf, um die Standardgröße für Featured Image / Post Thumbnail zu definieren thumbnail. (Hinweis: Ich empfehle diese Methode nicht persönlich. Definieren Sie benutzerdefinierte Bildgrößen für einen bestimmten Speicherort für ein ausgewähltes Bild und rufen Sie diese benutzerdefinierte Größe an dem bestimmten Speicherort für die Vorlage über auf the_post_thumbnail( $size ).)

Wie Sie herausgefunden haben, kann aufgrund der Art und Weise, wie WordPress eine Zwischenbildgröße für eine bestimmte Bildanforderung auswählt, diese Anforderung zu einem browserskalierten Bild führen.

Themendefinierte Werte für ein großes Bild

Eine Möglichkeit wäre, die Einstellungen für große Bildabmessungen neu zu definieren . (Fahren Sie mit Vorsicht fort. Dies ist in Ordnung für Ihre eigene Website, aber ein öffentlich verbreitetes Thema, das mit den Benutzerkonfigurationseinstellungen in Konflikt gerät, ist bestenfalls ein grauer Bereich.)

Die Einstellungen für große Bildabmessungen werden gespeichert als:

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

So könnten Sie setzen diese Werte nach Ihrem $content_widthWert:

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

(Natürlich möchten Sie dies gegebenenfalls mit einer Ausfallsicherheits- / Fehlerprüfung umgehen.)

Entfernen Sie die Option, um Bilder in voller Größe einzufügen

Wenn Sie einfach verhindern möchten, dass Benutzer Bilder in voller Größe einfügen (erneut: Vorsicht, dies kann Plugin-Gebiet sein), können Sie Folgendes filtern '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' );

Nochmals: Vielleicht möchten Sie hier ein paar vernünftige Fehlercafés hinzufügen, da dieser Filter an mehreren Stellen verwendet wird.

Definieren Sie eine benutzerdefinierte Bildgröße für Bilder mit voller Post-Breite

In Bezug auf die vorherige Option können Sie eine 'full-post-width'Bildgröße definieren :

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

Fügen Sie es dann der Liste der verfügbaren Optionen hinzu:

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

Ja, ich denke schon. Um das $content_widthProblem für Themen zu umgehen, die an das Repo gesendet wurden, verwende ich Optionsfilter, um die Größen zu erzwingen, die ich für das Design ausgewählt habe.

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