diff --git a/layouts/shortcodes/smallimg.html b/layouts/shortcodes/smallimg.html
new file mode 100644
index 0000000..4cae5b7
--- /dev/null
+++ b/layouts/shortcodes/smallimg.html
@@ -0,0 +1,11 @@
+<img src="{{ index .Params "src" }}" 
+    {{- if isset .Params "alt" }} alt="{{ index .Params "alt"}}" {{ end -}}
+    class="small-img {{ if isset .Params "smartfloat" -}}
+        {{- if eq .Params.smartfloat "left" -}}
+            smartfloat-left
+        {{- else if eq .Params.smartfloat "right" -}}
+            smartfloat-right
+        {{- end -}}
+    {{- end }}"
+    {{- if isset .Params "width" }} style="width: {{ index .Params "width" }};" {{- end -}}
+/>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 332d185..4a747b0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -282,6 +282,12 @@ strong {
     padding-right: 1.2rem !important;
     box-sizing: border-box !important;
 }
+.small-img {
+    width: unset;
+    max-width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+}
 .muted-text {
     color: #7A7B7C;
 }
@@ -297,9 +303,10 @@ h1, h2, h3, h4, h5, h6 {
     margin: 1.5em 0 0.7em 0;
 }
 img {
+    display: block;
     width: 100%;
     height: auto;
-    margin: 1em 0;
+    margin: 1.5em 0;
 }
 blockquote {
     border-left: 0.3em solid #D1D1D1;
@@ -427,6 +434,14 @@ footer {
     .button {
         border-radius: 0.2rem;
     }
+    .smartfloat-right {
+        float: right;
+        margin-left: 1em;
+    }
+    .smartfloat-left {
+        float: left;
+        margin-right: 1em;
+    }
     code {
         border-radius: 0.2rem;
     }