Set lazy loading for images.

application/src/Media/Renderer/Youtube.php

@@ -36,7 +36,7 @@ public function render(PhpRenderer $view, MediaRepresentation $media,
         }
         $url->setQuery($query);
         $embed = sprintf(
-            '<iframe width="%s" height="%s" src="%s" frameborder="0"%s></iframe>',
+            '<iframe loading="lazy" width="%s" height="%s" src="%s" frameborder="0"%s></iframe>',
             $view->escapeHtml($options['width']),
             $view->escapeHtml($options['height']),
             $view->escapeHtml($url),

application/src/Stdlib/Oembed.php

@@ -87,8 +87,9 @@ public function renderOembed(PhpRenderer $view, array $oembed)
         $type = $oembed['type'] ?? null;
         if ('photo' === $type) {
             $url = $oembed['url'] ?? null;
+            $data = $oembed['oembed'] ?? [];
             return sprintf(
-                '<img src="%s" width="%s" height="%s" alt="%s">',
+                '<img loading="lazy" src="%s" width="%s" height="%s" alt="%s">',
                 $view->escapeHtml($url),
                 $view->escapeHtml($oembed['width'] ?? ''),
                 $view->escapeHtml($oembed['height'] ?? ''),

application/src/View/Helper/IiifViewer.php

@@ -23,6 +23,6 @@ public function __invoke(array $query, array $options = [])
         $width = $options['width'] ?? '100%';
         $height = $options['height'] ?? '700px';
         $src = $view->url('iiif-viewer', [], ['force_canonical' => true, 'query' => $query]);
-        return sprintf('<iframe style="width: %s; height: %s;" src="%s"></iframe>', $width, $height, $view->escapeHtml($src));
+        return sprintf('<iframe loading="lazy" style="width: %s; height: %s;" src="%s"></iframe>', $width, $height, $view->escapeHtml($src));
     }
 }

application/src/View/Helper/Thumbnail.php

@@ -31,6 +31,13 @@ public function __invoke(AbstractRepresentation $representation, $type, array $a
         $params = $triggerHelper('view_helper.thumbnail.attribs', $params, true);
         $attribs = $params['attribs'];
 
+        // Include element for lazy loading. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading
+        if (!isset($attribs['loading'])) {
+            // Due to a bug in firefox, the attribute "loading" should be set
+            // before src (see https://bugzilla.mozilla.org/show_bug.cgi?id=1647077).
+            $attribs = ['loading' => 'lazy'] + $attribs;
+        }
+
         if (!isset($attribs['alt'])) {
             $attribs['alt'] = $representation->thumbnailAltText();
         }

application/view/common/asset-form.phtml

@@ -19,7 +19,7 @@ if ($assetId) {
     <?php if ($asset): ?>
     <span class="selected-asset">
         <?php
-        echo sprintf('<img class="selected-asset-image" src="%s" alt="%s"><div class="selected-asset-name">%s</div>',
+        echo sprintf('<img loading="lazy" class="selected-asset-image" src="%s" alt="%s"><div class="selected-asset-name">%s</div>',
             $this->escapeHtml($asset->assetUrl()),
             $this->escapeHtml($asset->altText()),
             $this->escapeHtml($asset->name())
@@ -28,7 +28,7 @@ if ($assetId) {
     </span>
     <?php else: ?>
     <span class="selected-asset" style="display: none;">
-        <img class="selected-asset-image"><div class="selected-asset-name"></div>
+        <img loading="lazy" class="selected-asset-image"><div class="selected-asset-name"></div>
     </span>
     <?php endif; ?>
     <span class="no-selected-asset">

application/view/common/asset-options.phtml

@@ -9,7 +9,7 @@ $form->prepare();
 $selectedAssetTemplate = '
 <h3><span class="selected-asset-name">' . $translate('No Asset') . '</span></h3>
 <span class="selected-asset">
-<img class="selected-asset-image">
+<img loading="lazy" class="selected-asset-image">
 <div class="selected-asset-name"></div>
 <input type="hidden" name="selected-asset-id" class="selected-asset-id">
 <span class="none-selected">' . $translate('[No asset selected]') . '</span>

application/view/omeka/site-admin/index/theme-selector.phtml

@@ -28,7 +28,7 @@ $this->headScript()->appendFile($this->assetUrl('js/site-theme.js', 'Omeka'));
         <span class="error"><?php echo sprintf($translate('This theme requires Omeka S %s'), $theme->getIni('omeka_version_constraint')); ?></span>
         <?php endif; ?>
 
-        <div class="theme-thumbnail"><img src="<?php echo $this->escapeHtml($thumbnailUrl); ?>"></div>
+        <div class="theme-thumbnail"><img loading="lazy" src="<?php echo $this->escapeHtml($thumbnailUrl); ?>"></div>
 
         <h4><?php echo $this->escapeHtml($theme->getName()); ?></h4>
         <div class="theme-meta">

application/view/omeka/site-admin/index/theme.phtml

@@ -20,7 +20,7 @@ $fallbackThumbnailUrl = $this->assetUrl('img/theme.jpg', 'Omeka');
     <div class="current-theme<?php echo Manager::STATE_ACTIVE !== $currentTheme->getState() ? ' invalid' : ''; ?>">
         <?php $localThumbnailUrl = OMEKA_PATH . $currentTheme->getThumbnail(); ?>
         <?php $absoluteThumbnailUrl = $this->basePath() . $currentTheme->getThumbnail(); ?>
-        <div class="theme-thumbnail"><img src="<?php echo $escape((file_exists($localThumbnailUrl)) ? $absoluteThumbnailUrl : $fallbackThumbnailUrl); ?>"></div>
+        <div class="theme-thumbnail"><img loading="lazy" src="<?php echo $escape((file_exists($localThumbnailUrl)) ? $absoluteThumbnailUrl : $fallbackThumbnailUrl); ?>"></div>
 
         <div class="current-theme-info">
             <h3>