RankLetter / commonmark-ext-seo-image

An SEO-friendly image extension for league/commonmark

SEO Image Extension for league/commonmark

🚧️ This extension is work in progress. Until 1.0 is release breaking changes might happen. Use with caution.

This image extension for league/commonmark adds:

• the lazy loading attribute as well as
• explicit height and width attributes to keep the layout shifts to a minimum. This works for both absolute URLs and local images.

The package is largely based on simonvomeyser/commonmark-ext-lazy-image! It is licensed under the same MIT license.

Install

composer require rankletter/commonmark-ext-seo-image

Example

Assuming /path/to/image.jpg points to an image with a size of 1024x512 pixels, the following example

use League\CommonMark\Environment;
use RankLetter\CommonMarkImageExtension\SEOImageExtension;

$this->environment = Environment::createCommonMarkEnvironment();
$this->environment->addExtension(new SEOImageExtension);

$converter = new CommonMarkConverter([], $this->environment);
$html = $converter->convertToHtml('![alt text](/path/to/image.jpg)');

This creates the following HTML

<img src="/path/to/image.jpg" alt="alt text" loading="lazy" width="1024" height="512" />

Further Options

Further options to replicate the lazy loading using JavaScript packages are supported. For more details please check the original package. This functionality will remain for now.