3.34. Saving lazy-loaded images

Lazy-loaded images are the images that are loaded in the browser after the target web page is loaded. Normally, the browsers load the images immediately. However, this makes the pages take too much time to be completely loaded. For this reason, websites make the images load lazily.

You can use Exchange element attributes setting to save lazily loaded images. For more information on how to do it, please refer to Exchange element attributes. To summarize, follow the steps below:

  1. Open Site Settings Page of the site whose lazy-loaded images you want to save

  2. Go to Post Tab and scroll down to Manipulate HTML Section

  3. Go to Exchange element attributes

  4. Find out which attribute of img elements stores the actual image URL. For this guide, let’s assume it is data-src attribute.

  5. Put the actual image URL into src attribute of img elements by configuring Exchange element attributes setting as follows:

    Selector:img
    Attribute 1:src
    Attribute 2:data-src (This might be different in your case)

  6. Optionally, click to button available next to the setting you configured. Observe the test results to see if the actual image URLs are now in src attributes. If not, make sure the setting is configured properly.

  7. Now, the plugin will be able to retrieve image URLs from src attributes of img elements. You can configure the settings used to save the images without worrying about the lazy-loaded images. To learn how to save images, you can refer to Saving images in post content or Saving the featured image of a post.