Mosne / Paolo Tesei

<p>This plugin extends the core/cover block with separate mobile and desktop background images and sizes.<br />
This increases the performance of the website by loading the smaller image on mobile devices and scores better in the Core Web Vitals.</p>
<h3>Configuration</h3>
<ul>
<li>In the Settings > Mosne Hero page you can configure the mobile image size and the breakpoint at which the mobile image is displayed</li>
<li>Note that this is a new size, so you will need to regenerate the thumbnails using a plugin like Regenerate Thumbnails for existing images to use the new sizes.</li>
</ul>
<h3>In the Editor</h3>
<ul>
<li>Add a cover block and select the “Hero Cover (Mobile & Desktop)” variation.</li>
<li>Now you can see a new panel with the following options:</li>
<li>Mobile image : You can also select a custom image for the desktop and the mobile view.</li>
<li>Mobile image size : choose the size that perfectly fits your design.</li>
<li>Focal point : You can also select a focal point for the mobile image.</li>
<li>Alt text : Add alternative text for the mobile image. (Leave empty if it is a decorative image)</li>
<li>High fetch priority : force the high fetch priority attribute if the image is above the fold.</li>
<li>If you use a featured image, leave the mobile image empty and the plugin will use the mobile size for the featured image for the mobile view.</li>
</ul>
<h3>Key Features</h3>
<ul>
<li>Separate mobile and desktop background images and sizes</li>
<li>Configure the mobile image size and the breakpoint at which the mobile image is displayed</li>
<li>It also works with the featured image</li>
<li>Focal point switching for the mobile image</li>
<li>Alt text switching for the mobile image</li>
<li>High fetch priority for the mobile image</li>
<li>Performance-optimized and lightweight</li>
<li>No block library required</li>
<li>Primarily built with native WordPress components</li>
</ul>
<h3>Limitations</h3>
<ul>
<li>The mobile image is not displayed in the block editor</li>
<li>Video background is not supported</li>
<li>Repeated background is not supported</li>
<li>Parallax background is not supported</li>
</ul>
<h3>Stay Connected</h3>
<ul>
<li><a href="https://github.com/mosne/mosne-hero" rel="nofollow ugc">View on GitHub</a></li>
<li><a href="https://mosne.it/" rel="nofollow ugc">Visit my website</a></li>
<li><a href="https://x.com/mosne" rel="nofollow ugc">Follow on Twitter</a></li>
</ul>


Mosne Hero

This plugin extends the core/cover block with separate mobile and desktop background images and sizes.

mmichel

<p>Easily insert a cover background into your website. Select on per page/post basis on admin edit post screen.<br />
When setting multiple backgrounds a crossFade will be used.</p>
<h3>Cover CrossFade Background</h3>
<ol>
<li>Set cover background</li>
<li>crossFade images (backgrounds)</li>
<li>Select per page or post.</li>
</ol>


Cover CrossFade Background (CCB)

Easily insert a cover background into your website. Select on per page/post basis. Optionally set multiple backgrounds to crossFade.

Mosne Hero vs Cover CrossFade Background (CCB)