moosch

<p>This plugin was inspired by <a href="https://medium.com" rel="nofollow ugc">Medium</a>, it makes images load better on page paint. Providing a ‘blurred’ version of the image at the correct scale, then fading the true image in once loaded.<br />
It works by default on all post featured images leveraging the WordPress post_thumbnail_html filter.</p>
<p>For inline images the plugin searches through your post content and refactors the image for better loading.</p>
<p>NOTE:<br />
You may need to regenerate thumbnails to create the blurred image for each attachment image. We recommend using the <a href="https://en-gb.wordpress.org/plugins/regenerate-thumbnails/" rel="nofollow ugc">Regenerate Thumbnails</a> plugin.<br />
This plugin is designed to accommodate the image dimension ratio of the full size version. If you are using cropped images you may experience resizing issues.</p>
<h3>Roadmap</h3>
<h4>0.3.2</h4>
<ol>
<li>Ability to turn off better image loading for post/page content</li>
</ol>
<h4>0.3.3</h4>
<ol>
<li>Ability to select if you want a blurred image or a single color image like Google Images</li>
</ol>
<h4>0.3.4</h4>
<ol>
<li>Load larger images only when in view</li>
</ol>


Better Image Loading

This plugin was inspired by Medium, it makes images load better on page paint. Providing a 'blurred' version of the image at the correct sca …

Nico

<p>Minimalistic lazyloading, loads images as they come into view. Adds native lazyloading to all images and embeds (Chrome) and adds a polyfill (1.07 KiB gzipped) to make it work in all browsers.</p>
<ul>
<li><a href="https://nextgenthemes.com/plugins/native-lazyload-polyfill/" rel="nofollow ugc">Homepage</a></li>
<li><a href="https://gitlab.com/nnico/native-lazyload-polyfill" rel="nofollow ugc">Gitlab</a></li>
</ul>
<h3>How it works technically (if you care)</h3>
<ul>
<li>Adds <code>loading="lazy"</code> to all <code><img></code> and <code><iframe></code> inside <code>the_content</code> and other areas.</li>
<li>Also wraps <code><img></code>, <code><iframe></code> and the content of <code><pictures></code> in <code><noscript></code>.</li>
<li>Adds the <a href="https://github.com/mfranzke/loading-attribute-polyfill" rel="nofollow ugc">loading-attribute-polyfill</a> to do its magic in JavaScript.</li>
</ul>
<p>Feedback/Help is very welcome.</p>


Native Lazyload + Polyfill

Adds native lazyloading to all images and embeds (Chrome) and adds a polyfill to make it work in all browsers.

Better Image Loading vs Native Lazyload + Polyfill