diff --git a/src/renderer/components/feature-carousel/feature-carousel.tsx b/src/renderer/components/feature-carousel/feature-carousel.tsx
index b03ccf975..97338546a 100644
--- a/src/renderer/components/feature-carousel/feature-carousel.tsx
+++ b/src/renderer/components/feature-carousel/feature-carousel.tsx
@@ -119,6 +119,9 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
                         <ItemImage
                             className={styles.albumImage}
                             containerClassName={styles.albumImageContainer}
+                            enableDebounce={false}
+                            enableViewport={false}
+                            fetchPriority="high"
                             id={album.imageId}
                             itemType={LibraryItem.ALBUM}
                             src={imageUrl}
diff --git a/src/renderer/components/feature-carousel/single-feature-carousel.tsx b/src/renderer/components/feature-carousel/single-feature-carousel.tsx
index cf45596ff..8aa533b22 100644
--- a/src/renderer/components/feature-carousel/single-feature-carousel.tsx
+++ b/src/renderer/components/feature-carousel/single-feature-carousel.tsx
@@ -116,8 +116,11 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
                         <ItemImage
                             className={styles.albumImage}
                             containerClassName={styles.albumImageContainer}
+                            enableDebounce={false}
+                            enableViewport={false}
                             id={album.imageId}
                             itemType={LibraryItem.ALBUM}
+                            fetchPriority="high"
                             type="itemCard"
                         />
                         <div className={styles.playButtonOverlay}>
diff --git a/src/renderer/components/item-card/item-card.tsx b/src/renderer/components/item-card/item-card.tsx
index 1c6d13060..8752588a4 100644
--- a/src/renderer/components/item-card/item-card.tsx
+++ b/src/renderer/components/item-card/item-card.tsx
@@ -333,6 +333,7 @@ const CompactItemCard = ({
                     className={clsx(styles.image, {
                         [styles.isRound]: isRound,
                     })}
+                    enableDebounce={false}
                     id={data?.imageId}
                     itemType={itemType}
                     src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
@@ -553,6 +554,7 @@ const DefaultItemCard = ({
             <>
                 <ItemImage
                     className={clsx(styles.image, { [styles.isRound]: isRound })}
+                    enableDebounce={false}
                     id={data?.imageId}
                     itemType={itemType}
                     src={(data as Album | AlbumArtist | Playlist | Song)?.imageUrl}
@@ -835,6 +837,7 @@ const PosterItemCard = ({
             <>
                 <ItemImage
                     className={clsx(styles.image, { [styles.isRound]: isRound })}
+                    enableDebounce={false}
                     id={(data as { imageId: string })?.imageId}
                     itemType={itemType}
                     src={(data as { imageUrl: string })?.imageUrl}
diff --git a/src/renderer/components/item-list/item-table-list/columns/image-column.tsx b/src/renderer/components/item-list/item-table-list/columns/image-column.tsx
index 217a1ad41..30b85db8d 100644
--- a/src/renderer/components/item-list/item-table-list/columns/image-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/image-column.tsx
@@ -87,6 +87,8 @@ const ImageColumnBase = (props: ItemTableListInnerColumn) => {
                             [styles.imageContainerWithAspectRatio]:
                                 props.size === 'default' || props.size === 'large',
                         })}
+                        enableDebounce={true}
+                        enableViewport={false}
                         id={item?.imageId}
                         itemType={item?._itemType}
                         src={item?.imageUrl}
diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
index 9dfb51ab3..156df3733 100644
--- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx
@@ -103,6 +103,8 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                 >
                     <ItemImage
                         containerClassName={styles.image}
+                        enableDebounce={true}
+                        enableViewport={false}
                         id={item?.imageId}
                         itemType={item?._itemType}
                         src={item?.imageUrl}
diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx
index 388ef26a7..d35cb9bbe 100644
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/src/renderer/features/player/components/left-controls.tsx
@@ -121,9 +121,11 @@ export const LeftControls = () => {
                                             styles.playerbarImage,
                                             PlaybackSelectors.playerCoverArt,
                                         )}
+                                        enableDebounce={false}
+                                        enableViewport={false}
+                                        fetchPriority="high"
                                         id={currentSong?.imageId}
                                         itemType={LibraryItem.SONG}
-                                        loading="eager"
                                         serverId={currentSong?._serverId}
                                         type="table"
                                     />
diff --git a/src/renderer/features/player/components/mobile-playerbar.tsx b/src/renderer/features/player/components/mobile-playerbar.tsx
index 500fff997..3d708c96d 100644
--- a/src/renderer/features/player/components/mobile-playerbar.tsx
+++ b/src/renderer/features/player/components/mobile-playerbar.tsx
@@ -92,9 +92,11 @@ export const MobilePlayerbar = () => {
                                                 styles.playerbarImage,
                                                 PlaybackSelectors.playerCoverArt,
                                             )}
+                                            enableDebounce={false}
+                                            enableViewport={false}
+                                            fetchPriority="high"
                                             id={currentSong.imageId}
                                             itemType={LibraryItem.SONG}
-                                            loading="eager"
                                             type="table"
                                         />
                                     </Tooltip>
diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx
index 1c195650f..3a7294167 100644
--- a/src/renderer/features/shared/components/library-header.tsx
+++ b/src/renderer/features/shared/components/library-header.tsx
@@ -105,6 +105,9 @@ export const LibraryHeader = forwardRef(
                     >
                         <BaseImage
                             alt="cover"
+                            enableDebounce={false}
+                            enableViewport={false}
+                            fetchPriority="high"
                             src={imageUrl}
                             style={{
                                 maxHeight: '100%',
@@ -137,6 +140,9 @@ export const LibraryHeader = forwardRef(
                         <ItemImage
                             className={styles.image}
                             containerClassName={styles.image}
+                            enableDebounce={false}
+                            enableViewport={false}
+                            fetchPriority="high"
                             id={item.imageId}
                             itemType={item.type as LibraryItem}
                             onError={onImageError}
diff --git a/src/renderer/features/shared/components/multi-select-rows.tsx b/src/renderer/features/shared/components/multi-select-rows.tsx
index 84004b7d7..f5ecbfa55 100644
--- a/src/renderer/features/shared/components/multi-select-rows.tsx
+++ b/src/renderer/features/shared/components/multi-select-rows.tsx
@@ -51,6 +51,8 @@ export function ArtistMultiSelectRow({
         >
             <ItemImage
                 containerClassName={styles.rowImage}
+                enableDebounce={true}
+                enableViewport={false}
                 itemType={LibraryItem.ARTIST}
                 src={options[index].imageUrl}
                 type="table"
diff --git a/src/shared/components/image/image.tsx b/src/shared/components/image/image.tsx
index e72c493d1..70b6fd5f8 100644
--- a/src/shared/components/image/image.tsx
+++ b/src/shared/components/image/image.tsx
@@ -94,11 +94,13 @@ export function BaseImage({
         );
     }
 
+    const { className: containerPropsClassName, ...restContainerProps } = imageContainerProps || {};
+
     return (
         <ImageContainer
-            className={containerClassName}
+            className={clsx(containerClassName, containerPropsClassName)}
             enableAnimation={enableAnimation}
-            {...imageContainerProps}
+            {...restContainerProps}
         >
             {src ? (
                 <Img
@@ -140,14 +142,15 @@ function ImageWithDebounce({
     const [debouncedSrc] = useDebouncedValue(src, 150, { waitForInitial: true });
     const viewport = useInViewport();
     const { inViewport, ref } = enableViewport ? viewport : { inViewport: true, ref: undefined };
+    const { className: containerPropsClassName, ...restContainerProps } = imageContainerProps || {};
 
     if (enableViewport) {
         return (
             <ImageContainer
-                className={containerClassName}
+                className={clsx(containerClassName, containerPropsClassName)}
                 enableAnimation={enableAnimation}
                 ref={ref}
-                {...imageContainerProps}
+                {...restContainerProps}
             >
                 {inViewport && debouncedSrc ? (
                     <Img
@@ -177,9 +180,9 @@ function ImageWithDebounce({
 
     return (
         <ImageContainer
-            className={containerClassName}
+            className={clsx(containerClassName, containerPropsClassName)}
             enableAnimation={enableAnimation}
-            {...imageContainerProps}
+            {...restContainerProps}
         >
             {debouncedSrc ? (
                 <Img
@@ -219,13 +222,14 @@ function ImageWithViewport({
     ...props
 }: ImageProps) {
     const { inViewport, ref } = useInViewport();
+    const { className: containerPropsClassName, ...restContainerProps } = imageContainerProps || {};
 
     return (
         <ImageContainer
-            className={containerClassName}
+            className={clsx(containerClassName, containerPropsClassName)}
             enableAnimation={enableAnimation}
             ref={ref}
-            {...imageContainerProps}
+            {...restContainerProps}
         >
             {inViewport && src ? (
                 <Img