diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.js b/src/panels/lovelace/cards/hui-picture-entity-card.js
index e2b0a18d5b..64abd7537d 100644
--- a/src/panels/lovelace/cards/hui-picture-entity-card.js
+++ b/src/panels/lovelace/cards/hui-picture-entity-card.js
@@ -12,7 +12,7 @@ import toggleEntity from '../common/entity/toggle-entity.js';
 
 import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
-const OFFLINE = 'Offline';
+const UNAVAILABLE = 'Unavailable';
 
 /*
  * @appliesMixin LocalizeMixin
@@ -89,7 +89,7 @@ class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) {
     if (!entityId) {
       return;
     }
-    if (!(entityId in hass.states) && this._oldState === OFFLINE) {
+    if (!(entityId in hass.states) && this._oldState === UNAVAILABLE) {
       return;
     }
     if (!(entityId in hass.states) || hass.states[entityId].state !== this._oldState) {
@@ -98,12 +98,12 @@ class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) {
   }
 
   _updateState(hass, entityId, config) {
-    const state = entityId in hass.states ? hass.states[entityId].state : OFFLINE;
+    const state = entityId in hass.states ? hass.states[entityId].state : UNAVAILABLE;
 
-    this.$.title.innerText = config.title || (state === OFFLINE ?
+    this.$.title.innerText = config.title || (state === UNAVAILABLE ?
       entityId : computeStateName(hass.states[entityId]));
-    this.$.state.innerText = state === OFFLINE ?
-      OFFLINE : this._computeState(hass.states[entityId]);
+    this.$.state.innerText = state === UNAVAILABLE ?
+      UNAVAILABLE : this._computeState(hass.states[entityId]);
     this._oldState = state;
   }
 
diff --git a/src/panels/lovelace/components/hui-image.js b/src/panels/lovelace/components/hui-image.js
index 9ec876a68b..066a0a5deb 100644
--- a/src/panels/lovelace/components/hui-image.js
+++ b/src/panels/lovelace/components/hui-image.js
@@ -107,16 +107,19 @@ class HuiImage extends LocalizeMixin(PolymerElement) {
       return;
     }
 
+    const unavailable = !isValidObject(state, ['state']);
+
     if (!this.stateImage) {
-      this._imageClass = (!isValidObject(state, ['state']) || STATES_OFF.includes(state.state)) ? 'state-off' : '';
+      this._imageClass = unavailable || STATES_OFF.includes(state.state) ? 'state-off' : '';
       return;
     }
 
-    const stateImg = isValidObject(state, ['state']) ? this.stateImage[state.state] : this.stateImage.offline;
+    const stateImg = !unavailable ?
+      (this.stateImage[state.state] || this.stateImage.default) : this.stateImage.unavailable;
 
     this.setProperties({
-      _imageSrc: stateImg || this.stateImage.default || this.image,
-      _imageClass: ''
+      _imageClass: !stateImg && (unavailable || STATES_OFF.includes(state.state)) ? 'state-off' : '',
+      _imageSrc: stateImg || this.image
     });
   }