diff --git a/packages/customize-widgets/src/components/welcome-guide/index.js b/packages/customize-widgets/src/components/welcome-guide/index.js
index c89460eed52192..65cd3ebe2353a1 100644
--- a/packages/customize-widgets/src/components/welcome-guide/index.js
+++ b/packages/customize-widgets/src/components/welcome-guide/index.js
@@ -21,20 +21,18 @@ export default function WelcomeGuide( { sidebar } ) {
 
 	return (
 		<div className="customize-widgets-welcome-guide">
-			<img
-				className="customize-widgets-welcome-guide__image customize-widgets-welcome-guide__image__prm-np"
-				alt=""
-				src="https://s.w.org/images/block-editor/welcome-editor.gif"
-				width="312"
-				height="240"
-			/>
-			<img
-				className="customize-widgets-welcome-guide__image customize-widgets-welcome-guide__image__prm-r"
-				alt=""
-				src="https://s.w.org/images/block-editor/welcome-editor.svg"
-				width="312"
-				height="240"
-			/>
+			<picture className="customize-widgets-welcome-guide__image">
+				<source
+					srcSet="https://s.w.org/images/block-editor/welcome-editor.svg"
+					media="(prefers-reduced-motion: reduce)"
+				/>
+				<img
+					src="https://s.w.org/images/block-editor/welcome-editor.gif"
+					width="312"
+					height="240"
+					alt=""
+				/>
+			</picture>
 			<h1 className="customize-widgets-welcome-guide__heading">
 				{ __( 'Welcome to block Widgets' ) }
 			</h1>
diff --git a/packages/customize-widgets/src/components/welcome-guide/style.scss b/packages/customize-widgets/src/components/welcome-guide/style.scss
index a558ed644e8ed4..bccbb899b89098 100644
--- a/packages/customize-widgets/src/components/welcome-guide/style.scss
+++ b/packages/customize-widgets/src/components/welcome-guide/style.scss
@@ -7,20 +7,6 @@
 
 	&__image {
 		height: 240px;
-
-		&__prm-r {
-			display: none;
-		}
-
-		@media (prefers-reduced-motion: reduce) {
-			&__prm-r {
-				display: block;
-			}
-
-			&__prm-np {
-				display: none;
-			}
-		}
 	}
 
 	// Extra specificity to override `.wrap h1` styles.
diff --git a/packages/edit-post/src/components/welcome-guide/default.js b/packages/edit-post/src/components/welcome-guide/default.js
index f5f854420daa01..d83eab0fa13ddb 100644
--- a/packages/edit-post/src/components/welcome-guide/default.js
+++ b/packages/edit-post/src/components/welcome-guide/default.js
@@ -9,16 +9,7 @@ import { createInterpolateElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-/**
- * Internal dependencies
- */
-import {
-	CanvasImage,
-	EditorImage,
-	BlockLibraryImage,
-	DocumentationImage,
-	InserterIconImage,
-} from './images';
+import WelcomeGuideImage from './image';
 import { store as editPostStore } from '../../store';
 
 export default function WelcomeGuideDefault() {
@@ -32,7 +23,12 @@ export default function WelcomeGuideDefault() {
 			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
 			pages={ [
 				{
-					image: <CanvasImage />,
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-canvas.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-canvas.gif"
+						/>
+					),
 					content: (
 						<>
 							<h1 className="edit-post-welcome-guide__heading">
@@ -47,7 +43,12 @@ export default function WelcomeGuideDefault() {
 					),
 				},
 				{
-					image: <EditorImage />,
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-editor.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-editor.gif"
+						/>
+					),
 					content: (
 						<>
 							<h1 className="edit-post-welcome-guide__heading">
@@ -62,7 +63,12 @@ export default function WelcomeGuideDefault() {
 					),
 				},
 				{
-					image: <BlockLibraryImage />,
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-library.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-library.gif"
+						/>
+					),
 					content: (
 						<>
 							<h1 className="edit-post-welcome-guide__heading">
@@ -75,7 +81,10 @@ export default function WelcomeGuideDefault() {
 									),
 									{
 										InserterIconImage: (
-											<InserterIconImage className="edit-post-welcome-guide__inserter-icon" />
+											<img
+												alt={ __( 'inserter' ) }
+												src="data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='2' fill='%231E1E1E'/%3E%3Cpath d='M9.22727 4V14M4 8.77273H14' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E%0A"
+											/>
 										),
 									}
 								) }
@@ -84,7 +93,12 @@ export default function WelcomeGuideDefault() {
 					),
 				},
 				{
-					image: <DocumentationImage />,
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-documentation.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-documentation.gif"
+						/>
+					),
 					content: (
 						<>
 							<h1 className="edit-post-welcome-guide__heading">
diff --git a/packages/edit-post/src/components/welcome-guide/image.js b/packages/edit-post/src/components/welcome-guide/image.js
new file mode 100644
index 00000000000000..6e95913c4254c7
--- /dev/null
+++ b/packages/edit-post/src/components/welcome-guide/image.js
@@ -0,0 +1,11 @@
+export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+	return (
+		<picture className="edit-post-welcome-guide__image">
+			<source
+				srcSet={ nonAnimatedSrc }
+				media="(prefers-reduced-motion: reduce)"
+			/>
+			<img src={ animatedSrc } width="312" height="240" alt="" />
+		</picture>
+	);
+}
diff --git a/packages/edit-post/src/components/welcome-guide/images.js b/packages/edit-post/src/components/welcome-guide/images.js
deleted file mode 100644
index a3961ad15dae03..00000000000000
--- a/packages/edit-post/src/components/welcome-guide/images.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-export const CanvasImage = ( props ) => (
-	<>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-np"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-canvas.gif"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-r"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-canvas.svg"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-	</>
-);
-
-export const EditorImage = ( props ) => (
-	<>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-np"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-editor.gif"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-r"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-editor.svg"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-	</>
-);
-
-export const BlockLibraryImage = ( props ) => (
-	<>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-np"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-library.gif"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-r"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-library.svg"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-	</>
-);
-
-export const DocumentationImage = ( props ) => (
-	<>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-np"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-documentation.gif"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-r"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-documentation.svg"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-	</>
-);
-
-export const TemplateEditorImage = ( props ) => (
-	<>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-np"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-template-editor.gif"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-		<img
-			className="edit-post-welcome-guide__image edit-post-welcome-guide__image__prm-r"
-			alt=""
-			src="https://s.w.org/images/block-editor/welcome-template-editor.svg"
-			width="312"
-			height="240"
-			{ ...props }
-		/>
-	</>
-);
-
-export const InserterIconImage = ( props ) => (
-	<img
-		alt={ __( 'inserter' ) }
-		src="data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='18' height='18' rx='2' fill='%231E1E1E'/%3E%3Cpath d='M9.22727 4V14M4 8.77273H14' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E%0A"
-		{ ...props }
-	/>
-);
diff --git a/packages/edit-post/src/components/welcome-guide/style.scss b/packages/edit-post/src/components/welcome-guide/style.scss
index 1697a694b6291e..cfe797835d274f 100644
--- a/packages/edit-post/src/components/welcome-guide/style.scss
+++ b/packages/edit-post/src/components/welcome-guide/style.scss
@@ -1,26 +1,10 @@
 .edit-post-welcome-guide {
-	$image-height: 240px;
-	$image-width: 312px;
 	width: 312px;
 
 	&__image {
 		background: #00a0d2;
 		height: 240px;
 		margin: 0 0 $grid-unit-20;
-
-		&__prm-r {
-			display: none;
-		}
-
-		@media (prefers-reduced-motion: reduce) {
-			&__prm-r {
-				display: block;
-			}
-
-			&__prm-np {
-				display: none;
-			}
-		}
 	}
 
 	&__heading {
diff --git a/packages/edit-post/src/components/welcome-guide/template.js b/packages/edit-post/src/components/welcome-guide/template.js
index 2a4384722af24a..360b9c768ed0c1 100644
--- a/packages/edit-post/src/components/welcome-guide/template.js
+++ b/packages/edit-post/src/components/welcome-guide/template.js
@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { TemplateEditorImage } from './images';
+import WelcomeGuideImage from './image';
 import { store as editPostStore } from '../../store';
 
 export default function WelcomeGuideTemplate() {
@@ -22,7 +22,12 @@ export default function WelcomeGuideTemplate() {
 			onFinish={ () => toggleFeature( 'welcomeGuideTemplate' ) }
 			pages={ [
 				{
-					image: <TemplateEditorImage />,
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-template-editor.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-template-editor.gif"
+						/>
+					),
 					content: (
 						<>
 							<h1 className="edit-post-welcome-guide__heading">
diff --git a/packages/edit-widgets/src/components/welcome-guide/index.js b/packages/edit-widgets/src/components/welcome-guide/index.js
index b9d273f497d537..1dbaa753a87192 100644
--- a/packages/edit-widgets/src/components/welcome-guide/index.js
+++ b/packages/edit-widgets/src/components/welcome-guide/index.js
@@ -54,22 +54,10 @@ export default function WelcomeGuide() {
 			pages={ [
 				{
 					image: (
-						<>
-							<img
-								className="edit-widgets-welcome-guide__image edit-widgets-welcome-guide__image__prm-np"
-								alt=""
-								src="https://s.w.org/images/block-editor/welcome-canvas.gif"
-								width="312"
-								height="240"
-							/>
-							<img
-								className="edit-widgets-welcome-guide__image edit-widgets-welcome-guide__image__prm-r"
-								alt=""
-								src="https://s.w.org/images/block-editor/welcome-canvas.svg"
-								width="312"
-								height="240"
-							/>
-						</>
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-canvas.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-canvas.gif"
+						/>
 					),
 					content: (
 						<>
@@ -120,22 +108,10 @@ export default function WelcomeGuide() {
 				},
 				{
 					image: (
-						<>
-							<img
-								className="edit-widgets-welcome-guide__image edit-widgets-welcome-guide__image__prm-np"
-								alt=""
-								src="https://s.w.org/images/block-editor/welcome-editor.gif"
-								width="312"
-								height="240"
-							/>
-							<img
-								className="edit-widgets-welcome-guide__image edit-widgets-welcome-guide__image__prm-r"
-								alt=""
-								src="https://s.w.org/images/block-editor/welcome-editor.svg"
-								width="312"
-								height="240"
-							/>
-						</>
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-editor.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-editor.gif"
+						/>
 					),
 					content: (
 						<>
@@ -152,22 +128,10 @@ export default function WelcomeGuide() {
 				},
 				{
 					image: (
-						<>
-							<img
-								className="edit-widgets-welcome-guide__image edit-widgets-welcome-guide__image__prm-np"
-								alt=""
-								src="https://s.w.org/images/block-editor/welcome-library.gif"
-								width="312"
-								height="240"
-							/>
-							<img
-								className="edit-widgets-welcome-guide__image edit-widgets-welcome-guide__image__prm-r"
-								alt=""
-								src="https://s.w.org/images/block-editor/welcome-library.svg"
-								width="312"
-								height="240"
-							/>
-						</>
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-library.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-library.gif"
+						/>
 					),
 					content: (
 						<>
@@ -195,22 +159,10 @@ export default function WelcomeGuide() {
 				},
 				{
 					image: (
-						<>
-							<img
-								className="edit-widgets-welcome-guide__image edit-widgets-welcome-guide__image__prm-np"
-								alt=""
-								src="https://s.w.org/images/block-editor/welcome-documentation.gif"
-								width="312"
-								height="240"
-							/>
-							<img
-								className="edit-widgets-welcome-guide__image edit-widgets-welcome-guide__image__prm-r"
-								alt=""
-								src="https://s.w.org/images/block-editor/welcome-documentation.svg"
-								width="312"
-								height="240"
-							/>
-						</>
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-documentation.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-documentation.gif"
+						/>
 					),
 					content: (
 						<>
@@ -236,3 +188,15 @@ export default function WelcomeGuide() {
 		/>
 	);
 }
+
+function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+	return (
+		<picture className="edit-widgets-welcome-guide__image">
+			<source
+				srcSet={ nonAnimatedSrc }
+				media="(prefers-reduced-motion: reduce)"
+			/>
+			<img src={ animatedSrc } width="312" height="240" alt="" />
+		</picture>
+	);
+}
diff --git a/packages/edit-widgets/src/components/welcome-guide/style.scss b/packages/edit-widgets/src/components/welcome-guide/style.scss
index f05b921db35510..776536b8db3b52 100644
--- a/packages/edit-widgets/src/components/welcome-guide/style.scss
+++ b/packages/edit-widgets/src/components/welcome-guide/style.scss
@@ -1,26 +1,10 @@
 .edit-widgets-welcome-guide {
-	$image-height: 240px;
-	$image-width: 312px;
 	width: 312px;
 
 	&__image {
 		background: #00a0d2;
 		height: 240px;
 		margin: 0 0 $grid-unit-20;
-
-		&__prm-r {
-			display: none;
-		}
-
-		@media (prefers-reduced-motion: reduce) {
-			&__prm-r {
-				display: block;
-			}
-
-			&__prm-np {
-				display: none;
-			}
-		}
 	}
 
 	&__heading {