Background image slow load (incl fix)

[Larsvb0]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

I experience slow load of the background image after selecting a new or existing one. The image takes 1-2 seconds to load. Only the tabs where I selected the new image has this problem. This is on all browsers on all devices.

The background image is 500kb in size and is thesame as the original one. Therefore this cannot be due to its size,

Describe the behavior you expected

Fast load of selected image

Steps to reproduce the issue

1. Edit dashboard
2. select new (or upload new) background image
3. experience slow background load when changing tabs
   ...

What version of Home Assistant Core has the issue?

core-2025.12.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

All latest Chrome/Edge and IOS Safari/Edge and HA IOS app.

Which operating system are you using to run this browser?

No response

State of relevant entities

Problem-relevant frontend configuration

JavaScript errors shown in your browser console/inspector

Additional information

When editing the dashboard the configuration of the background image looks like this:

background:
  opacity: 100
  alignment: center
  size: cover
  repeat: repeat
  attachment: fixed
  image: /api/image/serve/250c983e41115b94abc18d25e9db53c5/original

The UI of the Background image selector shows this: /api/image/serve/250c983e41115b94abc18d25e9db53c5/original

When updating the background image (Background.jpeg) using the UI, the Background image selector shows this: Background.jpeg

the code looks like:

background:
  opacity: 100
  alignment: center
  size: cover
  repeat: repeat
  attachment: fixed
  image:
    media_content_id: media-source://image_upload/250c983e41115b94abc18d25e9db53c5
    media_content_type: image/jpeg
    metadata:
      title: Background.jpeg
      thumbnail: /api/image/serve/250c983e41115b94abc18d25e9db53c5/256x256
      media_class: image
      children_media_class: null
      navigateIds:
        - {}
        - media_content_type: app
          media_content_id: media-source://image_upload

This results in an image loading time of 1-2 seconds.

FIX:

1. Replace with original code works for existing images.

Replace this:

background:
  opacity: 100
  alignment: center
  size: cover
  repeat: repeat
  attachment: fixed
  image:
    media_content_id: media-source://image_upload/250c983e41115b94abc18d25e9db53c5
    media_content_type: image/jpeg
    metadata:
      title: Background.jpeg
      thumbnail: /api/image/serve/250c983e41115b94abc18d25e9db53c5/256x256
      media_class: image
      children_media_class: null
      navigateIds:
        - {}
        - media_content_type: app
          media_content_id: media-source://image_upload

with this works:

background:
  opacity: 100
  alignment: center
  size: cover
  repeat: repeat
  attachment: fixed
  image: /api/image/serve/250c983e41115b94abc18d25e9db53c5/original

2. Replace only URL works:

Replace this:

background:
  opacity: 100
  alignment: center
  size: cover
  repeat: repeat
  attachment: fixed
  image:
    media_content_id: media-source://image_upload/250c983e41115b94abc18d25e9db53c5
    media_content_type: image/jpeg
    metadata:
      title: Background.jpeg
      thumbnail: /api/image/serve/250c983e41115b94abc18d25e9db53c5/256x256
      media_class: image
      children_media_class: null
      navigateIds:
        - {}
        - media_content_type: app
          media_content_id: media-source://image_upload

with this works:

background:
  opacity: 100
  alignment: center
  size: cover
  repeat: repeat
  attachment: fixed
  image:
    media_content_id:  /api/image/serve/250c983e41115b94abc18d25e9db53c5/original
    media_content_type: image/jpeg
    metadata:
      title: Background.jpeg
      thumbnail: /api/image/serve/250c983e41115b94abc18d25e9db53c5/256x256
      media_class: image
      children_media_class: null
      navigateIds:
        - {}
        - media_content_type: app
          media_content_id: media-source://image_upload

So it seems that replacing
media_content_id: media-source://image_upload/250c983e41115b94abc18d25e9db53c5
with
media_content_id: /api/image/serve/250c983e41115b94abc18d25e9db53c5/original
fixes the issue.