diff --git a/eleventy.config.js b/eleventy.config.js
index 885bc25..ff9f68f 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -51,7 +51,13 @@ export default async function (eleventyConfig) {
 	eleventyConfig.addPlugin(pluginBundle);
 	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
 		extensions: "html",
-		formats: [ "auto" ],
+		formats: [ "webp", "jpeg", null ],
+		widths: [ 400, 800, 1280, null ],
+		defaultAttributes: {
+			loading: "lazy",
+			decoding: "async",
+			sizes: "auto",
+		}
 	})
 
 
diff --git a/public/css/index.css b/public/css/index.css
index c6fc6e1..b7fa5ad 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -54,7 +54,11 @@ html {
 	overflow-y: scroll;
 }
 body {
-	max-width: 80em;
+	max-width: 40em;
+}
+img {
+	max-width: 100%;
+	height: auto;
 }
 
 /* https://www.a11yproject.com/posts/how-to-hide-content/ */