Add support for lazy loading images

components/config/src/config/markup.rs

@@ -51,6 +51,8 @@ pub struct Markdown {
     /// The compiled extra themes into a theme set
     #[serde(skip_serializing, skip_deserializing)] // not a typo, 2 are need
     pub extra_theme_set: Arc<Option<ThemeSet>>,
+    /// Add loading="lazy" decoding="async" to img tags. When turned on, the alt text must be plain text. Defaults to false
+    pub lazy_async_image: bool,
 }
 
 impl Markdown {
@@ -204,6 +206,7 @@ impl Default for Markdown {
             extra_syntaxes_and_themes: vec![],
             extra_syntax_set: None,
             extra_theme_set: Arc::new(None),
+            lazy_async_image: false,
         }
     }
 }

components/markdown/src/markdown.rs

@@ -252,6 +252,9 @@ pub fn markdown_to_html(
 
     let mut stop_next_end_p = false;
 
+    let lazy_async_image = context.config.markdown.lazy_async_image;
+    let mut is_image_alt = false; // For alt text between Event::Start(Tag::Image(..)) and Event::End(Tag::Image(..))
+
     let mut opts = Options::empty();
     let mut has_summary = false;
     opts.insert(Options::ENABLE_TABLES);
@@ -326,7 +329,13 @@ pub fn markdown_to_html(
         for (event, mut range) in Parser::new_ext(content, opts).into_offset_iter() {
             match event {
                 Event::Text(text) => {
-                    if let Some(ref mut _code_block) = code_block {
+                    if lazy_async_image && is_image_alt {
+                        let mut alt = String::new();
+                        cmark::escape::escape_html(&mut alt, &text)
+                            .expect("Could not write to buffer");
+
+                        events.push(Event::Html(alt.into()));
+                    } else if let Some(ref mut _code_block) = code_block {
                         if contains_shortcode(text.as_ref()) {
                             // mark the start of the code block events
                             let stack_start = events.len();
@@ -387,13 +396,38 @@ pub fn markdown_to_html(
                     events.push(Event::Html("</code></pre>\n".into()));
                 }
                 Event::Start(Tag::Image(link_type, src, title)) => {
-                    if is_colocated_asset_link(&src) {
+                    let link = if is_colocated_asset_link(&src) {
                         let link = format!("{}{}", context.current_page_permalink, &*src);
-                        events.push(Event::Start(Tag::Image(link_type, link.into(), title)));
+                        link.into()
                     } else {
-                        events.push(Event::Start(Tag::Image(link_type, src, title)));
-                    }
+                        src
+                    };
+
+                    events.push(if lazy_async_image {
+                        is_image_alt = true;
+
+                        let mut img_before_alt: String = "<img src=\"".to_string();
+                        cmark::escape::escape_href(&mut img_before_alt, &link)
+                            .expect("Could not write to buffer");
+                        if !title.is_empty() {
+                            img_before_alt
+                                .write_str("\" title=\"")
+                                .expect("Could not write to buffer");
+                            cmark::escape::escape_href(&mut img_before_alt, &title)
+                                .expect("Could not write to buffer");
+                        }
+                        img_before_alt.write_str("\" alt=\"").expect("Could not write to buffer");
+                        Event::Html(img_before_alt.into())
+                    } else {
+                        Event::Start(Tag::Image(link_type, link, title))
+                    });
                 }
+                Event::End(Tag::Image(..)) => events.push(if lazy_async_image {
+                    is_image_alt = false;
+                    Event::Html("\" loading=\"lazy\" decoding=\"async\" />".into())
+                } else {
+                    event
+                }),
                 Event::Start(Tag::Link(link_type, link, title)) if link.is_empty() => {
                     error = Some(Error::msg("There is a link that is missing a URL"));
                     events.push(Event::Start(Tag::Link(link_type, "#".into(), title)));

components/markdown/tests/img.rs

@@ -0,0 +1,48 @@
+mod common;
+use config::Config;
+
+#[test]
+fn can_transform_image() {
+    // normal image
+    let rendered = common::render("![haha](https://example.com/abc.jpg)").unwrap().body;
+    assert_eq!(rendered, "<p><img src=\"https://example.com/abc.jpg\" alt=\"haha\" /></p>\n");
+
+    // alt text with style
+    let rendered = common::render("![__ha__*ha*](https://example.com/abc.jpg)").unwrap().body;
+    assert_eq!(rendered, "<p><img src=\"https://example.com/abc.jpg\" alt=\"haha\" /></p>\n");
+
+    // alt text with link
+    let rendered =
+        common::render("![ha[ha](https://example.com)](https://example.com/abc.jpg)").unwrap().body;
+    assert_eq!(rendered, "<p><img src=\"https://example.com/abc.jpg\" alt=\"haha\" /></p>\n");
+}
+
+#[test]
+fn can_add_lazy_loading_and_async_decoding() {
+    // normal alt text
+    let mut config = Config::default_for_test();
+    config.markdown.lazy_async_image = true;
+    let rendered =
+        common::render_with_config("![haha](https://example.com/abc.jpg)", config.clone())
+            .unwrap()
+            .body;
+    assert_eq!(rendered, "<p><img src=\"https://example.com/abc.jpg\" alt=\"haha\" loading=\"lazy\" decoding=\"async\" /></p>\n");
+
+    // Below is acceptable, but not recommended by CommonMark
+
+    // alt text with style
+    let rendered =
+        common::render_with_config("![__ha__*ha*](https://example.com/abc.jpg)", config.clone())
+            .unwrap()
+            .body;
+    assert_eq!(rendered, "<p><img src=\"https://example.com/abc.jpg\" alt=\"<strong>ha</strong><em>ha</em>\" loading=\"lazy\" decoding=\"async\" /></p>\n");
+
+    // alt text with link
+    let rendered = common::render_with_config(
+        "![ha[ha](https://example.com)](https://example.com/abc.jpg)",
+        config.clone(),
+    )
+    .unwrap()
+    .body;
+    assert_eq!(rendered, "<p><img src=\"https://example.com/abc.jpg\" alt=\"ha<a href=\"https://example.com\">ha</a>\" loading=\"lazy\" decoding=\"async\" /></p>\n");
+}

docs/content/documentation/getting-started/configuration.md

@@ -122,6 +122,11 @@ external_links_no_referrer = false
 # For example, `...` into `…`, `"quote"` into `“curly”` etc
 smart_punctuation = false
 
+# Whether to set decoding="async" and loading="lazy" for all images
+# When turned on, the alt text must be plain text.
+# For example, `![xx](...)` is ok but `![*x*x](...)` isn’t ok
+lazy_async_image = false
+
 # Configuration of the link checker.
 [link_checker]
 # Skip link checking for external URLs that start with these prefixes