From 33fdbbe30c4d9643300483bf2dfd85d992e2cf86 Mon Sep 17 00:00:00 2001
From: Clyde Stubbs <2366188+clydebarrow@users.noreply.github.com>
Date: Fri, 25 Oct 2024 09:05:25 +1100
Subject: [PATCH] [image][online_image][animation] Fix transparency in RGB565
 (#7631)

---
 esphome/components/animation/__init__.py      | 13 +++---
 esphome/components/animation/animation.cpp    |  2 +-
 esphome/components/image/__init__.py          | 13 +++---
 esphome/components/image/image.cpp            | 28 ++++++-------
 esphome/components/image/image.h              | 37 ++++++++---------
 .../components/online_image/online_image.cpp  | 10 +----
 .../components/online_image/online_image.h    |  8 +---
 tests/components/image/common.yaml            | 38 ++++++++++++++++++
 tests/components/image/test.esp32-ard.yaml    | 40 +------------------
 tests/components/image/test.esp32-c3-ard.yaml | 39 +-----------------
 tests/components/image/test.esp32-c3-idf.yaml | 39 +-----------------
 tests/components/image/test.esp32-idf.yaml    | 39 +-----------------
 tests/components/image/test.esp8266-ard.yaml  | 39 +-----------------
 tests/components/image/test.host.yaml         |  8 ++++
 tests/components/image/test.rp2040-ard.yaml   | 39 +-----------------
 15 files changed, 101 insertions(+), 291 deletions(-)
 create mode 100644 tests/components/image/common.yaml
 create mode 100644 tests/components/image/test.host.yaml

diff --git a/esphome/components/animation/__init__.py b/esphome/components/animation/__init__.py
index eb3d09ac96..5a308855de 100644
--- a/esphome/components/animation/__init__.py
+++ b/esphome/components/animation/__init__.py
@@ -271,7 +271,8 @@ async def to_code(config):
                 pos += 1
 
     elif config[CONF_TYPE] in ["RGB565", "TRANSPARENT_IMAGE"]:
-        data = [0 for _ in range(height * width * 2 * frames)]
+        bytes_per_pixel = 3 if transparent else 2
+        data = [0 for _ in range(height * width * bytes_per_pixel * frames)]
         pos = 0
         for frameIndex in range(frames):
             image.seek(frameIndex)
@@ -288,17 +289,13 @@ async def to_code(config):
                 G = g >> 2
                 B = b >> 3
                 rgb = (R << 11) | (G << 5) | B
-
-                if transparent:
-                    if rgb == 0x0020:
-                        rgb = 0
-                    if a < 0x80:
-                        rgb = 0x0020
-
                 data[pos] = rgb >> 8
                 pos += 1
                 data[pos] = rgb & 0xFF
                 pos += 1
+                if transparent:
+                    data[pos] = a
+                    pos += 1
 
     elif config[CONF_TYPE] in ["BINARY", "TRANSPARENT_BINARY"]:
         width8 = ((width + 7) // 8) * 8
diff --git a/esphome/components/animation/animation.cpp b/esphome/components/animation/animation.cpp
index 7e0efa97e0..1375dfe07e 100644
--- a/esphome/components/animation/animation.cpp
+++ b/esphome/components/animation/animation.cpp
@@ -62,7 +62,7 @@ void Animation::set_frame(int frame) {
 }
 
 void Animation::update_data_start_() {
-  const uint32_t image_size = image_type_to_width_stride(this->width_, this->type_) * this->height_;
+  const uint32_t image_size = this->get_width_stride() * this->height_;
   this->data_start_ = this->animation_data_start_ + image_size * this->current_frame_;
 }
 
diff --git a/esphome/components/image/__init__.py b/esphome/components/image/__init__.py
index c72417bcda..8742540067 100644
--- a/esphome/components/image/__init__.py
+++ b/esphome/components/image/__init__.py
@@ -361,24 +361,21 @@ async def to_code(config):
     elif config[CONF_TYPE] in ["RGB565"]:
         image = image.convert("RGBA")
         pixels = list(image.getdata())
-        data = [0 for _ in range(height * width * 2)]
+        bytes_per_pixel = 3 if transparent else 2
+        data = [0 for _ in range(height * width * bytes_per_pixel)]
         pos = 0
         for r, g, b, a in pixels:
             R = r >> 3
             G = g >> 2
             B = b >> 3
             rgb = (R << 11) | (G << 5) | B
-
-            if transparent:
-                if rgb == 0x0020:
-                    rgb = 0
-                if a < 0x80:
-                    rgb = 0x0020
-
             data[pos] = rgb >> 8
             pos += 1
             data[pos] = rgb & 0xFF
             pos += 1
+            if transparent:
+                data[pos] = a
+                pos += 1
 
     elif config[CONF_TYPE] in ["BINARY", "TRANSPARENT_BINARY"]:
         if transparent:
diff --git a/esphome/components/image/image.cpp b/esphome/components/image/image.cpp
index ded4c60d25..ca2f659fb0 100644
--- a/esphome/components/image/image.cpp
+++ b/esphome/components/image/image.cpp
@@ -88,7 +88,7 @@ lv_img_dsc_t *Image::get_lv_img_dsc() {
     this->dsc_.header.reserved = 0;
     this->dsc_.header.w = this->width_;
     this->dsc_.header.h = this->height_;
-    this->dsc_.data_size = image_type_to_width_stride(this->dsc_.header.w * this->dsc_.header.h, this->get_type());
+    this->dsc_.data_size = this->get_width_stride() * this->get_height();
     switch (this->get_type()) {
       case IMAGE_TYPE_BINARY:
         this->dsc_.header.cf = LV_IMG_CF_ALPHA_1BIT;
@@ -104,17 +104,17 @@ lv_img_dsc_t *Image::get_lv_img_dsc() {
 
       case IMAGE_TYPE_RGB565:
 #if LV_COLOR_DEPTH == 16
-        this->dsc_.header.cf = this->has_transparency() ? LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED : LV_IMG_CF_TRUE_COLOR;
+        this->dsc_.header.cf = this->has_transparency() ? LV_IMG_CF_TRUE_COLOR_ALPHA : LV_IMG_CF_TRUE_COLOR;
 #else
         this->dsc_.header.cf = LV_IMG_CF_RGB565;
 #endif
         break;
 
-      case image::IMAGE_TYPE_RGBA:
+      case IMAGE_TYPE_RGBA:
 #if LV_COLOR_DEPTH == 32
         this->dsc_.header.cf = LV_IMG_CF_TRUE_COLOR;
 #else
-        this->dsc_.header.cf = LV_IMG_CF_RGBA8888;
+        this->dsc_.header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA;
 #endif
         break;
     }
@@ -147,21 +147,21 @@ Color Image::get_rgb24_pixel_(int x, int y) const {
   return color;
 }
 Color Image::get_rgb565_pixel_(int x, int y) const {
-  const uint32_t pos = (x + y * this->width_) * 2;
-  uint16_t rgb565 =
-      progmem_read_byte(this->data_start_ + pos + 0) << 8 | progmem_read_byte(this->data_start_ + pos + 1);
+  const uint8_t *pos = this->data_start_;
+  if (this->transparent_) {
+    pos += (x + y * this->width_) * 3;
+  } else {
+    pos += (x + y * this->width_) * 2;
+  }
+  uint16_t rgb565 = encode_uint16(progmem_read_byte(pos), progmem_read_byte(pos + 1));
   auto r = (rgb565 & 0xF800) >> 11;
   auto g = (rgb565 & 0x07E0) >> 5;
   auto b = rgb565 & 0x001F;
-  Color color = Color((r << 3) | (r >> 2), (g << 2) | (g >> 4), (b << 3) | (b >> 2));
-  if (rgb565 == 0x0020 && transparent_) {
-    // darkest green has been defined as transparent color for transparent RGB565 images.
-    color.w = 0;
-  } else {
-    color.w = 0xFF;
-  }
+  auto a = this->transparent_ ? progmem_read_byte(pos + 2) : 0xFF;
+  Color color = Color((r << 3) | (r >> 2), (g << 2) | (g >> 4), (b << 3) | (b >> 2), a);
   return color;
 }
+
 Color Image::get_grayscale_pixel_(int x, int y) const {
   const uint32_t pos = (x + y * this->width_);
   const uint8_t gray = progmem_read_byte(this->data_start_ + pos);
diff --git a/esphome/components/image/image.h b/esphome/components/image/image.h
index a8a8aab2c2..40370d18da 100644
--- a/esphome/components/image/image.h
+++ b/esphome/components/image/image.h
@@ -17,24 +17,6 @@ enum ImageType {
   IMAGE_TYPE_RGBA = 4,
 };
 
-inline int image_type_to_bpp(ImageType type) {
-  switch (type) {
-    case IMAGE_TYPE_BINARY:
-      return 1;
-    case IMAGE_TYPE_GRAYSCALE:
-      return 8;
-    case IMAGE_TYPE_RGB565:
-      return 16;
-    case IMAGE_TYPE_RGB24:
-      return 24;
-    case IMAGE_TYPE_RGBA:
-      return 32;
-  }
-  return 0;
-}
-
-inline int image_type_to_width_stride(int width, ImageType type) { return (width * image_type_to_bpp(type) + 7u) / 8u; }
-
 class Image : public display::BaseImage {
  public:
   Image(const uint8_t *data_start, int width, int height, ImageType type);
@@ -44,6 +26,25 @@ class Image : public display::BaseImage {
   const uint8_t *get_data_start() const { return this->data_start_; }
   ImageType get_type() const;
 
+  int get_bpp() const {
+    switch (this->type_) {
+      case IMAGE_TYPE_BINARY:
+        return 1;
+      case IMAGE_TYPE_GRAYSCALE:
+        return 8;
+      case IMAGE_TYPE_RGB565:
+        return this->transparent_ ? 24 : 16;
+      case IMAGE_TYPE_RGB24:
+        return 24;
+      case IMAGE_TYPE_RGBA:
+        return 32;
+    }
+    return 0;
+  }
+
+  /// Return the stride of the image in bytes, that is, the distance in bytes
+  /// between two consecutive rows of pixels.
+  uint32_t get_width_stride() const { return (this->width_ * this->get_bpp() + 7u) / 8u; }
   void draw(int x, int y, display::Display *display, Color color_on, Color color_off) override;
 
   void set_transparency(bool transparent) { transparent_ = transparent; }
diff --git a/esphome/components/online_image/online_image.cpp b/esphome/components/online_image/online_image.cpp
index 480bad6aca..1786809dfa 100644
--- a/esphome/components/online_image/online_image.cpp
+++ b/esphome/components/online_image/online_image.cpp
@@ -215,16 +215,10 @@ void OnlineImage::draw_pixel_(int x, int y, Color color) {
     }
     case ImageType::IMAGE_TYPE_RGB565: {
       uint16_t col565 = display::ColorUtil::color_to_565(color);
-      if (this->has_transparency()) {
-        if (col565 == 0x0020) {
-          col565 = 0;
-        }
-        if (color.w < 0x80) {
-          col565 = 0x0020;
-        }
-      }
       this->buffer_[pos + 0] = static_cast<uint8_t>((col565 >> 8) & 0xFF);
       this->buffer_[pos + 1] = static_cast<uint8_t>(col565 & 0xFF);
+      if (this->has_transparency())
+        this->buffer_[pos + 2] = color.w;
       break;
     }
     case ImageType::IMAGE_TYPE_RGBA: {
diff --git a/esphome/components/online_image/online_image.h b/esphome/components/online_image/online_image.h
index 51c11478cd..017402a088 100644
--- a/esphome/components/online_image/online_image.h
+++ b/esphome/components/online_image/online_image.h
@@ -86,13 +86,9 @@ class OnlineImage : public PollingComponent,
   Allocator allocator_{Allocator::Flags::ALLOW_FAILURE};
 
   uint32_t get_buffer_size_() const { return get_buffer_size_(this->buffer_width_, this->buffer_height_); }
-  int get_buffer_size_(int width, int height) const {
-    return std::ceil(image::image_type_to_bpp(this->type_) * width * height / 8.0);
-  }
+  int get_buffer_size_(int width, int height) const { return (this->get_bpp() * width + 7u) / 8u * height; }
 
-  int get_position_(int x, int y) const {
-    return ((x + y * this->buffer_width_) * image::image_type_to_bpp(this->type_)) / 8;
-  }
+  int get_position_(int x, int y) const { return (x + y * this->buffer_width_) * this->get_bpp() / 8; }
 
   ESPHOME_ALWAYS_INLINE bool auto_resize_() const { return this->fixed_width_ == 0 || this->fixed_height_ == 0; }
 
diff --git a/tests/components/image/common.yaml b/tests/components/image/common.yaml
new file mode 100644
index 0000000000..313da6bc0b
--- /dev/null
+++ b/tests/components/image/common.yaml
@@ -0,0 +1,38 @@
+image:
+  - id: binary_image
+    file: ../../pnglogo.png
+    type: BINARY
+    dither: FloydSteinberg
+  - id: transparent_transparent_image
+    file: ../../pnglogo.png
+    type: TRANSPARENT_BINARY
+  - id: rgba_image
+    file: ../../pnglogo.png
+    type: RGBA
+    resize: 50x50
+  - id: rgb24_image
+    file: ../../pnglogo.png
+    type: RGB24
+    use_transparency: yes
+  - id: rgb565_image
+    file: ../../pnglogo.png
+    type: RGB565
+    use_transparency: no
+  - id: web_svg_image
+    file: https://raw.githubusercontent.com/esphome/esphome-docs/a62d7ab193c1a464ed791670170c7d518189109b/images/logo.svg
+    resize: 256x48
+    type: TRANSPARENT_BINARY
+  - id: web_tiff_image
+    file: https://upload.wikimedia.org/wikipedia/commons/b/b6/SIPI_Jelly_Beans_4.1.07.tiff
+    type: RGB24
+    resize: 48x48
+  - id: web_redirect_image
+    file: https://avatars.githubusercontent.com/u/3060199?s=48&v=4
+    type: RGB24
+    resize: 48x48
+  - id: mdi_alert
+    file: mdi:alert-circle-outline
+    resize: 50x50
+  - id: another_alert_icon
+    file: mdi:alert-outline
+    type: BINARY
diff --git a/tests/components/image/test.esp32-ard.yaml b/tests/components/image/test.esp32-ard.yaml
index 9dd44d177f..818e720221 100644
--- a/tests/components/image/test.esp32-ard.yaml
+++ b/tests/components/image/test.esp32-ard.yaml
@@ -13,41 +13,5 @@ display:
     reset_pin: 21
     invert_colors: true
 
-image:
-  - id: binary_image
-    file: ../../pnglogo.png
-    type: BINARY
-    dither: FloydSteinberg
-  - id: transparent_transparent_image
-    file: ../../pnglogo.png
-    type: TRANSPARENT_BINARY
-  - id: rgba_image
-    file: ../../pnglogo.png
-    type: RGBA
-    resize: 50x50
-  - id: rgb24_image
-    file: ../../pnglogo.png
-    type: RGB24
-    use_transparency: yes
-  - id: rgb565_image
-    file: ../../pnglogo.png
-    type: RGB565
-    use_transparency: no
-  - id: web_svg_image
-    file: https://raw.githubusercontent.com/esphome/esphome-docs/a62d7ab193c1a464ed791670170c7d518189109b/images/logo.svg
-    resize: 256x48
-    type: TRANSPARENT_BINARY
-  - id: web_tiff_image
-    file: https://upload.wikimedia.org/wikipedia/commons/b/b6/SIPI_Jelly_Beans_4.1.07.tiff
-    type: RGB24
-    resize: 48x48
-  - id: web_redirect_image
-    file: https://avatars.githubusercontent.com/u/3060199?s=48&v=4
-    type: RGB24
-    resize: 48x48
-  - id: mdi_alert
-    file: mdi:alert-circle-outline
-    resize: 50x50
-  - id: another_alert_icon
-    file: mdi:alert-outline
-    type: BINARY
+<<: !include common.yaml
+
diff --git a/tests/components/image/test.esp32-c3-ard.yaml b/tests/components/image/test.esp32-c3-ard.yaml
index c0b2779773..4dae9cd5ec 100644
--- a/tests/components/image/test.esp32-c3-ard.yaml
+++ b/tests/components/image/test.esp32-c3-ard.yaml
@@ -13,41 +13,4 @@ display:
     reset_pin: 10
     invert_colors: true
 
-image:
-  - id: binary_image
-    file: ../../pnglogo.png
-    type: BINARY
-    dither: FloydSteinberg
-  - id: transparent_transparent_image
-    file: ../../pnglogo.png
-    type: TRANSPARENT_BINARY
-  - id: rgba_image
-    file: ../../pnglogo.png
-    type: RGBA
-    resize: 50x50
-  - id: rgb24_image
-    file: ../../pnglogo.png
-    type: RGB24
-    use_transparency: yes
-  - id: rgb565_image
-    file: ../../pnglogo.png
-    type: RGB565
-    use_transparency: no
-  - id: web_svg_image
-    file: https://raw.githubusercontent.com/esphome/esphome-docs/a62d7ab193c1a464ed791670170c7d518189109b/images/logo.svg
-    resize: 256x48
-    type: TRANSPARENT_BINARY
-  - id: web_tiff_image
-    file: https://upload.wikimedia.org/wikipedia/commons/b/b6/SIPI_Jelly_Beans_4.1.07.tiff
-    type: RGB24
-    resize: 48x48
-  - id: web_redirect_image
-    file: https://avatars.githubusercontent.com/u/3060199?s=48&v=4
-    type: RGB24
-    resize: 48x48
-  - id: mdi_alert
-    file: mdi:alert-circle-outline
-    resize: 50x50
-  - id: another_alert_icon
-    file: mdi:alert-outline
-    type: BINARY
+<<: !include common.yaml
diff --git a/tests/components/image/test.esp32-c3-idf.yaml b/tests/components/image/test.esp32-c3-idf.yaml
index c0b2779773..4dae9cd5ec 100644
--- a/tests/components/image/test.esp32-c3-idf.yaml
+++ b/tests/components/image/test.esp32-c3-idf.yaml
@@ -13,41 +13,4 @@ display:
     reset_pin: 10
     invert_colors: true
 
-image:
-  - id: binary_image
-    file: ../../pnglogo.png
-    type: BINARY
-    dither: FloydSteinberg
-  - id: transparent_transparent_image
-    file: ../../pnglogo.png
-    type: TRANSPARENT_BINARY
-  - id: rgba_image
-    file: ../../pnglogo.png
-    type: RGBA
-    resize: 50x50
-  - id: rgb24_image
-    file: ../../pnglogo.png
-    type: RGB24
-    use_transparency: yes
-  - id: rgb565_image
-    file: ../../pnglogo.png
-    type: RGB565
-    use_transparency: no
-  - id: web_svg_image
-    file: https://raw.githubusercontent.com/esphome/esphome-docs/a62d7ab193c1a464ed791670170c7d518189109b/images/logo.svg
-    resize: 256x48
-    type: TRANSPARENT_BINARY
-  - id: web_tiff_image
-    file: https://upload.wikimedia.org/wikipedia/commons/b/b6/SIPI_Jelly_Beans_4.1.07.tiff
-    type: RGB24
-    resize: 48x48
-  - id: web_redirect_image
-    file: https://avatars.githubusercontent.com/u/3060199?s=48&v=4
-    type: RGB24
-    resize: 48x48
-  - id: mdi_alert
-    file: mdi:alert-circle-outline
-    resize: 50x50
-  - id: another_alert_icon
-    file: mdi:alert-outline
-    type: BINARY
+<<: !include common.yaml
diff --git a/tests/components/image/test.esp32-idf.yaml b/tests/components/image/test.esp32-idf.yaml
index e903afea1f..814f16c36c 100644
--- a/tests/components/image/test.esp32-idf.yaml
+++ b/tests/components/image/test.esp32-idf.yaml
@@ -13,41 +13,4 @@ display:
     reset_pin: 21
     invert_colors: true
 
-image:
-  - id: binary_image
-    file: ../../pnglogo.png
-    type: BINARY
-    dither: FloydSteinberg
-  - id: transparent_transparent_image
-    file: ../../pnglogo.png
-    type: TRANSPARENT_BINARY
-  - id: rgba_image
-    file: ../../pnglogo.png
-    type: RGBA
-    resize: 50x50
-  - id: rgb24_image
-    file: ../../pnglogo.png
-    type: RGB24
-    use_transparency: yes
-  - id: rgb565_image
-    file: ../../pnglogo.png
-    type: RGB565
-    use_transparency: no
-  - id: web_svg_image
-    file: https://raw.githubusercontent.com/esphome/esphome-docs/a62d7ab193c1a464ed791670170c7d518189109b/images/logo.svg
-    resize: 256x48
-    type: TRANSPARENT_BINARY
-  - id: web_tiff_image
-    file: https://upload.wikimedia.org/wikipedia/commons/b/b6/SIPI_Jelly_Beans_4.1.07.tiff
-    type: RGB24
-    resize: 48x48
-  - id: web_redirect_image
-    file: https://avatars.githubusercontent.com/u/3060199?s=48&v=4
-    type: RGB24
-    resize: 48x48
-  - id: mdi_alert
-    file: mdi:alert-circle-outline
-    resize: 50x50
-  - id: another_alert_icon
-    file: mdi:alert-outline
-    type: BINARY
+<<: !include common.yaml
diff --git a/tests/components/image/test.esp8266-ard.yaml b/tests/components/image/test.esp8266-ard.yaml
index 5a96ed9497..f963022ff4 100644
--- a/tests/components/image/test.esp8266-ard.yaml
+++ b/tests/components/image/test.esp8266-ard.yaml
@@ -13,41 +13,4 @@ display:
     reset_pin: 16
     invert_colors: true
 
-image:
-  - id: binary_image
-    file: ../../pnglogo.png
-    type: BINARY
-    dither: FloydSteinberg
-  - id: transparent_transparent_image
-    file: ../../pnglogo.png
-    type: TRANSPARENT_BINARY
-  - id: rgba_image
-    file: ../../pnglogo.png
-    type: RGBA
-    resize: 50x50
-  - id: rgb24_image
-    file: ../../pnglogo.png
-    type: RGB24
-    use_transparency: yes
-  - id: rgb565_image
-    file: ../../pnglogo.png
-    type: RGB565
-    use_transparency: no
-  - id: web_svg_image
-    file: https://raw.githubusercontent.com/esphome/esphome-docs/a62d7ab193c1a464ed791670170c7d518189109b/images/logo.svg
-    resize: 256x48
-    type: TRANSPARENT_BINARY
-  - id: web_tiff_image
-    file: https://upload.wikimedia.org/wikipedia/commons/b/b6/SIPI_Jelly_Beans_4.1.07.tiff
-    type: RGB24
-    resize: 48x48
-  - id: web_redirect_image
-    file: https://avatars.githubusercontent.com/u/3060199?s=48&v=4
-    type: RGB24
-    resize: 48x48
-  - id: mdi_alert
-    file: mdi:alert-circle-outline
-    resize: 50x50
-  - id: another_alert_icon
-    file: mdi:alert-outline
-    type: BINARY
+<<: !include common.yaml
diff --git a/tests/components/image/test.host.yaml b/tests/components/image/test.host.yaml
new file mode 100644
index 0000000000..29509db66c
--- /dev/null
+++ b/tests/components/image/test.host.yaml
@@ -0,0 +1,8 @@
+display:
+  - platform: sdl
+    auto_clear_enabled: false
+    dimensions:
+      width: 480
+      height: 480
+
+<<: !include common.yaml
diff --git a/tests/components/image/test.rp2040-ard.yaml b/tests/components/image/test.rp2040-ard.yaml
index 4c40ca464f..5167c99a7d 100644
--- a/tests/components/image/test.rp2040-ard.yaml
+++ b/tests/components/image/test.rp2040-ard.yaml
@@ -13,41 +13,4 @@ display:
     reset_pin: 22
     invert_colors: true
 
-image:
-  - id: binary_image
-    file: ../../pnglogo.png
-    type: BINARY
-    dither: FloydSteinberg
-  - id: transparent_transparent_image
-    file: ../../pnglogo.png
-    type: TRANSPARENT_BINARY
-  - id: rgba_image
-    file: ../../pnglogo.png
-    type: RGBA
-    resize: 50x50
-  - id: rgb24_image
-    file: ../../pnglogo.png
-    type: RGB24
-    use_transparency: yes
-  - id: rgb565_image
-    file: ../../pnglogo.png
-    type: RGB565
-    use_transparency: no
-  - id: web_svg_image
-    file: https://raw.githubusercontent.com/esphome/esphome-docs/a62d7ab193c1a464ed791670170c7d518189109b/images/logo.svg
-    resize: 256x48
-    type: TRANSPARENT_BINARY
-  - id: web_tiff_image
-    file: https://upload.wikimedia.org/wikipedia/commons/b/b6/SIPI_Jelly_Beans_4.1.07.tiff
-    type: RGB24
-    resize: 48x48
-  - id: web_redirect_image
-    file: https://avatars.githubusercontent.com/u/3060199?s=48&v=4
-    type: RGB24
-    resize: 48x48
-  - id: mdi_alert
-    file: mdi:alert-circle-outline
-    resize: 50x50
-  - id: another_alert_icon
-    file: mdi:alert-outline
-    type: BINARY
+<<: !include common.yaml