Automatically set image size

src/posts/DescriptionListStyling.md

@@ -10,8 +10,7 @@ The `<dl>` element is useful for displaying metadata or a read only version of a
 
 These are some basic styles to use by default:
 
-<img src="/img/BasicDescriptionList.png" alt="Basic Description List Styles"
-	width="186" height="152" />
+![Basic Description List Styles](/img/BasicDescriptionList_2x.png)
 
 ```html
 <dl>
@@ -52,8 +51,7 @@ dd + dd {
 
 This styling will put the `<dt>` elements in one column and the `<dd>` elements into another. This can cause issues on small screens, so it supports breakpoints where it will fall back to the default style.
 
-<img src="/img/ColumnsDescriptionList.png" alt="Side-By-Side Columns Description List Styles"
-	width="242" height="153" />
+![Side-By-Side Columns Description List Styles](/img/ColumnsDescriptionList_2x.png)
 
 ```html
 <dl class="dl-columns-tablet">
@@ -125,8 +123,7 @@ $wsu-breakpoint-map: (
 
 You can also mix this with the default stacked style:
 
-<img src="/img/MixedDescriptionList.png" alt="Mixed Description List Styles"
-	width="252" height="160" />
+![Mixed Description List Styles](/img/MixedDescriptionList_2x.png)
 
 ```html
 <dl class="dl-columns-phone">
@@ -150,8 +147,7 @@ You can also mix this with the default stacked style:
 
 This styling is for a list of links with a description. This is particularly useful for index pages that have an actual list of pages:
 
-<img src="/img/IndexDescriptionList.png" alt="Mixed Description List Styles"
-	width="261" height="129" />
+![Index Description List](/img/IndexDescriptionList_2x.png)
 
 ```html
 <dl class="index-list">