diff --git a/storefront/components/Basic/Icon/IconImage.tsx b/storefront/components/Basic/Icon/IconImage.tsx
index e2ffe078fd..c2743edab8 100644
--- a/storefront/components/Basic/Icon/IconImage.tsx
+++ b/storefront/components/Basic/Icon/IconImage.tsx
@@ -1,3 +1,4 @@
+import { Image } from 'components/Basic/Image/Image';
 import { HTMLAttributes } from 'react';
 import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault';
 
@@ -5,14 +6,14 @@ type NativeProps = ExtractNativePropsFromDefault<HTMLAttributes<HTMLElement>, ne
 
 type IconImageProps = NativeProps & {
     icon: string;
-    alt: string | undefined;
+    alt: string;
     width?: number;
     height?: number;
 };
 
 export const IconImage: FC<IconImageProps> = ({ icon, height, width, ...props }) => {
     return (
-        <img
+        <Image
             height={height !== undefined ? height : '24'}
             src={`/icons/${icon}.png`}
             width={width !== undefined ? width : '24'}
diff --git a/storefront/components/Basic/Image/Image.tsx b/storefront/components/Basic/Image/Image.tsx
index 969d9f2c08..6b6e6c4457 100644
--- a/storefront/components/Basic/Image/Image.tsx
+++ b/storefront/components/Basic/Image/Image.tsx
@@ -1,58 +1,21 @@
-import { ImageFragmentApi } from 'graphql/generated';
 import { twMergeCustom } from 'helpers/twMerge';
-import { ImgHTMLAttributes } from 'react';
+import NextImage, { ImageProps as NextImageProps } from 'next/image';
+import { useState } from 'react';
 
 type ImageProps = {
-    image: ImageFragmentApi | null | undefined;
-    alt: string | null | undefined;
-    loading?: ImgHTMLAttributes<HTMLImageElement>['loading'];
-    width?: string | number;
-    height?: string | number;
-    wrapperClassName?: string;
-};
-
-const getDataTestId = (dataTestId?: string) => dataTestId ?? 'basic-image';
-
-export const Image: FC<ImageProps> = ({
-    image,
-    alt,
-    loading,
-    dataTestId,
-    width,
-    height,
-    className,
-    wrapperClassName,
-}) => {
-    const imageTwClass = twMergeCustom(
-        'object-contain [image-rendering:-webkit-optimize-contrast] max-w-full max-h-full mx-auto',
-        className,
-    );
+    src: NextImageProps['src'] | undefined | null;
+} & Omit<NextImageProps, 'src'>;
 
-    if (!image) {
-        return (
-            <div className={wrapperClassName}>
-                <img
-                    alt={alt || ''}
-                    className={twMergeCustom('h-auto w-full', imageTwClass)}
-                    data-testid={getDataTestId(dataTestId) + '-empty'}
-                    height={height || 160}
-                    src="/images/optimized-noimage.webp"
-                    width={width || 160}
-                />
-            </div>
-        );
-    }
+export const Image: FC<ImageProps> = ({ src, className, ...props }) => {
+    const [imageUrl, setImageUrl] = useState(src ?? '/images/optimized-noimage.webp');
 
     return (
-        <picture className={wrapperClassName}>
-            <img
-                alt={image.name || alt || ''}
-                className={imageTwClass}
-                height={height}
-                loading={loading}
-                src={image.url}
-                width={width}
-            />
-        </picture>
+        <NextImage
+            className={twMergeCustom('[image-rendering:-webkit-optimize-contrast]', className)}
+            loader={({ src, width }) => `${src}?width=${width || '0'}`}
+            src={imageUrl}
+            onError={() => setImageUrl('/images/optimized-noimage.webp')}
+            {...props}
+        />
     );
 };
diff --git a/storefront/components/Blocks/Adverts/Adverts.tsx b/storefront/components/Blocks/Adverts/Adverts.tsx
index d025a132f8..46214e71aa 100644
--- a/storefront/components/Blocks/Adverts/Adverts.tsx
+++ b/storefront/components/Blocks/Adverts/Adverts.tsx
@@ -1,4 +1,5 @@
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
+import { Image } from 'components/Basic/Image/Image';
 import { Webline } from 'components/Layout/Webline/Webline';
 import { AdvertsFragmentApi, CategoryDetailFragmentApi, useAdvertsQueryApi } from 'graphql/generated';
 import { Fragment } from 'react';
@@ -50,15 +51,22 @@ export const Adverts: FC<AdvertsProps> = ({
                     const mainImageMobile = advert.mainImageMobile;
 
                     const ImageComponent = (
-                        <picture>
-                            {/* use min-width equal to Tailwind "lg" breakpoint */}
-                            <source media="(min-width: 48.0625em)" srcSet={mainImage?.url} />
-                            <img
-                                alt={advert.mainImage?.name || advert.mainImageMobile?.name || advert.name}
-                                className="w-full"
+                        <>
+                            <Image
+                                alt={mainImage?.name || advert.name}
+                                className="hidden lg:block"
+                                height={400}
+                                src={mainImage?.url}
+                                width={1280}
+                            />
+                            <Image
+                                alt={mainImageMobile?.name || advert.name}
+                                className="lg:hidden"
+                                height={300}
                                 src={mainImageMobile?.url}
+                                width={770}
                             />
-                        </picture>
+                        </>
                     );
 
                     return (
diff --git a/storefront/components/Blocks/Banners/BannersSliderItem.tsx b/storefront/components/Blocks/Banners/BannersSliderItem.tsx
index 6d66941489..1a68886525 100644
--- a/storefront/components/Blocks/Banners/BannersSliderItem.tsx
+++ b/storefront/components/Blocks/Banners/BannersSliderItem.tsx
@@ -1,3 +1,4 @@
+import { Image } from 'components/Basic/Image/Image';
 import { SliderItemFragmentApi } from 'graphql/generated';
 
 type BannersSliderItemProps = {
@@ -16,14 +17,19 @@ export const BannersSliderItem: FC<BannersSliderItemProps> = ({
             {!image ? (
                 <BannerImage alt="no image" src="images/optimized-noimage.webp" />
             ) : (
-                <picture>
-                    <BannerImage alt={image.name || name} src={image.url} />
-                </picture>
+                <BannerImage alt={image.name || name} src={image.url} />
             )}
         </a>
     );
 };
 
 const BannerImage: FC<{ src: string; alt: string }> = ({ src, alt }) => (
-    <img alt={alt} className="block h-full w-full object-cover" src={src} />
+    <Image
+        alt={alt}
+        className="block h-full w-full object-cover"
+        height={300}
+        sizes="(max-width: 1024px) 100vw, 80vw"
+        src={src}
+        width={1025}
+    />
 );
diff --git a/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx b/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx
index d36b873252..186b019c8a 100644
--- a/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx
+++ b/storefront/components/Blocks/BlogPreview/BlogPreviewMain.tsx
@@ -21,8 +21,11 @@ export const BlogPreviewMain: FC<MainProps> = ({ articles }) => (
                 >
                     <Image
                         alt={article.mainImage?.name || article.name}
-                        className="rounded"
-                        image={article.mainImage}
+                        className="mx-auto rounded"
+                        height={220}
+                        sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 35vw"
+                        src={article.mainImage?.url}
+                        width={700}
                     />
                 </ArticleLink>
 
diff --git a/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx b/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx
index 9447c80e4c..302acff765 100644
--- a/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx
+++ b/storefront/components/Blocks/BlogPreview/BlogPreviewSide.tsx
@@ -16,7 +16,10 @@ export const BlogPreviewSide: FC<SideProps> = ({ articles }) => (
                     <Image
                         alt={article.mainImage?.name || article.name}
                         className="rounded"
-                        image={article.mainImage}
+                        height={250}
+                        sizes="(max-width: 600px) 90vw, (max-width: 1024px) 40vw, 10vw"
+                        src={article.mainImage?.url}
+                        width={768}
                     />
                 </ArticleLink>
 
diff --git a/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx b/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx
index 5a2ea63776..55d7cc89e7 100644
--- a/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx
+++ b/storefront/components/Blocks/ConfirmationPage/ConfirmationPageContent.tsx
@@ -1,3 +1,5 @@
+import sentCartImage from '/public/images/sent-cart.svg';
+import { Image } from 'components/Basic/Image/Image';
 import { SkeletonPageConfirmation } from 'components/Blocks/Skeleton/SkeletonPageConfirmation';
 import { ReactElement } from 'react';
 
@@ -21,7 +23,7 @@ export const ConfirmationPageContent: FC<ConfirmationPageContentProps> = ({
     return (
         <div className="mt-16 mb-10 flex flex-col items-center justify-center lg:mt-16 lg:mb-24 lg:flex-row">
             <div className="mb-0 w-40 lg:mr-32">
-                <img alt={heading} src="/public/frontend/images/sent-cart.svg" />
+                <Image alt={heading} src={sentCartImage} />
             </div>
             <div>
                 <div className="h1 mb-3">{heading}</div>
diff --git a/storefront/components/Blocks/OrderSummary/SingleProduct.tsx b/storefront/components/Blocks/OrderSummary/SingleProduct.tsx
index f442e174dd..3af3e93aff 100644
--- a/storefront/components/Blocks/OrderSummary/SingleProduct.tsx
+++ b/storefront/components/Blocks/OrderSummary/SingleProduct.tsx
@@ -14,11 +14,15 @@ export const SingleProduct: FC<SingleProductProps> = ({ item }) => {
 
     return (
         <li className="flex items-center border-b border-creamWhite py-3">
-            <Image
-                alt={item.product.mainImage?.name || item.product.fullName}
-                className="mr-4 h-14 w-14"
-                image={item.product.mainImage}
-            />
+            <div className="mr-4 flex w-14 items-center justify-center">
+                <Image
+                    alt={item.product.mainImage?.name || item.product.fullName}
+                    className="max-h-14 w-auto"
+                    height={56}
+                    src={item.product.mainImage?.url}
+                    width={56}
+                />
+            </div>
 
             <div className="flex flex-1 items-center">
                 <span className="flex-1 pr-3 text-sm">
diff --git a/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx b/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
index c12be4b573..a39f4a2d38 100644
--- a/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
+++ b/storefront/components/Blocks/OrderSummary/TransportAndPayment.tsx
@@ -32,9 +32,9 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
                     <OrderSummaryRow>
                         <OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-transport-name'}>
                             {transport.name}
-                            <span className="inline-block align-bottom">
-                                <Image alt={transport.name} className="h-8 w-8" image={transport.mainImage} />
-                            </span>
+                            <div className="flex h-8 w-8 items-center">
+                                <Image alt={transport.name} height={32} src={transport.mainImage?.url} width={32} />
+                            </div>
                         </OrderSummaryTextAndImage>
                         <OrderSummaryPrice dataTestId={TEST_IDENTIFIER + '-transport-price'}>
                             <strong>{formatPrice(transport.price.priceWithVat)}</strong>
@@ -45,9 +45,9 @@ export const TransportAndPayment: FC<TransportAndPaymentProps> = ({ payment, tra
                     <OrderSummaryRow>
                         <OrderSummaryTextAndImage dataTestId={TEST_IDENTIFIER + '-payment-name'}>
                             {payment.name}
-                            <span className="inline-block align-bottom">
-                                <Image alt={payment.name} className="h-8 w-8" image={payment.mainImage} />
-                            </span>
+                            <div className="flex h-8 w-8 items-center">
+                                <Image alt={payment.name} height={32} src={payment.mainImage?.url} width={32} />
+                            </div>
                         </OrderSummaryTextAndImage>
                         <OrderSummaryPrice dataTestId={TEST_IDENTIFIER + '-payment-price'}>
                             <strong>{formatPrice(payment.price.priceWithVat)}</strong>
diff --git a/storefront/components/Blocks/Product/AddToCartPopup.tsx b/storefront/components/Blocks/Product/AddToCartPopup.tsx
index c818fe02c4..e1851fa4e2 100644
--- a/storefront/components/Blocks/Product/AddToCartPopup.tsx
+++ b/storefront/components/Blocks/Product/AddToCartPopup.tsx
@@ -39,7 +39,13 @@ export const AddToCartPopup: FC<AddToCartPopupProps> = ({ onCloseCallback, added
             >
                 {!!product.mainImage && (
                     <div className="mb-4 flex w-24 items-center justify-center md:mb-0">
-                        <Image alt={product.mainImage.name || product.fullName} image={product.mainImage} />
+                        <Image
+                            alt={product.mainImage.name || product.fullName}
+                            className="max-h-20 w-auto"
+                            height={48}
+                            src={product.mainImage.url}
+                            width={72}
+                        />
                     </div>
                 )}
                 <div className="w-full md:pl-4 lg:flex lg:items-center lg:justify-between">
diff --git a/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx b/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
index dd6fc62373..2de5e3a3e8 100644
--- a/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
+++ b/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
@@ -77,8 +77,10 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
                     <div className="relative">
                         <Image
                             alt={product.mainImage?.name || product.fullName}
-                            className="h-40 justify-center lg:hover:mix-blend-multiply"
-                            image={product.mainImage}
+                            className="mx-auto h-40 w-auto"
+                            height={160}
+                            src={product.mainImage?.url}
+                            width={320}
                         />
                         {!!product.flags.length && (
                             <div className="absolute top-3 left-4 flex flex-col">
diff --git a/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx b/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx
index 5e8e979ff1..6429488bbc 100644
--- a/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx
+++ b/storefront/components/Blocks/SimpleNavigation/SimpleNavigationListItem.tsx
@@ -32,16 +32,19 @@ export const SimpleNavigationListItem: FC<SimpleNavigationListItemProps> = ({
                 )}
             >
                 {itemImage && (
-                    <Image
-                        alt={itemImage.name || listedItem.name}
-                        className="h-12 min-w-[64px] mix-blend-multiply"
-                        image={itemImage}
-                        width={64}
-                    />
+                    <div className="h-12 w-16 shrink-0">
+                        <Image
+                            alt={itemImage.name || listedItem.name}
+                            className="mx-auto max-h-full w-auto mix-blend-multiply"
+                            height={48}
+                            src={itemImage.url}
+                            width={64}
+                        />
+                    </div>
                 )}
 
-                <div className={twJoin('max-w-full text-center ', itemImage && 'lg:text-left')}>
-                    <span className="block max-w-full text-sm text-dark">{listedItem.name}</span>
+                <div className={twJoin('text-center ', itemImage && 'lg:text-left')}>
+                    <div className="text-sm text-dark">{listedItem.name}</div>
                     {'totalCount' in listedItem && listedItem.totalCount !== undefined && (
                         <span className="ml-2 whitespace-nowrap text-sm text-greyLight">({listedItem.totalCount})</span>
                     )}
diff --git a/storefront/components/Forms/TextInput/PasswordInputControlled.tsx b/storefront/components/Forms/TextInput/PasswordInputControlled.tsx
index 3cd3e4b258..cd764d97a3 100644
--- a/storefront/components/Forms/TextInput/PasswordInputControlled.tsx
+++ b/storefront/components/Forms/TextInput/PasswordInputControlled.tsx
@@ -1,4 +1,6 @@
 import { TextInput } from './TextInput';
+import eyeIcon from '/public/svg/eye.svg';
+import { Image } from 'components/Basic/Image/Image';
 import { FormLineError } from 'components/Forms/Lib/FormLineError';
 import { InputHTMLAttributes, ReactElement, useCallback, useState } from 'react';
 import { Control, useController } from 'react-hook-form';
@@ -56,9 +58,9 @@ export const PasswordInputControlled: FC<PasswordInputControlledProps> = ({
                 onBlur={field.onBlur}
                 onChange={field.onChange}
             >
-                <img
+                <Image
                     alt="eye icon"
-                    src="/svg/eye.svg"
+                    src={eyeIcon}
                     className={twJoin(
                         'absolute top-1/2 right-4 w-6 -translate-y-1/2 cursor-pointer',
                         inputType === 'text' && 'opacity-50',
diff --git a/storefront/components/Layout/Footer/FooterBoxInfo.tsx b/storefront/components/Layout/Footer/FooterBoxInfo.tsx
index f1c81dd049..22ab4e162a 100644
--- a/storefront/components/Layout/Footer/FooterBoxInfo.tsx
+++ b/storefront/components/Layout/Footer/FooterBoxInfo.tsx
@@ -1,5 +1,7 @@
+import needAdviceImage from '/public/images/need_advice.webp';
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { PhoneIcon } from 'components/Basic/Icon/IconsSvg';
+import { Image } from 'components/Basic/Image/Image';
 import { Button } from 'components/Forms/Button/Button';
 import { getInternationalizedStaticUrls } from 'helpers/getInternationalizedStaticUrls';
 import { useDomainConfig } from 'hooks/useDomainConfig';
@@ -20,14 +22,11 @@ export const FooterBoxInfo: FC = () => {
 
     return (
         <div className="relative mb-11 flex items-center lg:mb-24" data-testid={TEST_IDENTIFIER}>
-            <picture>
-                <source srcSet="/images/need_advice2x.webp 2x, /images/need_advice2x.webp 1x" />
-                <img
-                    alt={t('Need advice?')}
-                    className="absolute left-0 bottom-0 block h-12 w-12 translate-y-1/2 lg:h-16 lg:w-16"
-                    src="/images/need_advice.webp"
-                />
-            </picture>
+            <Image
+                alt={t('Need advice?')}
+                className="absolute left-0 bottom-0 block h-12 w-12 translate-y-1/2 lg:h-16 lg:w-16"
+                src={needAdviceImage}
+            />
             <div className="relative ml-16 flex flex-1 flex-col items-start rounded bg-primary p-4 before:absolute before:-left-1 before:-bottom-1 before:h-6 before:w-4 before:rounded-bl before:bg-primary before:content-[''] before:[transform:rotate(0deg)skewX(-41deg)scale(1.414,0.707)] lg:ml-24 lg:flex-row lg:items-center lg:justify-between lg:py-5 lg:pr-5 lg:pl-8">
                 <div className="mb-3 text-lg font-bold text-white lg:mr-3 lg:mb-0 lg:flex-1 lg:text-2xl vl:flex-none">
                     {t('Need advice?')}
diff --git a/storefront/components/Layout/Footer/FooterCopyright.tsx b/storefront/components/Layout/Footer/FooterCopyright.tsx
index 20a041e6c6..984cc84e4d 100644
--- a/storefront/components/Layout/Footer/FooterCopyright.tsx
+++ b/storefront/components/Layout/Footer/FooterCopyright.tsx
@@ -1,5 +1,6 @@
+import imageLogo from '/public/images/logo.svg';
+import { Image } from 'components/Basic/Image/Image';
 import useTranslation from 'next-translate/useTranslation';
-import Image from 'next/image';
 
 const TEST_IDENTIFIER = 'layout-footer-footercopyright';
 
@@ -14,7 +15,7 @@ export const FooterCopyright: FC = () => {
             <div className="flex items-center text-sm text-greyLight">
                 {t('Customized E-shop by')}
                 <a className="ml-2 flex w-20" href="https://www.shopsys.com" rel="noreferrer" target="_blank">
-                    <Image alt="footer logo" height={18} src="/images/logo.svg" width={77} />
+                    <Image alt="footer logo" src={imageLogo} />
                 </a>
             </div>
         </div>
diff --git a/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx b/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx
index 74632ad03d..6a27418b16 100644
--- a/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx
+++ b/storefront/components/Layout/Header/AutocompleteSearch/AutocompleteSearchPopup.tsx
@@ -32,8 +32,6 @@ type AutocompleteProps = {
 
 const TEST_IDENTIFIER = 'layout-header-search-autocomplete-popup';
 
-const imageTwClass = 'lg:w-full';
-
 export const AutocompleteSearchPopup: FC<AutocompleteProps> = ({
     autocompleteSearchQueryValue,
     autocompleteSearchResults: { articlesSearch, brandSearch, categoriesSearch, productsSearch },
@@ -120,9 +118,10 @@ export const AutocompleteSearchPopup: FC<AutocompleteProps> = ({
                                         >
                                             <Image
                                                 alt={product.mainImage?.name || product.fullName}
-                                                className="flex h-16 w-20 items-center justify-center"
-                                                image={product.mainImage}
-                                                wrapperClassName={imageTwClass}
+                                                className="mx-auto flex items-center justify-center"
+                                                height={64}
+                                                src={product.mainImage?.url}
+                                                width={80}
                                             />
 
                                             <span className="flex-1">{product.fullName}</span>
diff --git a/storefront/components/Layout/Header/Cart/CartListItem.tsx b/storefront/components/Layout/Header/Cart/CartListItem.tsx
index bcbee1de29..289637b9ab 100644
--- a/storefront/components/Layout/Header/Cart/CartListItem.tsx
+++ b/storefront/components/Layout/Header/Cart/CartListItem.tsx
@@ -23,7 +23,15 @@ export const ListItem: FC<ListItemProps> = ({ cartItem: { product, uuid, quantit
             className="flex w-full items-center gap-x-3 border-b border-greyLighter py-3"
             data-testid={TEST_IDENTIFIER}
         >
-            <Image alt={product.mainImage?.name || product.fullName} className="h-11 w-11" image={product.mainImage} />
+            <div className="flex w-11 items-center justify-center">
+                <Image
+                    alt={product.mainImage?.name || product.fullName}
+                    className="max-h-11 w-auto"
+                    height={44}
+                    src={product.mainImage?.url}
+                    width={44}
+                />
+            </div>
 
             <ExtendedNextLink
                 className="flex-1 cursor-pointer text-sm font-bold text-greyDark no-underline outline-none"
diff --git a/storefront/components/Layout/Header/Logo/Logo.tsx b/storefront/components/Layout/Header/Logo/Logo.tsx
index 812cbb7509..a7af7bbe6f 100644
--- a/storefront/components/Layout/Header/Logo/Logo.tsx
+++ b/storefront/components/Layout/Header/Logo/Logo.tsx
@@ -1,22 +1,18 @@
+import imageLogo from '/public/images/logo.svg';
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { LogoMetadata } from 'components/Basic/Head/LogoMetadata';
+import { Image } from 'components/Basic/Image/Image';
 import { twMergeCustom } from 'helpers/twMerge';
-import NextImage from 'next/image';
-
-const TEST_IDENTIFIER = 'layout-header-logo';
 
 export const Logo: FC = () => (
     <>
         <LogoMetadata />
         <ExtendedNextLink className="flex-1 vl:flex-none" href="/" type="homepage">
-            <NextImage
+            <Image
                 priority
                 alt="Shopsys logo"
                 className={twMergeCustom('flex w-32 max-w-full lg:w-40')}
-                data-testid={TEST_IDENTIFIER}
-                height={38}
-                src="/images/logo.svg"
-                width={163}
+                src={imageLogo}
             />
         </ExtendedNextLink>
     </>
diff --git a/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx b/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx
index e2e5af4e79..4a33c2efc7 100644
--- a/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx
+++ b/storefront/components/Layout/Header/Navigation/NavigationItemColumn.tsx
@@ -21,8 +21,10 @@ export const NavigationItemColumn: FC<NavigationItemColumnProps> = ({ columnCate
                         >
                             <Image
                                 alt={columnCategory.mainImage?.name || columnCategory.name}
-                                className="h-16 mix-blend-multiply"
-                                image={columnCategory.mainImage}
+                                className="h-14 w-auto mix-blend-multiply"
+                                height={56}
+                                src={columnCategory.mainImage?.url}
+                                width={64}
                             />
                         </ExtendedNextLink>
 
diff --git a/storefront/components/Layout/NotificationBars/NotificationBars.tsx b/storefront/components/Layout/NotificationBars/NotificationBars.tsx
index 3e0a8ffead..429502dca5 100644
--- a/storefront/components/Layout/NotificationBars/NotificationBars.tsx
+++ b/storefront/components/Layout/NotificationBars/NotificationBars.tsx
@@ -45,8 +45,9 @@ export const NotificationBars: FC = memo(function NotificationBars() {
                                 <div className="mr-3 flex w-11">
                                     <Image
                                         alt={item.mainImage.name || item.text}
-                                        className="mr-3"
-                                        image={item.mainImage}
+                                        height={44}
+                                        src={item.mainImage.url}
+                                        width={44}
                                     />
                                 </div>
                             )}
diff --git a/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx b/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx
index 637b83943b..f1c531bb40 100644
--- a/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx
+++ b/storefront/components/Pages/BlogArticle/BlogArticleDetailContent.tsx
@@ -19,7 +19,13 @@ export const BlogArticleDetailContent: FC<BlogArticleDetailContentProps> = ({ bl
                 <div className="mb-12 flex w-full flex-col">
                     {blogArticle.mainImage && (
                         <div className="mb-10 flex overflow-hidden">
-                            <Image alt={blogArticle.mainImage.name || blogArticle.name} image={blogArticle.mainImage} />
+                            <Image
+                                priority
+                                alt={blogArticle.mainImage.name || blogArticle.name}
+                                height={600}
+                                src={blogArticle.mainImage.url}
+                                width={1280}
+                            />
                         </div>
                     )}
 
diff --git a/storefront/components/Pages/BlogCategory/BlogArticlesList.tsx b/storefront/components/Pages/BlogCategory/BlogArticlesList.tsx
index 2534f355b8..02d19d07c9 100644
--- a/storefront/components/Pages/BlogCategory/BlogArticlesList.tsx
+++ b/storefront/components/Pages/BlogCategory/BlogArticlesList.tsx
@@ -15,17 +15,20 @@ export const BlogArticlesList: FC<BlogArticlesListProps> = ({ blogArticles }) =>
     return (
         <ul className="flex w-full flex-col flex-wrap md:flex-row">
             {blogArticles.map((blogArticle) => (
-                <li key={blogArticle.uuid} className="mb-14 flex w-full flex-col p-0 md:flex-row">
+                <li key={blogArticle.uuid} className="mb-14 flex w-full flex-col p-0 md:flex-row md:gap-x-10">
                     <div className="mb-3 w-full text-center md:mb-0 md:w-48">
                         <ExtendedNextLink href={blogArticle.link} type="blogArticle">
                             <Image
                                 alt={blogArticle.mainImage?.name || blogArticle.name}
-                                image={blogArticle.mainImage}
+                                height={600}
+                                sizes="(max-width: 600px) 100vw, 20vw"
+                                src={blogArticle.mainImage?.url}
+                                width={600}
                             />
                         </ExtendedNextLink>
                     </div>
 
-                    <div className="flex w-full flex-col md:pl-10">
+                    <div className="flex flex-1 flex-col">
                         <div>
                             {blogArticle.blogCategories.map((blogArticleCategory) => (
                                 <Fragment key={blogArticleCategory.uuid}>
diff --git a/storefront/components/Pages/BrandDetail/BrandDetailContent.tsx b/storefront/components/Pages/BrandDetail/BrandDetailContent.tsx
index c03df543c9..6f57567091 100644
--- a/storefront/components/Pages/BrandDetail/BrandDetailContent.tsx
+++ b/storefront/components/Pages/BrandDetail/BrandDetailContent.tsx
@@ -21,7 +21,12 @@ export const BrandDetailContent: FC<BrandDetailContentProps> = ({ brand }) => {
                 <h1 className="mb-3">{brand.seoH1 !== null ? brand.seoH1 : brand.name}</h1>
                 <div className="mb-5 flex w-full flex-col justify-start md:flex-row">
                     <div className="mr-5 min-w-[13.75rem] self-start" data-testid={TEST_IDENTIFIER + 'image'}>
-                        <Image alt={brand.mainImage?.name || brand.name} image={brand.mainImage} />
+                        <Image
+                            alt={brand.mainImage?.name || brand.name}
+                            height={220}
+                            src={brand.mainImage?.url}
+                            width={220}
+                        />
                     </div>
                     <div
                         className="self-start  md:self-center [&>section]:text-base [&>section]:text-dark"
diff --git a/storefront/components/Pages/Cart/CartList/CartListItem.tsx b/storefront/components/Pages/Cart/CartList/CartListItem.tsx
index 14613b601a..0b71cd3a1e 100644
--- a/storefront/components/Pages/Cart/CartList/CartListItem.tsx
+++ b/storefront/components/Pages/Cart/CartList/CartListItem.tsx
@@ -53,12 +53,14 @@ export const CartListItem: FC<CartListItemProps> = ({
             data-testid={TEST_IDENTIFIER + itemCatnum}
         >
             <div className="flex flex-1 basis-full pr-8 vl:basis-auto vl:pr-0">
-                <div className="flex w-24 shrink-0" data-testid={TEST_IDENTIFIER + 'image'}>
+                <div className="flex h-12 w-24 shrink-0" data-testid={TEST_IDENTIFIER + 'image'}>
                     <ExtendedNextLink className="relative h-full w-full" href={productSlug} type="product">
                         <Image
                             alt={product.mainImage?.name || product.fullName}
-                            className="h-14"
-                            image={product.mainImage}
+                            className="mx-auto max-h-full w-auto"
+                            height={56}
+                            src={product.mainImage?.url}
+                            width={96}
                         />
                     </ExtendedNextLink>
                 </div>
diff --git a/storefront/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx b/storefront/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx
index 29c368621d..bfb87ec638 100644
--- a/storefront/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx
+++ b/storefront/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx
@@ -14,8 +14,6 @@ type CategoryBestsellersListItemProps = {
     listIndex: number;
 };
 
-const TEST_IDENTIFIER = 'pages-category-bestseller-item-';
-
 export const CategoryBestsellersListItem: FC<CategoryBestsellersListItemProps> = ({
     product,
     gtmProductListName,
@@ -26,24 +24,23 @@ export const CategoryBestsellersListItem: FC<CategoryBestsellersListItemProps> =
 
     return (
         <div className="flex flex-wrap items-center gap-y-4 border-t border-greyLight py-4 first-of-type:border-0 lg:flex-nowrap lg:gap-5">
-            <div className="flex w-full items-center lg:basis-7/12">
-                <div data-testid={TEST_IDENTIFIER + 'name'}>
-                    <ExtendedNextLink
-                        className="flex items-center gap-5 font-bold no-underline"
-                        href={product.slug}
-                        type="product"
-                        onClick={() => onGtmProductClickEventHandler(product, gtmProductListName, listIndex, url)}
-                    >
-                        <Image
-                            alt={product.fullName}
-                            className="max-h-[80px] max-w-[80px]"
-                            dataTestId={TEST_IDENTIFIER + 'image'}
-                            image={product.mainImage}
-                        />
-                        <span>{product.fullName}</span>
-                    </ExtendedNextLink>
+            <ExtendedNextLink
+                className="flex items-center gap-5 font-bold no-underline lg:flex-1"
+                href={product.slug}
+                type="product"
+                onClick={() => onGtmProductClickEventHandler(product, gtmProductListName, listIndex, url)}
+            >
+                <div className="flex w-20 shrink-0 items-center justify-center">
+                    <Image
+                        alt={product.mainImage?.name || product.fullName}
+                        className="max-h-20 w-auto shrink-0"
+                        height={80}
+                        src={product.mainImage?.url}
+                        width={80}
+                    />
                 </div>
-            </div>
+                <span>{product.fullName}</span>
+            </ExtendedNextLink>
 
             <div className="basis-4/6 lg:basis-3/12 lg:text-center">
                 <span
diff --git a/storefront/components/Pages/Customer/OrdersContent.tsx b/storefront/components/Pages/Customer/OrdersContent.tsx
index 26132312d7..b563439be6 100644
--- a/storefront/components/Pages/Customer/OrdersContent.tsx
+++ b/storefront/components/Pages/Customer/OrdersContent.tsx
@@ -108,9 +108,8 @@ export const OrdersContent: FC<OrdersContentProps> = ({ isLoading, orders, total
                                             <div className="flex items-center gap-2">
                                                 <Image
                                                     alt={order.transport.mainImage?.name || order.transport.name}
-                                                    className="h-9 w-9"
                                                     height={20}
-                                                    image={order.transport.mainImage}
+                                                    src={order.transport.mainImage?.url}
                                                     width={36}
                                                 />
                                                 <span className="flex-1">{order.transport.name}</span>
diff --git a/storefront/components/Pages/ErrorPage/Error404Content.tsx b/storefront/components/Pages/ErrorPage/Error404Content.tsx
index 6043390ed3..9c928f8e13 100644
--- a/storefront/components/Pages/ErrorPage/Error404Content.tsx
+++ b/storefront/components/Pages/ErrorPage/Error404Content.tsx
@@ -1,11 +1,12 @@
 import { ErrorPage, ErrorPageButtonLink, ErrorPageTextHeading, ErrorPageTextMain } from './ErrorPageElements';
+import image404 from '/public/images/404_m.png';
+import { Image } from 'components/Basic/Image/Image';
 import { CommonLayout } from 'components/Layout/CommonLayout';
 import { Webline } from 'components/Layout/Webline/Webline';
 import { useGtmStaticPageViewEvent } from 'gtm/helpers/eventFactories';
 import { useGtmPageViewEvent } from 'gtm/hooks/useGtmPageViewEvent';
 import { GtmPageType } from 'gtm/types/enums';
 import useTranslation from 'next-translate/useTranslation';
-import React from 'react';
 
 export const Error404Content: FC = () => {
     const { t } = useTranslation();
@@ -18,7 +19,7 @@ export const Error404Content: FC = () => {
             <Webline>
                 <ErrorPage>
                     <div className="mb-8 max-w-sm">
-                        <img alt={t('404')} loading="lazy" src="/public/frontend/images/404_m.png" />
+                        <Image priority alt={t('404')} src={image404} />
                     </div>
                     <div>
                         <ErrorPageTextHeading>{t('We have nothing to show you at this url.')}</ErrorPageTextHeading>
diff --git a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
index 352d406b4d..5400b0b5e7 100644
--- a/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
+++ b/storefront/components/Pages/Order/TransportAndPayment/TransportAndPaymentSelect/TransportAndPaymentSelectItemLabel.tsx
@@ -29,7 +29,9 @@ export const TransportAndPaymentSelectItemLabel: FC<TransportAndPaymentSelectIte
 
     return (
         <div className="flex w-full flex-row items-center gap-3" data-testid={TEST_IDENTIFIER}>
-            <Image alt={image?.name} className="h-6 w-11 shrink-0 basis-11" image={image} wrapperClassName="shrink-0" />
+            <div className="flex w-12  items-center">
+                <Image alt={image?.name ?? name} className="w-auto" height={48} src={image?.url} width={48} />
+            </div>
 
             <div className="flex flex-1 flex-col text-sm lg:flex-auto lg:basis-full lg:flex-row lg:items-center lg:gap-3">
                 <div>
diff --git a/storefront/components/Pages/ProductComparison/ProductComparisonHeadItem.tsx b/storefront/components/Pages/ProductComparison/ProductComparisonHeadItem.tsx
index 483012bab0..327fdaaffb 100644
--- a/storefront/components/Pages/ProductComparison/ProductComparisonHeadItem.tsx
+++ b/storefront/components/Pages/ProductComparison/ProductComparisonHeadItem.tsx
@@ -40,7 +40,13 @@ export const ProductComparisonHeadItem: FC<ProductComparisonItemProps> = ({
             <div className="flex h-[365px] w-[182px] flex-col gap-2 sm:w-[205px]">
                 <div className="flex flex-col items-center ">
                     <div className="flex h-[185px] w-full items-center justify-center pt-4 pb-3">
-                        <Image alt={product.mainImage?.name || product.fullName} image={product.mainImage} />
+                        <Image
+                            alt={product.mainImage?.name || product.fullName}
+                            className="max-h-full w-auto"
+                            height={185}
+                            src={product.mainImage?.url}
+                            width={200}
+                        />
                     </div>
                     <ExtendedNextLink
                         className="text-primary no-underline hover:no-underline"
diff --git a/storefront/components/Pages/ProductComparison/ProductComparisonHeadSticky.tsx b/storefront/components/Pages/ProductComparison/ProductComparisonHeadSticky.tsx
index 8a3718f750..4647ef54a1 100644
--- a/storefront/components/Pages/ProductComparison/ProductComparisonHeadSticky.tsx
+++ b/storefront/components/Pages/ProductComparison/ProductComparisonHeadSticky.tsx
@@ -19,7 +19,7 @@ export const ProductComparisonHeadSticky: FC<ProductComparisonHeadStickyProps> =
             )}
         >
             <div className="mx-auto flex w-full max-w-7xl flex-nowrap overflow-hidden">
-                <div className="border-r-1 static z-[2] flex h-full min-w-[115px] max-w-[182px] shrink-0 border-greyVeryLight bg-white sm:w-auto sm:min-w-[205px] sm:max-w-none md:min-w-[250px] md:max-w-none lg:min-w-[256px]" />
+                <div className="border-r-1 static z-[2] flex h-full min-w-[115px] max-w-[182px] shrink-0 border-greyVeryLight bg-white sm:w-auto sm:min-w-[220px] sm:max-w-none md:min-w-[265px] md:max-w-none lg:min-w-[270px] vl:min-w-[290px]" />
                 {props.comparedProducts.map((product, index) => (
                     <div
                         key={`headSticky-${product.uuid}`}
@@ -27,7 +27,13 @@ export const ProductComparisonHeadSticky: FC<ProductComparisonHeadStickyProps> =
                         style={index === 0 ? { marginLeft: -props.tableMarginLeft } : undefined}
                     >
                         <a className="w-16" href={product.slug}>
-                            <Image alt={product.mainImage?.name || product.fullName} image={product.mainImage} />
+                            <Image
+                                alt={product.mainImage?.name || product.fullName}
+                                className="w-auto"
+                                height={64}
+                                src={product.mainImage?.url}
+                                width={64}
+                            />
                         </a>
                         <div className="ml-2 flex flex-1 flex-col">
                             <a className="text-xs no-underline hover:no-underline" href={product.slug}>
diff --git a/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx b/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx
index 8d5e237259..7069db5e12 100644
--- a/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx
+++ b/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx
@@ -33,11 +33,13 @@ export const ProductDetailGallery: FC<ProductDetailGalleryProps> = ({ flags, ima
                 )}
             >
                 <Image
+                    priority
                     alt={mainImage?.name || productName}
-                    className="max-h-[460px] w-auto"
-                    height={400}
-                    image={mainImage}
-                    wrapperClassName="block h-full"
+                    className="max-h-[500px] w-auto"
+                    height={500}
+                    sizes="(max-width: 768px) 100vw, 50vw"
+                    src={mainImage?.url}
+                    width={720}
                 />
 
                 {!!flags.length && (
@@ -73,7 +75,7 @@ export const ProductDetailGallery: FC<ProductDetailGalleryProps> = ({ flags, ima
                                 )}
                             >
                                 {isImage && (
-                                    <img
+                                    <Image
                                         alt={galleryItem.name || `${productName}-${index}`}
                                         className="max-h-16 w-auto sm:max-h-20"
                                         height={90}
@@ -84,7 +86,7 @@ export const ProductDetailGallery: FC<ProductDetailGalleryProps> = ({ flags, ima
 
                                 {isVideo && (
                                     <>
-                                        <img
+                                        <Image
                                             alt={galleryItem.description}
                                             className="max-h-20 w-auto"
                                             height={360}
diff --git a/storefront/components/Pages/ProductDetail/ProductDetailVariantsTable.tsx b/storefront/components/Pages/ProductDetail/ProductDetailVariantsTable.tsx
index 912a4e4dc3..6ce1820dff 100644
--- a/storefront/components/Pages/ProductDetail/ProductDetailVariantsTable.tsx
+++ b/storefront/components/Pages/ProductDetail/ProductDetailVariantsTable.tsx
@@ -31,9 +31,12 @@ export const ProductVariantsTable: FC<ProductVariantsTableProps> = ({ isSellingD
                         data-testid={TEST_IDENTIFIER + variant.catalogNumber}
                     >
                         <Image
+                            priority
                             alt={variant.mainImage?.name || variant.fullName}
-                            image={variant.mainImage}
-                            wrapperClassName="flex h-48 lg:h-16 lg:w-16"
+                            className="flex h-48 lg:h-16 lg:w-16"
+                            height={200}
+                            src={variant.mainImage?.url}
+                            width={1200}
                         />
 
                         <div className="flex-1 text-center lg:text-left">{variant.fullName}</div>
diff --git a/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx b/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx
index eacd883f9f..d90237c254 100644
--- a/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx
+++ b/storefront/components/Pages/StoreDetail/StoreDetailContent.tsx
@@ -118,8 +118,11 @@ export const StoreDetailContent: FC<StoreDetailContentProps> = ({ store }) => {
                                 >
                                     <Image
                                         alt={image.name || `${store.storeName}-${index}`}
-                                        className="cursor-pointer"
-                                        image={image}
+                                        className="w-auto cursor-pointer"
+                                        height={190}
+                                        loading="lazy"
+                                        src={image.url}
+                                        width={280}
                                     />
                                 </div>
                             ))}
diff --git a/storefront/components/Pages/Stores/StoresContent.tsx b/storefront/components/Pages/Stores/StoresContent.tsx
index 3beebe8a3a..ee63abccb3 100644
--- a/storefront/components/Pages/Stores/StoresContent.tsx
+++ b/storefront/components/Pages/Stores/StoresContent.tsx
@@ -1,6 +1,7 @@
 import { StoreInfoBox } from './StoreInfoBox';
 import { ExtendedNextLink } from 'components/Basic/ExtendedNextLink/ExtendedNextLink';
 import { MarkerIcon } from 'components/Basic/Icon/IconsSvg';
+import { Image } from 'components/Basic/Image/Image';
 import { SeznamMap } from 'components/Basic/SeznamMap/SeznamMap';
 import { SimpleLayout } from 'components/Layout/SimpleLayout/SimpleLayout';
 import { ListedStoreConnectionFragmentApi, ListedStoreFragmentApi } from 'graphql/generated';
@@ -8,7 +9,6 @@ import { createMapMarker } from 'helpers/createMapMarker';
 import { mapConnectionEdges } from 'helpers/mappers/connection';
 import { useDomainConfig } from 'hooks/useDomainConfig';
 import useTranslation from 'next-translate/useTranslation';
-import Image from 'next/image';
 import { useCallback, useMemo, useState } from 'react';
 import { twJoin } from 'tailwind-merge';
 import { MapMarker } from 'types/map';
@@ -64,7 +64,7 @@ export const StoresContent: FC<StoresContentProps> = ({ stores }) => {
                                 <Image
                                     priority
                                     alt={t('Stores')}
-                                    height={160}
+                                    height={210}
                                     src={`/images/stores_${defaultLocale}.png`}
                                     width={210}
                                 />
@@ -90,16 +90,14 @@ export const StoresContent: FC<StoresContentProps> = ({ stores }) => {
                                     href={store.slug}
                                     type="store"
                                 >
-                                    <>
-                                        <div className="flex flex-row items-center text-lg text-primary">
-                                            <MarkerIcon className="mr-3 w-6 text-2xl text-orange xl:mr-5" />
-                                            <StoreButton>{store.name}</StoreButton>
-                                        </div>
+                                    <div className="flex flex-row items-center text-lg text-primary">
+                                        <MarkerIcon className="mr-3 w-6 text-2xl text-orange xl:mr-5" />
+                                        <StoreButton>{store.name}</StoreButton>
+                                    </div>
 
-                                        <div className="flex flex-row items-center text-lg text-primary">
-                                            <StoreButton isRight>{t('Store detail')}</StoreButton>
-                                        </div>
-                                    </>
+                                    <div className="flex flex-row items-center text-lg text-primary">
+                                        <StoreButton isRight>{t('Store detail')}</StoreButton>
+                                    </div>
                                 </ExtendedNextLink>
                             ))}
                     </div>
diff --git a/storefront/next.config.js b/storefront/next.config.js
index ae82fb46cc..4314d87add 100644
--- a/storefront/next.config.js
+++ b/storefront/next.config.js
@@ -20,6 +20,17 @@ const nextConfig = {
         disableClientWebpackPlugin: process.env.APP_ENV === 'development',
         hideSourceMaps: true,
     },
+    images: {
+        loader: 'custom',
+        remotePatterns: [
+            {
+                hostname: process.env.DOMAIN_HOSTNAME_1,
+            },
+            {
+                hostname: process.env.DOMAIN_HOSTNAME_2,
+            },
+        ],
+    },
     serverRuntimeConfig: {
         internalGraphqlEndpoint: `${process.env.INTERNAL_ENDPOINT}graphql/`,
     },
diff --git a/storefront/public/images/sent-cart.svg b/storefront/public/images/sent-cart.svg
new file mode 100644
index 0000000000..86a0813689
--- /dev/null
+++ b/storefront/public/images/sent-cart.svg
@@ -0,0 +1 @@
+<svg width="160" height="152" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M75.704 151.37v-14.19c33.908 0 61.493-27.575 61.493-61.471h14.196c0 41.72-33.954 75.662-75.69 75.662M0 75.662C0 33.942 33.955 0 75.69 0v14.19c-33.909 0-61.495 27.576-61.495 61.472H0z" fill="#009AFF"/><path fill="#0F00A0" d="M37.634 66.697l10.037-10.034L75.478 84.46l73.995-75.784L159.51 18.71l-84.033 85.818z"/></g></svg>
\ No newline at end of file
diff --git a/storefront/urql/cache/cacheExchange.ts b/storefront/urql/cache/cacheExchange.ts
index f94ce7632e..9659fa1b57 100644
--- a/storefront/urql/cache/cacheExchange.ts
+++ b/storefront/urql/cache/cacheExchange.ts
@@ -8,12 +8,10 @@ const keyNull = () => null;
 const keyUuid = (data: Data) => data.uuid as string | null;
 const keyName = (data: Data) => data.name as string | null;
 const keyCode = (data: Data) => data.code as string | null;
-const keyUrl = (data: Data) => data.url as string | null;
 
 export const cache = cacheExchange({
     schema: schema as unknown as IntrospectionQuery,
     keys: {
-        AdditionalSize: keyUrl,
         Advert: keyUuid,
         AdvertCode: keyUuid,
         AdvertImage: keyUuid,
@@ -42,7 +40,6 @@ export const cache = cacheExchange({
         FlagFilterOption: keyNull,
         GoPayPaymentMethod: (data) => data.identifier as string | null,
         Image: keyNull,
-        ImageSize: keyUrl,
         Link: keyNull,
         MainVariant: keyUuid,
         NavigationItem: keyNull,