Open-Source Webdesign

Fancy Images beschleunigen

/ von Karsten Reincke | Kommentar schreiben

Straßenlichter

Bei Fan­cy-Images zei­gen wir unse­rer Lese­rin zuerst ein klei­nes Bild. Und erst auf Wunsch — will sagen: Klick — auch die grö­ße­re Ver­si­on. In einer frü­he­ren Ver­si­on hat­te ich vor­ge­schla­gen, ein­fach nur die URL auf das hoch­ge­la­de­ne Bild im href-Attri­bu­tes des Fan­cy-Links und im src-Attri­bu­te des img-Tags ein­zu­tra­gen. Das aber ver­lang­samt den Arti­kel­auf­bau. Fan­cy Images beschleu­ni­gen? Das meint etwas Ande­res:

Denn bis­her holt sich der Brow­ser, der das ‘Fan­cy Box Image’ dar­stel­len soll, ja immer das gro­ße Bild — selbst wenn die Use­rin nur die ver­klei­ner­te Ver­si­on sehen will. Und dann ver­klei­nert er es:

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

Je grö­ßer das Ori­gi­nal­bild also ist, des­to län­ger dau­ert der Down­load. Und des­to län­ger dau­ert auch das Her­un­ter­ren­dern. Also wird das Bild auch spä­ter ange­zeigt. Dabei hat ja Word­Press für jedes Bild vor­sorg­lich schon ver­schie­de­ne Ver­sio­nen vor­be­rech­net. War­um also nicht die zuerst neh­men und das gro­ße nur noch auf Nach­fra­ge holen?

[ de | en ]

Lösung

  • Über­prü­fe, ob Dei­ne functions.php die fol­gen­de Funk­ti­on für die Anzei­ge von Block­bil­dern ent­hält1:
/*
 * 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');
  • Über­prü­fe, ob Dei­ne functions.php die fol­gen­de Funk­ti­on für die Anzei­ge von Inli­ne­bil­dern ent­hä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 die­ser Funk­tio­nen ist klar: Wir las­sen uns den Namen der Bild­da­tei von Word­Press her­aus­su­chen, die der erbe­te­nen Anzei­ge­brei­te am bes­ten ent­spricht. Bei SVGs berech­net Word­Press (bzw. das ent­spre­chen­de Plug­in) aller­dings kei­ne ande­ren Ver­sio­nen im Vor­aus.2 Des­halb prü­fen wir zuerst, ob das Ori­gi­nal­bild ein svg ist, und las­sen uns bei Ras­ter­gra­phi­ken den Link zu dem Bild von Word­Press her­aus­su­chen, das am bes­ten zur Wunsch­grö­ße passt. So ent­stün­de in der Sei­te ein Ein­trag nach dem Mus­ter

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

BINGO.

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, hat eine Web-Desi­gne­rin die ers­ten Schrit­te auch in Sachen SEO getan, wird sie sich bald einem rich­tig dicken Brett zuwen­den, näm­lich ihrem Menü. Dabei muss sie the­ma­ti­sche Clus­ter sau­ber glie­dern und prä­sen­tie­ren, ohne zu fan­cy zu wer­den. Dann kann sie die Anzei­ge von fes­ten und ska­lier­ba­ren Bil­dern auf­hüb­schen und beschleu­ni­gen. Über einen Teil die­ser Etap­pe spricht auch die­ser Post.

Im Übri­gen: Män­ner sind mit­ge­meint.

  1. Natür­lich habe ich die älte­ren Vor­schlä­ge schon geup­dated. Wahr­schein­lich hast Du also bereits die ver­bes­ser­te Ver­si­on. Wenn dem so ist, lies die­sen Post als Erläu­te­rung dazu, war­um ich mei­ne initia­le Ver­si­on geän­dert habe. [↩]
  2. Das mach­te ja auch kei­nen Sinn. SVGs haben kei­ne inten­dier­te Aus­gangs­grö­ße. [↩]
To top