Created by: Jose Mortellaro
With Inline Image Base64 you can inline specific images directly into the HTML as base64.
You can also use it to disable the native lazy loading for specific images.
After successful activation, you will see two checkboxes when you open an attachment in the media library. One for inlining the image and another one to disable the native lazy loading.
Inlining the first image that appears in the viewport can drastically improve the rendering performance.
The benefits will be higher for light images. A typical example is a light logo.
If you do it for too big images the size of the HTML may become too big.
Inlining images is very useful for images that are not more than 20-30 kB. But it depends on the size of the HTML that you already have.
We suggest perform some speed tests with Google PageSpeed Insights to check the benefits.
Upload an image that already has the right dimensions.
To have a minimum Content Layout Shift, better you assign the width and hight to the image with custom CSS.
In any case, we suggest disabling the native lazy loading for all the images that appear on the viewport during the first rendering.
Disabling the lazy loading for those images can only give benefits.
You will find the settings on every single attachment in the media library, no dedicated settings page for this plugin.
For any kind of issue, don’t hesitate to open a thread on the Support Forum