diff --git a/src/Image/Image.css b/src/Image/Image.css
new file mode 100644
index 00000000..dd45d903
--- /dev/null
+++ b/src/Image/Image.css
@@ -0,0 +1,5 @@
+.dynamic-image picture, img, source {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
diff --git a/src/Image/Image.jsx b/src/Image/Image.jsx
new file mode 100644
index 00000000..3f3d5532
--- /dev/null
+++ b/src/Image/Image.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import './Image.css'
+
+// Creates a dynamically loaded image.
+const Image = ({ src, type, alt, lazy, width, height, className, style }) => {
+  const lazyLoading = (lazy === true)
+  const imgalt = alt || 'Bytes of Love image'
+  return (
+    <div className={className} style={style}>
+      <div style={{ width, height }}>
+        <picture className='dynamic-image'>
+          <source
+            loading={(lazyLoading) ? 'lazy' : ''}
+            alt={imgalt} type={type} src={src} width={width}
+            height={height}
+          />
+          <img
+            loading={(lazyLoading) ? 'lazy' : ''}
+            alt={imgalt} type={type} src={src} width={width}
+            height={height}
+          />
+        </picture>
+      </div>
+    </div>
+  )
+}
+
+export default Image