diff --git a/client/homebrew/navbar/print.navitem.jsx b/client/homebrew/navbar/print.navitem.jsx
index ea262cf03..e669214b3 100644
--- a/client/homebrew/navbar/print.navitem.jsx
+++ b/client/homebrew/navbar/print.navitem.jsx
@@ -1,9 +1,25 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Nav from './nav.jsx';
 import { printCurrentBrew } from '@shared/helpers.js';
 
 export default function(){
+	const [printing, setPrinting] = useState(false);
+
+	// listen for print cycle events to display "loading" message since it can take some time.
+	useEffect(()=>{
+		document.addEventListener('print:startprep', handlePrintStartPrep);
+		document.addEventListener('print:finishedprep', handlePrintPrepFinished);
+		return ()=>{
+			document.removeEventListener('print:startprep', handlePrintStartPrep);
+			document.removeEventListener('print:finishedprep', handlePrintPrepFinished);
+		}
+	}, []);
+
+	const handlePrintStartPrep = ()=>{ setPrinting(true); };
+
+	const handlePrintPrepFinished = ()=>{ setPrinting(false);	};
+
 	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
-		get PDF
+		{printing ? 'loading' : 'get PDF'}
 	</Nav.item>;
 };
diff --git a/shared/helpers.js b/shared/helpers.js
index eb3dba6d8..3610ccea4 100644
--- a/shared/helpers.js
+++ b/shared/helpers.js
@@ -105,14 +105,35 @@ const splitTextStyleAndMetadata = (brew)=>{
 	if(typeof brew.tags === 'string') brew.tags = brew.tags ? [brew.tags] : [];
 };
 
-const printCurrentBrew = ()=>{
+const printCurrentBrew = async ()=>{
 	if(window.typeof !== 'undefined') {
-		window.frames['BrewRenderer'].contentWindow.print();
-		//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
-		const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0);
-		node.style.display='none';
-		node.offsetHeight; // accessing this is enough to trigger a reflow
-		node.style.display='';
+		// fire a custom event for the print cycle
+		document.dispatchEvent(new CustomEvent('print:startprep'));
+		try {
+			const iframeDoc = window.frames['BrewRenderer'].contentDocument;
+
+			// get all img elements with lazy loading (currently only elements generated through MarkedJS)
+			const lazyImages = [...iframeDoc.querySelectorAll('img[loading="lazy"]')];
+			lazyImages.forEach((img)=>{ img.loading = 'eager'; });
+
+			// waits for images to load before resolving promise and opening print dialog
+			await Promise.all(
+				lazyImages
+								.filter((img)=>!img.complete)
+								.map((img)=>new Promise((resolve)=>{ img.onload = resolve; img.onerror = resolve; }))
+			);
+
+			window.frames['BrewRenderer'].contentWindow.print();
+
+			//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
+			const node = iframeDoc.getElementsByClassName('brewRenderer').item(0);
+			node.style.display='none';
+			node.offsetHeight; // accessing this is enough to trigger a reflow
+			node.style.display='';
+		} finally {
+			// when lazy load images have all been loaded, and the doc re-rendered for print preview, emit 'finished' event.
+			document.dispatchEvent(new CustomEvent('print:finishedprep'));
+		}
 	}
 };
 
diff --git a/shared/markdown.js b/shared/markdown.js
index d2a108e01..05a564254 100644
--- a/shared/markdown.js
+++ b/shared/markdown.js
@@ -83,7 +83,7 @@ renderer.image = function (token) {
 	if(href === null)
 		return text;
 
-	let out = `<img src="${href}" alt="${text}" style="--HB_src:url(${href});"`;
+	let out = `<img loading="lazy" src="${href}" alt="${text}" style="--HB_src:url(${href});"`;
 	if(title)
 		out += ` title="${title}"`;
 
diff --git a/tests/markdown/mustache-syntax.test.js b/tests/markdown/mustache-syntax.test.js
index 95ca2f58d..378263e58 100644
--- a/tests/markdown/mustache-syntax.test.js
+++ b/tests/markdown/mustache-syntax.test.js
@@ -324,7 +324,7 @@ describe('Injection: When an injection tag follows an element', ()=>{
 		it('Renders an image element with injected style', function() {
 			const source = '![alt text](https://i.imgur.com/hMna6G0.png){position:absolute}';
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute;" src="https://i.imgur.com/hMna6G0.png" alt="alt text"></p>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute;" loading="lazy" src="https://i.imgur.com/hMna6G0.png" alt="alt text"></p>');
 		});
 
 		it('Renders an element modified by only the first of two consecutive injections', function() {
@@ -343,19 +343,19 @@ describe('Injection: When an injection tag follows an element', ()=>{
 		it('Renders an image with added attributes', function() {
 			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e"></p>`);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute; bottom:20px; left:130px; width:220px;" loading="lazy" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e"></p>`);
 		});
 
 		it('Renders an image with "=" in the url, and added attributes', function() {
 			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png?auth=12345&height=1024) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png?auth=12345&height=1024); position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png?auth=12345&height=1024" alt="homebrew mug" a="b and c" d="e"></p>`);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png?auth=12345&height=1024); position:absolute; bottom:20px; left:130px; width:220px;" loading="lazy" src="https://i.imgur.com/hMna6G0.png?auth=12345&height=1024" alt="homebrew mug" a="b and c" d="e"></p>`);
 		});
 
 		it('Renders an image and added attributes with "=" in the value, ', function() {
 			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e,otherUrl="url?auth=12345"}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e" otherUrl="url?auth=12345"></p>`);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute; bottom:20px; left:130px; width:220px;" loading="lazy" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e" otherUrl="url?auth=12345"></p>`);
 		});
 	});
 
diff --git a/tests/markdown/variables.test.js b/tests/markdown/variables.test.js
index 884553703..ad23c87c1 100644
--- a/tests/markdown/variables.test.js
+++ b/tests/markdown/variables.test.js
@@ -315,21 +315,21 @@ describe('Normal Links and Images', ()=>{
 		const source = `![alt text](url)`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
-			<p><img src="url" alt="alt text" style="--HB_src:url(url);"></p>`.trimReturns());
+			<p><img loading="lazy" src="url" alt="alt text" style="--HB_src:url(url);"></p>`.trimReturns());
 	});
 
 	it('Renders normal images with a title', function() {
 		const source = 'An image ![alt text](url "and title")!';
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
-			<p>An image <img src="url" alt="alt text" style="--HB_src:url(url);" title="and title">!</p>`.trimReturns());
+			<p>An image <img loading="lazy" src="url" alt="alt text" style="--HB_src:url(url);" title="and title">!</p>`.trimReturns());
 	});
 
 	it('Applies curly injectors to images', function() {
 		const source = `![alt text](url){width:100px}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
-			<p><img style="--HB_src:url(url); width:100px;" src="url" alt="alt text"></p>`.trimReturns());
+			<p><img style="--HB_src:url(url); width:100px;" loading="lazy" src="url" alt="alt text"></p>`.trimReturns());
 	});
 
 	it('Renders normal links', function() {
@@ -438,25 +438,25 @@ describe('Regression Tests', ()=>{
 	it('Handle Extra spaces in image alt-text 1', function(){
 		const source='![ where is my image??](http://i.imgur.com/hMna6G0.png)';
 		const rendered = Markdown.render(source).trimReturns();
-		expect(rendered).toBe('<p><img src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\"></p>');
+		expect(rendered).toBe('<p><img loading="lazy" src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\"></p>');
 	});
 
 	it('Handle Extra spaces in image alt-text 2', function(){
 		const source='![where  is my image??](http://i.imgur.com/hMna6G0.png)';
 		const rendered = Markdown.render(source).trimReturns();
-		expect(rendered).toBe('<p><img src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\"></p>');
+		expect(rendered).toBe('<p><img loading="lazy" src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\"></p>');
 	});
 
 	it('Handle Extra spaces in image alt-text 3', function(){
 		const source='![where is my image?? ](http://i.imgur.com/hMna6G0.png)';
 		const rendered = Markdown.render(source).trimReturns();
-		expect(rendered).toBe('<p><img src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\"></p>');
+		expect(rendered).toBe('<p><img loading="lazy" src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\"></p>');
 	});
 
 	it('Handle Extra spaces in image alt-text 4', function(){
 		const source='![where is my image??](http://i.imgur.com/hMna6G0.png){height=20%,width=20%}';
 		const rendered = Markdown.render(source).trimReturns();
-		expect(rendered).toBe('<p><img style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\" src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" height=\"20%\" width=\"20%\"></p>');
+		expect(rendered).toBe('<p><img style=\"--HB_src:url(http://i.imgur.com/hMna6G0.png);\" loading="lazy" src=\"http://i.imgur.com/hMna6G0.png\" alt=\"where is my image??\" height=\"20%\" width=\"20%\"></p>');
 	});
 });