use lowres images

Author: kaeizen

src/components/design-library-list/use-preview-renderer.js

@@ -9,6 +9,7 @@ import {
 	addPlaceholderForPostsBlock, cleanParse,
 	parseDisabledBlocks, adjustPatternSpacing,
 	replacePlaceholders,
+	replaceImages,
 } from './util'
 
 /**
@@ -165,6 +166,8 @@ export const usePreviewRenderer = (
 			)
 		}
 
+		preview = replaceImages( preview )
+
 		const cleanedBlock = preview.replace( /<!--[\s\S]*?-->/g, '' ) // removes comment
 
 		setBlocks( {

src/components/design-library-list/util.js

@@ -290,6 +290,24 @@ export const addPlaceholderForPostsBlock = ( content, postsPlaceholder, defaultV
 	} )
 }
 
+export const replaceImages = content => {
+	const NEW_IMAGE_STORAGE = cdnUrl.replace( /\/$/, '' ) + '/library-v4/images/low-resolution/'
+
+	// Replace images in the content with low resolution images from the new image storage
+	return content.replace(
+		new RegExp( IMAGE_STORAGE.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ) + '([^\\/\\s]+)\\.(jpeg|jpg|png)', 'g' ),
+		( match, filename, ext ) => {
+			let newExt = ext
+			if ( ext === 'jpeg' || ext === 'jpg' ) {
+				newExt = 'jpg'
+			} else if ( ext === 'png' ) {
+				newExt = 'png'
+			}
+			return NEW_IMAGE_STORAGE + filename + '.' + newExt
+		}
+	)
+}
+
 // Additional styles for blocks to render properly in the preview
 export const getAdditionalStylesForPreview = () => {
 	let styles = ''