Fancy Images beschleunigen

Bei Fancy-Images zeigen wir unserer Leserin zuerst ein kleines Bild. Und erst auf Wunsch — will sagen: Klick — auch die größere Version. In einer früheren Version hatte ich vorgeschlagen, einfach nur die URL auf das hochgeladene Bild im href-Attributes des Fancy-Links und im src-Attribute des img-Tags einzutragen. Das aber verlangsamt den Artikelaufbau. Fancy Images beschleunigen? Das meint etwas Anderes:

Denn bisher holt sich der Browser, der das ‘Fancy Box Image’ darstellen soll, ja immer das große Bild — selbst wenn die Userin nur die verkleinerte Version sehen will. Und dann verkleinert er es:

<a href="ORIGINAL_IMAGE_URL" data-fancy=""><img src="ORIGINAL_IMAGE_URL" width="SMALLER_PLEASE"></a>

Je größer das Originalbild also ist, desto länger dauert der Download. Und desto länger dauert auch das Herunterrendern. Also wird das Bild auch später angezeigt. Dabei hat ja WordPress für jedes Bild vorsorglich schon verschiedene Versionen vorberechnet. Warum also nicht die zuerst nehmen und das große nur noch auf Nachfrage holen?

[ de | en ]

Lösung

Überprüfe, ob Deine functions.php die folgende Funktion für die Anzeige von Blockbildern enthält¹:

/*
 * Simple short code for inserting a fancy boxed image 
 * (C) 2023 Karsten Reincke
 * SPDX-License-Identifier: MIT
 */
function fcbPicCode($atts){
  $atts = (array) $atts;
  $imid = $atts[0];   // obligatoric parameter
  $width = $atts[1];  // obligatoric parameter
  $wpsize = "";       // thumbnail, medium, large, or full
  $alt="";                    // optional parameter
  $style="is-style-default";  // optional parameter 
  $align="alignleft";         // optional parameter

  /* IDEA: try to download the best fitting image size be default.
   * Download the full sized image if and when the user had said
   * she wants to see it by a click (fancy)
   */
  if ($width <= 150)
    $wpsize = "thumbnail";
  elseif ($width <=300)
    $wpsize = "medium";
  elseif ($width <= 1024)
    $wpsize = "large";
  else
    $wpsize = "full";

  /* get the path to the original image */
  $fimgp=wp_get_attachment_image_url($imid,"full");
  if (!($fimgp)) return ("wrong image data");
  /* if it's an svg, there won't be any smaller images */
  if (wp_get_image_mime($fimgp) == "svg" )
    $simgp=$fimgp;
  else {
  /* otherwise get the path to the fitting smaller image */
    $simgp=wp_get_attachment_image_url($imid,$wpsize);
    if (!($simgp)) $simgp=$fimgp;
  }

  if (array_key_exists(2,$atts)) {
    $alt=$atts[2];
    if (array_key_exists(3,$atts)) {
      $style=$atts[3];
      if (array_key_exists(4,$atts))
        $align=$atts[4];
    }
  }

  $res= 
   '<figure class="wp-block-image ' . $align . ' size-medium is-resized ' . $style . '">' .
     '<a href="' . $fimgp . '" data-fancybox="">' .
       '<img src="' . $simgp . '" alt="'. $alt .'" width="' . $width . '" >' .
      '</a>' .
   '</figure>';
  return $res;

}
add_shortcode('fcbpic', 'fcbPicCode');

Überprüfe, ob Deine functions.php die folgende Funktion für die Anzeige von Inlinebildern enthält:

/*
 * Simple short code for inserting a fancy inline img 
 * (C) 2023 Karsten Reincke
 * SPDX-License-Identifier: MIT
 */
function fciPicCode($atts){
  $atts = (array) $atts;
  $imid = $atts[0];   // obligatoric parameter
  $width = $atts[1];  // obligatoric parameter
  $wpsize = "";       // thumbnail, medium, large, or full
  $alt="";                    // optional parameter
  $style="is-style-default";  // optional parameter 

  /* IDEA: try to download the best fitting image size be default.
   * Download the full sized image if and when the user had said
   * she wants to see it by a click (fancy)
   */
  if ($width <= 150)
    $wpsize = "thumbnail";
  elseif ($width <=300)
    $wpsize = "medium";
  elseif ($width <= 1024)
    $wpsize = "large";
  else
    $wpsize = "full";

  /* get the path to the original image */
  $fimgp=wp_get_attachment_image_url($imid,"full");
  if (!($fimgp)) return ("wrong image data");
  /* if it's an svg, there won't be any smaller images */
  if (wp_get_image_mime($fimgp) == "svg" )
    $simgp=$fimgp;
  else {
  /* otherwise get the path to the fitting smaller image */
    $simgp=wp_get_attachment_image_url($imid,$wpsize);
    if (!($simgp)) $simgp=$fimgp;
  }

  if (array_key_exists(2,$atts)) {
    $alt=$atts[2];
    if (array_key_exists(3,$atts)) {
      $style=$atts[3];
    }
  }

  $res= 
     '<a href="' . $fimgp . '" data-fancybox="">' .
      '<img src="' . $simgp . '" alt="'. $alt .'" width="' . $width . '" >' .
     '</a>' ; 
  return $res;

}
add_shortcode('fcipic', 'fciPicCode');

Hintergrund

Die Idee dieser Funktionen ist klar: Wir lassen uns den Namen der Bilddatei von WordPress heraussuchen, die der erbetenen Anzeigebreite am besten entspricht. Bei SVGs berechnet WordPress (bzw. das entsprechende Plugin) allerdings keine anderen Versionen im Voraus.² Deshalb prüfen wir zuerst, ob das Originalbild ein svg ist, und lassen uns bei Rastergraphiken den Link zu dem Bild von WordPress heraussuchen, das am besten zur Wunschgröße passt. So entstünde in der Seite ein Eintrag nach dem Muster

<a href="ORIGINAL_IMAGE_URL" data-fancy=""><img src="SMALL_IMAGE_URL" width="SMALLER_PLEASE"></a>

BINGO.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat eine Web-Designerin die ersten Schritte auch in Sachen SEO getan, wird sie sich bald einem richtig dicken Brett zuwenden, nämlich ihrem Menü. Dabei muss sie thematische Cluster sauber gliedern und präsentieren, ohne zu fancy zu werden. Dann kann sie die Anzeige von festen und skalierbaren Bildern aufhübschen und beschleunigen. Über einen Teil dieser Etappe spricht auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

Natürlich habe ich die älteren Vorschläge schon geupdated. Wahrscheinlich hast Du also bereits die verbesserte Version. Wenn dem so ist, lies diesen Post als Erläuterung dazu, warum ich meine initiale Version geändert habe. [↩]
Das machte ja auch keinen Sinn. SVGs haben keine intendierte Ausgangsgröße. [↩]