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

Das $content_width GLOBAL in WordPress beeinflusst viele Themen und sogar einige Plugins, indem es die Größe von Bildern einschränkt und in Posts einbettet. Dies ist eine Voraussetzung für Themen, die an wordpress.org gesendet werden.

Es wird eingestellt mit:

 $content_width = 584; // Twenty Twelve example 

Wenn Sie ein großes Bild (Standard 1024×1024) in einen Post einfügen, ergibt dies:

 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, die mit add_image_size , ergibt dies:

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

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

Ist die Verwendung von add_image_size und die Möglichkeit, Bilder in voller Größe einzufügen, keine bessere Option?

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

Solutions Collecting From Web of "Was ist eine gute Alternative zur Verwendung von $ content_width für die Bildoptimierung?"

Beachten Sie, dass die globale $content_width nicht nur für Bilder, sondern auch für eingebettete Objekte, z. B. Video, verwendet wird. Also ist jede Lösung nicht nur ein Fall, in dem die Verwendung / Unterstützung von $content_width selbst $content_width .

Normalerweise beschränkt ein Theme Content-Area-Bilder auf verschiedene Arten:

  1. Große Bildgröße: Definiert $content_width etwas, das für das Theme Design geeignet ist
  2. Original / Full Image size: Definieren einer CSS-Regel für #content img { max-width: XXX; height: auto; } #content img { max-width: XXX; height: auto; } #content img { max-width: XXX; height: auto; } um sicherzustellen, dass Bilder in voller Größe, die eingefügt werden, das Layout nicht beschädigen
  3. Thumbnail Image size: Aufruf von set_post_thumbnail_size() zum Definieren der Standard- thumbnail Größe “Featured Image / Post Thumbnail”. (Hinweis: Ich empfehle die Verwendung dieser Methode nicht. Definieren Sie benutzerdefinierte Bildgrößen für ein bestimmtes Bild, die für einen bestimmten Standort spezifisch sind, und rufen Sie diese benutzerdefinierte Größe dann über the_post_thumbnail( $size ) der bestimmten Vorlage auf.)

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

Theme-Defined-Werte für großes Bild

Eine Option wäre, die Einstellungen für große Bilddimensionen neu zu definieren . (Gehen Sie vorsichtig vor. Dies ist für Ihre eigene Website in Ordnung, aber ein öffentlich verbreitetes Theme, das mit den Benutzerkonfigurationseinstellungen verwechselt wird, ist bestenfalls … ein grauer Bereich.)

Die großen Bilddimensionseinstellungen werden wie folgt gespeichert:

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

So könnten Sie diese Werte entsprechend Ihrem $content_width Wert festlegen:

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

(Natürlich sollten Sie, falls erforderlich, einige errorssichere / Fehlerüberprüfungen durchführen.)

Option zum Einfügen von Bildern in voller Größe entfernen

Wenn Sie lediglich verhindern möchten, dass Benutzer Bilder in voller Größe einfügen (wiederum: Vorsicht, das kann ein Plugin-Gebiet sein), können Sie 'image_size_names_choose' filtern:

 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 einige sinnvolle Failsafes hinzufügen, da dieser Filter an mehreren Stellen verwendet wird.

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

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

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

Fügen Sie es dann zur 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_width Problem für Themen zu umgehen, die an den Repo übergeben 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...