Instant Search: add basic Photon support (#13998)

* Add PhotonImage component

* Bump default dimensions to 300x300

* Bump asset size limit to 100kb

modules/search/instant-search/components/photon-image.jsx

@@ -0,0 +1,15 @@
+/** @jsx h */
+
+/**
+ * External dependencies
+ */
+import { h } from 'preact';
+import photon from 'photon';
+
+const PhotonImage = ( { src, maxWidth = 300, maxHeight = 300, alt, ...otherProps } ) => {
+	const photonSrc = photon( src, { resize: `${ maxWidth },${ maxHeight }` } );
+
+	return <img src={ photonSrc } alt={ alt } { ...otherProps } />;
+};
+
+export default PhotonImage;

modules/search/instant-search/components/search-result-product.jsx

@@ -9,6 +9,7 @@ import { h, Component } from 'preact';
  * Internal dependencies
  */
 import SearchResultComments from './search-result-comments';
+import PhotonImage from './photon-image';
 
 class SearchResultProduct extends Component {
 	render() {
@@ -34,7 +35,7 @@ class SearchResultProduct extends Component {
 					/>
 				</h3>
 				{ firstImage && (
-					<img
+					<PhotonImage
 						className="jetpack-instant-search__search-result-product-img"
 						src={ `//${ firstImage }` }
 						alt=""

webpack.config.js

@@ -30,7 +30,8 @@ const sharedWebpackConfig = {
 	devtool: isDevelopment ? 'source-map' : false,
 };
 
-// We export two configuration files: One for admin.js, and one for static.jsx. The latter produces pre-rendered HTML.
+// We export two main configuration files: One for admin.js, and one for static.jsx. The latter produces pre-rendered HTML.
+// The third configuration file is for Jetpack Search's Preact app.
 module.exports = [
 	{
 		...sharedWebpackConfig,