diff --git a/assets/scss/blog.scss b/assets/scss/blog.scss
index 44da12e..6bf93c4 100644
--- a/assets/scss/blog.scss
+++ b/assets/scss/blog.scss
@@ -2,6 +2,10 @@
 @import "variables";
 @import "main";
 
+// markup
+
+@import "markup/render-image";
+
 // partials
 @import "partials/sidebar";
 @import "partials/footer";
diff --git a/assets/scss/markup/render-image.scss b/assets/scss/markup/render-image.scss
new file mode 100644
index 0000000..8739db0
--- /dev/null
+++ b/assets/scss/markup/render-image.scss
@@ -0,0 +1,10 @@
+.md-img {
+    margin: 3em;
+    &.with-text { margin-bottom: .5em; }
+    &-text {
+        font-size: .8em;
+        font-weight: 300;
+        margin: 0 0 3em 0;
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
new file mode 100644
index 0000000..7893be9
--- /dev/null
+++ b/layouts/_default/_markup/render-image.html
@@ -0,0 +1,4 @@
+<p class="md-img {{ with .Text }}with-text{{ end }}">
+    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} loading="lazy" />
+</p>
+{{ with .Text }}<p class="md-img-text">{{ . }}</p>{{ end }}
\ No newline at end of file