{"id":3350,"date":"2015-07-13T14:20:15","date_gmt":"2015-07-13T12:20:15","guid":{"rendered":"https:\/\/en.florianbrinkmann.de\/?p=3350"},"modified":"2020-02-09T11:00:01","modified_gmt":"2020-02-09T10:00:01","slug":"responsive-images-and-lazy-loading-in-wordpress","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/responsive-images-and-lazy-loading-in-wordpress-3350\/","title":{"rendered":"Responsive images and lazy loading in WordPress"},"content":{"rendered":"\n

The technique responsive images prevents users from downloading unnecessary large images. Lazy loading only loads images if they are almost in the visible area, so the user does not download images he does not see. This post shows you how to use lazy loading with responsive images in WordPress.<\/p>\n\n\n\n\n\n\n\n

\n

Update from January 19, 2017<\/strong>: Since WordPress 4.4 you do not need the RICG Responsive Images plugin anymore \u2014 the responsive images feature was merged into the core with this release.<\/p>\n<\/div>\n\n\n\n

Lazy loading and responsive images for WordPress with \u00bblazySizes\u00ab<\/h2>\n\n\n\n

For implementing responsive images into WordPress, there is the RICG Responsive Images<\/em> plugin. Because the WordPress.org account is listed as one of the developers, the feature will probably be merged into the core (was merged into WordPress 4.4).<\/p>\n\n\n\n

We use the script lazySizes<\/a><\/em> for lazy loading the responsive images. To get this working, we have to modify the responsive images markup. The srcset<\/code> and sizes<\/code> attributes have to be changed into data-srcset<\/code> and data-sizes<\/code>. Besides that, we need to add the class lazyload<\/code> and remove the src<\/code> attribute.<\/p>\n\n\n\n

To add a fallback for deactivated JavaScript, we generate a noscript<\/code> element. Let us begin with the first code part:<\/p>\n\n\n\n

Modifying the page and post content<\/h2>\n\n\n
<?php<\/span>\ndefined( 'ABSPATH'<\/span> ) or<\/span> die<\/span>( \"Nothing to see!\"<\/span> );\n\/**\n * Plugin Name: Lazy Load Responsive Images\n *\/<\/span>\n\nfunction<\/span> lazy_load_responsive_images<\/span> ( $content )<\/span> <\/span>{\n   if<\/span> ( empty<\/span>( $content ) ) {\n      return<\/span> $content;\n   }\n   $dom = new<\/span> DOMDocument();\n   libxml_use_internal_errors( true<\/span> );\n   $dom->loadHTML( $content );\n   libxml_clear_errors();\n   foreach<\/span> ( $dom->getElementsByTagName( 'img'<\/span> ) as<\/span> $img ) {\n      if<\/span> ( $img->hasAttribute( 'sizes'<\/span> ) && $img->hasAttribute( 'srcset'<\/span> ) ) {\n         $sizes_attr = $img->getAttribute( 'sizes'<\/span> );\n         $srcset     = $img->getAttribute( 'srcset'<\/span> );\n         $img->setAttribute( 'data-sizes'<\/span>, $sizes_attr );\n         $img->setAttribute( 'data-srcset'<\/span>, $srcset );\n         $img->removeAttribute( 'sizes'<\/span> );\n         $img->removeAttribute( 'srcset'<\/span> );\n         $src = $img->getAttribute( 'src'<\/span> );\n         if<\/span> ( ! $src ) {\n            $src = $img->getAttribute( 'data-noscript'<\/span> );\n         }\n      } else<\/span> {\n         $src = $img->getAttribute( 'src'<\/span> );\n         if<\/span> ( ! $src ) {\n            $src = $img->getAttribute( 'data-noscript'<\/span> );\n         }\n         $img->setAttribute( 'data-src'<\/span>, $src );\n      }\n      $classes = $img->getAttribute( 'class'<\/span> );\n      $classes .= \" lazyload\"<\/span>;\n      $img->setAttribute( 'class'<\/span>, $classes );\n      $img->removeAttribute( 'src'<\/span> );\n      $noscript      = $dom->createElement( 'noscript'<\/span> );\n      $noscript_node = $img->parentNode->insertBefore( $noscript, $img );\n      $noscript_img  = $dom->createElement( 'IMG'<\/span> );\n      $noscript_img->setAttribute( 'class'<\/span>, $classes );\n      $new_img = $noscript_node->appendChild( $noscript_img );\n      $new_img->setAttribute( 'src'<\/span>, $src );\n      $content = $dom->saveHTML();\n   }\n\n   return<\/span> $content;\n}\nadd_filter( 'the_content'<\/span>, 'lazy_load_responsive_images'<\/span>, 20<\/span> );<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
At first, we create a new DOMDocument()<\/code> object. With the method loadHTML()<\/code>, we load the HTML code from the $content<\/code> variable, which holds the content of the post. To avoid warnings with this method<\/a>, which seems not to know HTML5 elements yet, the lines above and below the loadHTML()<\/code> call are necessary.<\/p>\n\n\n\n
Modification of images which were added with installed RICG Responsive Images plugin<\/h3>\n\n\n\n
Next, we loop through each img<\/code> element. Because the responsive images plugin does not modify images which were added before the plugin activation, we have to check if the image is a responsive image. To do that, we check for the attributes sizes<\/code> and srcset<\/code>. If they are there, we get the content from both with the getAttribute()<\/code> method.<\/p>\n\n\n\n
After that, we need to set the new attributes data-sizes<\/code> and data-srcset<\/code> to the img<\/code> element with the setAttribute()<\/code> method. We use the respective variable with the result of the getAttribute()<\/code> call as the second parameter. After doing this, we can remove the sizes<\/code> and srcset<\/code> attributes and save the image URL for the noscript<\/code> image which will be added later. For that, we simply use the value of the src<\/code> attribute. If no src<\/code> attribute is given (for example this is the case for galleries), we use the data-noscript<\/code> attribute.<\/p>\n\n\n\n
Modify images without sizes<\/code> and srcset<\/code> attribute<\/h3>\n\n\n\n
Images which were added to posts or pages before installing the responsive images plugin neither have a sizes<\/code> nor a srcset<\/code> attribute. For these images, we fetch the URL like for the other images and add the data-src<\/code> attribute.<\/p>\n\n\n\n
Adding lazy load class and noscript<\/code> element<\/h3>\n\n\n\n
Finally, we have to add a class to the images to get the lazy loading plugin working and create the noscript<\/code> element. First, we save the existing classes of the image in the $classes<\/code> variable and append the class  lazyload<\/code> in the next line. After that, we add the updated class string to the image again. Now we remove the src<\/code> attribute (if it still exists).<\/p>\n\n\n\n
Next, we create a new noscript<\/code> element, which is inserted before the image. Besides that, we need an img<\/code> element which gets the classes of the original image (I do not know why it has to be IMG<\/code> here, but it does not work with img<\/code>). After that, we append the image to the noscript<\/code> element and add the src<\/code> attribute.<\/p>\n\n\n\n
Modifying image attributes of gallery images and post thumbnails<\/h2>\n\n\n\n
To modify the attributes of gallery images and post thumbnails, WordPress gives us the wp_get_attachment_image_attributes<\/code> filter:<\/p>\n\n\n
function<\/span> lazy_load_responsive_images_modify_post_thumbnail_attr<\/span>( $attr, $attachment, $size )<\/span> <\/span>{\n   if<\/span> ( isset<\/span>( $attr['sizes'<\/span>] ) ) {\n      $data_sizes = $attr['sizes'<\/span>];\n      unset<\/span>( $attr['sizes'<\/span>] );\n      $attr['data-sizes'<\/span>] = $data_sizes;\n   }\n\n   if<\/span> ( isset<\/span>( $attr['srcset'<\/span>] ) ) {\n      $data_srcset = $attr['srcset'<\/span>];\n      unset<\/span>( $attr['srcset'<\/span>] );\n      $attr['data-srcset'<\/span>]   = $data_srcset;\n      $attr['data-noscript'<\/span>] = $attr['src'<\/span>];\n      unset<\/span>( $attr['src'<\/span>] );\n   }\n\n   $attr['class'<\/span>] .= ' lazyload'<\/span>;\n\n   return<\/span> $attr;\n}\nadd_filter( 'wp_get_attachment_image_attributes'<\/span>, 'lazy_load_responsive_images_modify_post_thumbnail_attr'<\/span>, 20<\/span>, 3<\/span>);<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
First, we check if the sizes<\/code> attribute is set. If this is the case, we save its content to a variable, remove the attribute and add a data-sizes<\/code> attribute. We do the same with the srcset<\/code> attribute. Additionally, we add the data-noscript<\/code> attribute and remove the src<\/code> attribute.<\/p>\n\n\n\n
Finally, we add the class lazyload<\/code> to existing classes. Now only one thing is missing:<\/p>\n\n\n\n
noscript<\/code> element for post thumbnails<\/h2>\n\n\n
function<\/span> lazy_load_responsive_images_filter_post_thumbnail_html<\/span>( $html, $post_id, $post_thumbnail_id, $size, $attr )<\/span> <\/span>{\n   $dom = new<\/span> DOMDocument();\n   libxml_use_internal_errors( true<\/span> );\n   $dom->loadHTML( $html );\n   libxml_clear_errors();\n   foreach<\/span> ( $dom->getElementsByTagName( 'img'<\/span> ) as<\/span> $img ) {\n      $src     = $img->getAttribute( 'data-noscript'<\/span> );\n      $classes = $img->getAttribute( 'class'<\/span> );\n   }\n   $noscript_element = \"<noscript><img src='\"<\/span> . $src . \"' class='\"<\/span> . $classes . \"'><\/noscript>\"<\/span>;\n   $html .= $noscript_element;\n\n   return<\/span> $html;\n}\nadd_filter( 'post_thumbnail_html'<\/span>, 'lazy_load_responsive_images_filter_post_thumbnail_html'<\/span>, 10<\/span>, 5<\/span>);<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Parts of this code should look familiar to you: We get the classes and URL of the image and create the noscript<\/code> element.<\/p>\n\n\n\n
Adding the lazy load scripts<\/h2>\n\n\n\n
Let us insert the lazy loading script and a small style sheet to come to an end.<\/p>\n\n\n
function<\/span> lazy_load_responsive_images_script<\/span>(<\/span>) <\/span>{\n   wp_enqueue_script( 'lazy_load_responsive_images_script-lazysizes'<\/span>, plugins_url() . '\/lazy-load-responsive-images\/js\/lazysizes.js'<\/span>, ''<\/span>, false<\/span>, false<\/span> );\n   wp_enqueue_style( 'lazy_load_responsive_images_style'<\/span>, plugins_url() . '\/lazy-load-responsive-images\/css\/lazy_load_responsive_images.css'<\/span> );\n}\nadd_action( 'wp_enqueue_scripts'<\/span>, 'lazy_load_responsive_images_script'<\/span>, 20<\/span>, 0<\/span> );<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
That is it. The style sheet just hides the original image, if JavaScript is deactivated. For that, a no-js<\/code> class has to be given.<\/p>\n\n\n\n
Tip<\/strong>: In the normal case, this should add a noscript<\/code> element to all images. But if you are using a theme, which brings its own functions for displaying images, these will not get one. If you know a filter, which allows the modification of the HTML of all images, please leave a comment! \ud83d\ude42<\/p>\n\n\n\n
Marc uploaded the plugin to WordPress.org<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
The technique responsive images prevents users from downloading unnecessary large images. Lazy loading only loads images if they are almost in the visible area, so the user does not download images he does not see. This post shows you how to use lazy loading with responsive images in WordPress.<\/p>\n","protected":false},"author":1,"featured_media":3353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[42],"tags":[],"class_list":["post-3350","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-plugins"],"wp-worthy-pixel":{"ignored":false,"public":"355aaa9948854c3aa1f32ab727af147c","server":"vg01.met.vgwort.de","url":"https:\/\/vg01.met.vgwort.de\/na\/355aaa9948854c3aa1f32ab727af147c"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3350"}],"version-history":[{"count":4,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3350\/revisions"}],"predecessor-version":[{"id":5944,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3350\/revisions\/5944"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media\/3353"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Before displaying the post or page in the frontend, we filter its content with the function lazy_load_responsive_images<\/code>. If the post content is empty, we just return $content<\/code> without modification. To modify the image attributes to meet our needs, we use the PHP DOM<\/code> classes (thanks for the hint to Franz Josef Kaiser<\/a>).<\/p>\n\n\n\n