diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index 0b76d45..d24b26b 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/web/src/ui/timeline/TimelineEvent.tsx
@@ -15,12 +15,12 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import React from "react"
 import { RoomStateStore } from "../../api/statestore.ts"
+import { getMediaURL } from "../../api/media.ts"
 import { DBEvent, MemberEventContent } from "../../api/types"
 import HiddenEvent from "./content/HiddenEvent.tsx"
 import MessageBody from "./content/MessageBody.tsx"
 import { EventContentProps } from "./content/props.ts"
 import "./TimelineEvent.css"
-import { getMediaURL } from "../../api/media.ts"
 
 export interface TimelineEventProps {
 	room: RoomStateStore
@@ -51,7 +51,7 @@ const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
 	// }
 	return <div className="timeline-event">
 		<div className="sender-avatar">
-			<img src={getMediaURL(memberEvtContent?.avatar_url)} alt="" />
+			<img loading="lazy" src={getMediaURL(memberEvtContent?.avatar_url)} alt="" />
 		</div>
 		<div className="sender-and-content">
 			<div className="event-sender-and-time">
diff --git a/web/src/ui/timeline/content/MessageBody.tsx b/web/src/ui/timeline/content/MessageBody.tsx
index f58e3d9..b3e1f35 100644
--- a/web/src/ui/timeline/content/MessageBody.tsx
+++ b/web/src/ui/timeline/content/MessageBody.tsx
@@ -79,15 +79,15 @@ const MessageBody = ({ event }: EventContentProps) => {
 	case "m.image": {
 		const openLightbox = use(LightboxContext)
 		const style = calculateMediaSize(content.info?.w, content.info?.h)
-		if (content.url) {
-			return <div className="media-container" style={style.container}>
-				<img style={style.media} src={getMediaURL(content.url)} alt={content.body} onClick={openLightbox}/>
-			</div>
-		} else if (content.file) {
-			return <div className="media-container" style={style.container}>
-				<img style={style.media} src={getMediaURL(content.file.url)} alt={content.body} onClick={openLightbox}/>
-			</div>
-		}
+		return <div className="media-container" style={style.container}>
+			<img
+				loading="lazy"
+				style={style.media}
+				src={getMediaURL(content.url ?? content.file?.url)}
+				alt={content.body}
+				onClick={openLightbox}
+			/>
+		</div>
 	}
 	}
 	return <code>{`{ "type": "${event.type}" }`}</code>
diff --git a/web/src/util/html.ts b/web/src/util/html.ts
index 77adabd..1a04718 100644
--- a/web/src/util/html.ts
+++ b/web/src/util/html.ts
@@ -85,6 +85,7 @@ export const transformTags: NonNullable<sanitizeHtml.IOptions["transformTags"]>
 		}
 
 		attribs.src = getMediaURL(src)!
+		attribs.loading = "lazy"
 		return { tagName, attribs }
 	},
 	"code": function(tagName: string, attribs: sanitizeHtml.Attributes) {
@@ -188,7 +189,7 @@ export const sanitizeHtmlParams: sanitizeHtml.IOptions = {
 		// eslint-disable-next-line id-length
 		a: ["href", "name", "target", "rel"], // remote target: custom to matrix
 		// img tags also accept width/height, we just map those to max-width & max-height during transformation
-		img: ["src", "alt", "title", "style", "data-mx-emoticon"],
+		img: ["src", "alt", "title", "style", "loading", "data-mx-emoticon"],
 		ol: ["start"],
 		code: ["class"], // We don't actually allow all classes, we filter them in transformTags
 	},