diff --git a/src/components/elements/query-image.tsx b/src/components/elements/query-image.tsx
index 782aded0cc2..ad8e43fae7d 100644
--- a/src/components/elements/query-image.tsx
+++ b/src/components/elements/query-image.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { GatsbyImage, getImage, ImageDataLike } from 'gatsby-plugin-image'
 
 type QueryImageProps = {
@@ -15,6 +15,7 @@ type ImageWrapperProps = {
     width: string
     height: string
     className?: string
+    loading: 'eager' | 'lazy'
 }
 
 export const ImageWrapper = styled.div<ImageWrapperProps>`
@@ -22,6 +23,16 @@ export const ImageWrapper = styled.div<ImageWrapperProps>`
         width: ${(props) => props.width || '100%'};
         height: ${(props) => props.height};
     }
+    .gatsby-image-wrapper [data-main-image] {
+        ${(props) => {
+            if (props.loading === 'eager') {
+                return css`
+                    transition: none;
+                    opacity: 1;
+                `
+            }
+        }}
+    }
 `
 
 const QueryImage = ({
@@ -29,14 +40,14 @@ const QueryImage = ({
     className,
     data,
     height,
-    loading,
+    loading = 'lazy',
     width,
     ...props
 }: QueryImageProps) => {
     const image = getImage(data)
     if (data) {
         return (
-            <ImageWrapper width={width} height={height} className={className}>
+            <ImageWrapper loading={loading} width={width} height={height} className={className}>
                 <GatsbyImage image={image} alt={alt} loading={loading} {...props} />
             </ImageWrapper>
         )