Atte Liimatainen

<p>Generates base64 encoded, downscaled and blurred versions of media library’s images, which can be used f.e. as a placeholder.</p>
<h3>Inspiration</h3>
<p>After Wolt showcased their <a href="https://blurha.sh/" rel="nofollow ugc">Blurhash</a> technique, I wanted to make something similar to WordPress. Instead of encoding images to base83 like the food delivery company does, I went with base64 so development experience was easier.</p>
<h3>How to start using the plugin</h3>
<ul>
<li>Install and activate this plugin in your environment
<ul>
<li>The plugin should generate blurs for each image on the activation.</li>
</ul>
</li>
<li>Check an image’s details in your media library. It should have listing of all generated blurs.</li>
<li>To get a blur to a template, use <code>get_post_meta()</code>. Check example theme in <a href="https://github.com/AttLii/image-blur" rel="nofollow ugc">plugin’s repository</a></li>
</ul>
<h3>Customization</h3>
<p>The plugin provides few filters, so developers can modify generated blur images to their needs. By default, generated images are 8 pixels wide and passed once through gaussian blur function, which will result in roughly 250-1000 characters long string. To change these, use following hooks:</p>
<pre><code>function modify_image_blur_width( int $width ): int {
  return 15;
}
add_filter("image-blur-modify-width", "modify_image_blur_width");

function modify_gaussian_blur_strength( int $strength ): int {
  return 10;
}
add_filter("image-blur-modify-gaussian-blur-strength", "modify_gaussian_blur_strength");
</code></pre>


Image Blur

Generates base64 encoded, downscaled and blurred versions of media library's images, which can be used f.e. as a placeholder.

shivi66

Pagespeedonline

Hansoftech

<p>A plugin to base64 encode and lazy loading of your website images.<br />
Base64 helps to encode smaller images of your pages and post with options to include larger size images by adding open graph tag in-order to preserve SEO.</p>
<p>Lazy loading of images is a feature where the original image is not shown till the location of the image is reached. By default thumbnail images are shown. Images which are not required to be lazy loaded can be excluded from the list.</p>
<h4>About us</h4>
<p>We are a team of WordPress experts working on Website Speed optimization.<br />
Catch us at <a href="https://pagespeed.online" rel="nofollow ugc">https://pagespeed.online</a> to speed up your WordPress site.</p>


Lazy Load with Base64 for Pagespeed online

Lazy Load with Base64 for Pagespeed online plugin encode small images by preserving SEO and lazy load feature display images only when the user reache …

Image Blur vs Lazy Load with Base64 for Pagespeed online