webp final using images API

Author: kkartunov

src/shared/components/Contentful/Image/Image.jsx

@@ -73,9 +73,6 @@ export class ImageInner extends React.Component {
       clipSvg,
       animation,
     } = this.props;
-
-    // const imageUrl = _.get(imageSources.source, 'file.url');
-    // const contentType = _.get(imageSources, 'file.contentType');
     const clipSvgUrl = _.get(clipSvg, 'file.url');
     const imgStyle = image.extraStylesForImage ? fixStyle(image.extraStylesForImage) : {};
     if (clipSvgUrl) {
@@ -99,11 +96,11 @@ export class ImageInner extends React.Component {
         {
           animation.animateOnScroll ? (
             <picture>
-              <source srcSet={imageSources.source.file.url} type={imageSources.source.file.contentType} media={imageSources.sourceMobile ? '(min-width: 769px)' : null} />
-              { imageSources.sourceMobile && <source srcSet={imageSources.sourceMobile.file.url} type={imageSources.sourceMobile.file.contentType} media="(max-width: 768px)" /> }
-              { imageSources.sourcePolyfillMobile && <source srcSet={imageSources.sourcePolyfillMobile.file.url} type={imageSources.sourcePolyfillMobile.file.contentType} media="(max-width: 768px)" /> }
+              <source srcSet={imageSources.source.file.url} type={imageSources.source.file.contentType} media="(min-width: 769px)" />
+              { imageSources.sourceMobile && <source srcSet={`${imageSources.sourceMobile.file.url}?w=768`} type={imageSources.sourceMobile.file.contentType} media="(max-width: 768px)" /> }
+              <source srcSet={`${imageSources.source.file.url}?w=768`} type={imageSources.source.file.contentType} media="(max-width: 768px)" />
               <img
-                src={imageSources.sourcePolyfill ? imageSources.sourcePolyfill.file.url : imageSources.source.file.url}
+                src={`${imageSources.source.file.url}?fm=png`}
                 alt={image.alt || image.name}
                 style={imgStyle}
                 data-aos={animation.animateOnScroll}
@@ -119,11 +116,11 @@ export class ImageInner extends React.Component {
             </picture>
           ) : (
             <picture>
-              <source srcSet={imageSources.source.file.url} type={imageSources.source.file.contentType} media={imageSources.sourceMobile ? '(min-width: 769px)' : null} />
-              { imageSources.sourceMobile && <source srcSet={imageSources.sourceMobile.file.url} type={imageSources.sourceMobile.file.contentType} media="(max-width: 768px)" /> }
-              { imageSources.sourcePolyfillMobile && <source srcSet={imageSources.sourcePolyfillMobile.file.url} type={imageSources.sourcePolyfillMobile.file.contentType} media="(max-width: 768px)" /> }
+              <source srcSet={imageSources.source.file.url} type={imageSources.source.file.contentType} media="(min-width: 769px)" />
+              { imageSources.sourceMobile && <source srcSet={`${imageSources.sourceMobile.file.url}?w=768`} type={imageSources.sourceMobile.file.contentType} media="(max-width: 768px)" /> }
+              <source srcSet={`${imageSources.source.file.url}?w=768`} type={imageSources.source.file.contentType} media="(max-width: 768px)" />
               <img
-                src={imageSources.sourcePolyfill ? imageSources.sourcePolyfill.file.url : imageSources.source.file.url}
+                src={`${imageSources.source.file.url}?fm=png`}
                 alt={image.alt || image.name}
                 style={imgStyle}
                 loading="lazy"

src/shared/components/Contentful/Image/index.jsx

@@ -28,11 +28,9 @@ export default function ImageLoader(props) {
         const { fields } = data.entries.items[id];
         const imgId = _.get(fields, 'source.sys.id');
         const imgIdMobile = _.get(fields, 'sourceMobile.sys.id');
-        const imgIdPolyfill = _.get(fields, 'sourcePolyfill.sys.id');
-        const imgIdPolyfillMobile = _.get(fields, 'sourceMobilePolyfill.sys.id');
         const clipSvgId = _.get(fields, 'clipSvg.sys.id');
         const assetIds = _.compact(
-          [imgId, imgIdMobile, imgIdPolyfill, imgIdPolyfillMobile, clipSvgId],
+          [imgId, imgIdMobile, clipSvgId],
         );
         const animationId = _.get(fields, 'animationOnScroll.sys.id');
         const entryIds = [];
@@ -53,8 +51,6 @@ export default function ImageLoader(props) {
                 const imageSources = {
                   source: _.get(items, [imgId, 'fields']),
                   sourceMobile: _.get(items, [imgIdMobile, 'fields']),
-                  sourcePolyfill: _.get(items, [imgIdPolyfill, 'fields']),
-                  sourcePolyfillMobile: _.get(items, [imgIdPolyfillMobile, 'fields']),
                 };
                 let animation = {};
                 if (animationId) {