跳轉到主要內容

使用L8圖像格式減少存儲空間消耗

L8格式的圖像佔用的快閃記憶體空間較少,比諸如ARGB8888等格式的繪製速度更快。

L8格式的圖像包含調色板和像素陣列:調色板列出了指定的至多256種顏色,為16位格式RGB565、24位格式RGB888或32位格式ARGB8888。 像素陣列包含每個像素的一個位元組。 該位元組是調色板(顏色清單)索引,指向像素的顏色。 為了繪製L8圖像,TouchGFX框架逐一讀取像素,在調色板中查找顏色,並將這些寫入影像緩衝。 這些操作是自動完成的,通過STM32 Chrom-ART硬體加速器(如果硬體上有)進行加速。

8位元每像素代表一幅L8圖像可使用256種不同顏色。 另一幅L8圖像可使用256種其他顏色,這是因為兩幅圖像有各自的調色板。

一幅有4 x 4個像素的L8圖像和一個包含4種顏色的調色板

每個像素一個位元組(8位元)。 因此,像素大小等於(寬度 x 高度)個位元組。 調色板顏色可以是16位、24位或32位顏色。 因此,每種顏色定義將佔用2、3或4個位元組。

立體圖像應存儲在L8_RGB888中。 如果圖像是透明的,則必須使用32位格式(ARGB8888):

格式影像緩衝格式支援透明像素 由DMA2D支援
L8_RGB56516位RGB565
L8_RGB88824位RGB888
L8_ARGB8888二者兼有

DMA2D不支援帶RGB565調色板的L8格式。 這意味著不會對這種格式的繪製圖像執行硬體加速。 因此,除非您使用的平臺沒有DMA2D(例如:STM32G0或STM32F410),否則不應使用這種格式。

如果您使用了一個串列快閃記憶體(非存儲映射)來存儲圖像,並使用了一個16位影像緩衝區(格式為RGB565),那麼您應該使用L8_RGB565格式,因為色彩格式與影像緩衝區格式匹配,且複製到影像緩衝區會更快。

下表顯示了首選的L8格式:

影像緩衝格式有DMA2D的平臺 無DMA2D的平臺
RGB565L8_RGB888L8_RGB565
RGB888L8_RGB888L8_RGB888
ARGB8888L8_RGB888L8_RGB888

透明圖像應始終在L8_ARGB8888中。

Further reading
  • 點選連結閱讀關於調色板圖像格式的更多內容:https://en.wikipedia.org/wiki/Indexed_color
  • L8圖像

    這是一幅典型的標誌圖像。 這幅圖像只使用了16種不同顏色:

    200 x 200像素L8圖像,有16種24位顏色。

    此圖像佔用的快閃記憶體空間明顯小於標準24位格式(RGB888)的原始圖像。 下表列出了此實心圖像的三種不同調色板格式和非L8格式的快閃記憶體占用量。

    格式像素大小(位元組)調色板大小(位元組)總大小(位元組)縮減率(%)
    RGB888120,0000120,000-
    L8_RGB56540,0003240,03266.6
    L8_RGB88840,0004840,04866.6
    L8_ARGB888840,0006440,06466.6

    我們看到大小縮減率很大,調色板的大小在中等尺寸圖像上顯得微不足道。

    在TouchGFX Designer中使用L8圖像

    TouchGFX中L8圖像格式的使用十分簡單。 只需設定圖像轉換器,即可將圖像從PNG轉換為L8格式。 下面我們將介紹整個過程:

    Start a new project in TouchGFX Designer. 將圖像複製到新專案中的assets/images資料夾:

    TouchGFX專案的Images資料夾

    Now go to TouchGFX Designer and click the Images tab in the top bar and select the image:

    進入TouchGFX Designer的圖像視圖

    在視窗右側,選擇圖像格式L8_RGB888(本例運行24位顏色)。

    現在,可以在畫布上插入圖像小工具(這裡我們在背景上插入一個方框):

    TouchGFX Designer中畫布上的圖像小工具

    無需在UI程式碼中做任何更改。 根據我們在“圖像”選項卡上所做配置,圖像轉換器轉換PNG檔並生成L8格式的圖像。

    透明圖像

    如上文所述,還可以對有透明像素的圖像使用L8圖像。

    32位元格式ARGB8888的170 x 60像素按鈕圖像

    以上圖像使用108種顏色(許多色度的藍色)。 此圖像可使用格式L8_ARGB8888。 大小將顯著縮減:

    格式像素大小(位元組)調色板大小(位元組)總大小(位元組)縮減率%
    ARGB888840,800040,800-
    L8_ARGB888810,20043210,63273.9%

    將調色板移至內部快閃記憶體

    在使用圖像非記憶體映射之快閃記憶體的平台上(如STM32G0、STM32U0或STM32C0),需將L8調色板資料移動至內部快閃記憶體, 否則將不會繪製L8圖像。

    設定圖像額外資料在內部快閃記憶體中的位置。

    The palette of an image can be moved to internal flash by changing the "Extra Section" to "IntFlashSection" in TouchGFX Designer (Open the Images tab, find your image, and go to the right-most column).

    L8圖像壓縮

    選擇L8圖像的L8壓縮可進一步減少記憶體使用容量。 圖像轉換器支援3種壓縮演算法(L4、RLE、LZW9)。 In TouchGFX Designer you can set the Compression value to "Auto", this will let the Image Converter select the suitable algorithm for your image, alternatively you can force a specific algorithm. 為了減少使用記憶體,有時需要付出CPU負載增加的代價,因為需要在繪製圖像時直接解壓縮至影像緩衝區。

    選擇L8圖像壓縮

    Note
    L8壓縮圖像會預設停用抖動演算法及Alpha抖動。 如有需要請在各個L8圖像選擇特定抖動演算法及Alpha抖動。

    The L8 image compression has a default setting which is configurable on the Default Image Configuration tab in TouchGFX Designer, see screenshot below. 您可在其中選擇整個應用程式的預設設定。

    預設L8圖像壓縮設定

    Caution
    壓縮圖像無法搭配使用所有小工具。 請參閱清單
    Further reading

    以下我們將使用先前的L8圖像示範各個演算法的壓縮功能,以及解壓縮的效能。

    我們使用STM32F429-DISCO搭配包含4個螢幕的應用程式,並利用以下各種不同壓縮:

    • 無壓縮
    • L4壓縮
    • RLE壓縮
    • LZW9壓縮

    範例螢幕(240x320)包含在STM32F429-DISCO執行的L8圖像

    Note
    停用DMA2D以便僅比較軟體渲染。
    格式壓縮像素大小
    (位元組)
    調色板+標頭大小
    (位元組)
    總大小
    (位元組)
    縮減率
    (%)
    效能
    (渲染時間以ms為單位)
    RGB56580,000080,0000-
    L8_RGB56540,00032 + 440,03650.02.12
    L8_RGB565L420,00032 + 420,03675.02.34
    L8_RGB565RLE3,19732 + 1643,39395.71.66
    L8_RGB565LZW94,47532 + 1684,67596.17.45

    上表顯示壓縮後的記憶體縮減率,以及繪製圖像時的解壓縮效能。 壓縮(縮減率)和解壓縮(效能)高度取決於圖像複雜度及色彩數量。 每個演算法都有自己的應用限制,例如L4限制為16種色彩,RLE限制為64種色彩,而LZW9適用於所有L8圖像,也就是沒有限制。 此外,雖然L4及RLE在繪製圖像時效能高於LZW9,但如前所述,這兩種演算法無法涵蓋所有L8圖像。 如果是修剪過的圖像,所有演算法的效能都會降低。 一般來說,這表示您在使用L8圖像壓縮時必須考量色彩數(品質要求)、可用的快閃記憶體(縮減要求),以及應用程式的複雜度(動畫)。 舉例來說, 如果您的圖像超過64種色彩,且您使用LZW9,但這樣需要付出高昂的效能代價,因此如果品質要求允許的話,您可以嘗試將圖像中的色彩數減少至64種以下,然後選擇使用RLE。 如果以上作法不可能,您最好使用未壓縮的L8圖像。 請參閱ImageMagick以瞭解如何減少圖像中的色彩。

    如果您並沒有要在應用程式使用L8圖像壓縮,就應該停用此項功能;下方的TouchGFX Designer螢幕擷取畫面顯示如何停用。

    停用L8圖像壓縮

    小工具中的已壓縮及未壓縮L8圖像範例

    雖然L8圖像壓縮無法用於所有小工具,但仍可能在由多個圖像組成的小工具中(例如Gauge及Analog Clock),使用部分壓縮圖像及其他未壓縮圖像。 以下範例顯示如何在Gauge小工具使用壓縮背景及未壓縮的指標。

    用於Gauge小工具的圖像

    Gauge小工具

    將圖像轉換為256色以下

    許多圖像使用的顏色多於256種。 這對照片級真實感的圖像或有漸變的圖像而言很常見。 These images cannot directly be converted to L8 image format in TouchGFX Designer, because they contain to many colors.

    但是,在許多情況下,可以減少特定圖像中使用的顏色數量。 在理想情況下,平面設計師將以256色轉換/提供圖像,但圖像操作工具也可以執行轉換,同時不會過度損失圖像品質。

    Paint.NET

    最簡單的方式是使用Paint.NET。 打開原始圖像,使用“Save As”功能將圖像保存為另一個檔。 在“Save Configuration”對話方塊中,選擇8位元作為像素深度:

    Paint.NET將圖像保存為8位元格式

    現在,在專案中使用新的PNG。 Remember to select the L8_ARGB8888 format in the Images tab in TouchGFX Designer. 在許多情況下,陰影處理不夠好,但有透明邊緣的圖示看起來不錯。 可以調整“透明度閾值”,某些情況下能夠改善結果。

    ImageMagick

    另一種合適的工具是ImageMagick(從www.imagemagick.org下載),有時也能獲得更好的L8圖像。 此工具可以從指令行轉換圖像。 因此,它適合用在腳本中。 使用以下指令,可將clock_bg.png轉換為使用至多256種顏色的圖像:

    magick convert clock_bg.png -colors 256 clock_bg_l8_256.png

    您也可以在啟用RLE或L4壓縮演算法的情況下,將色彩減少為256色以下。

    magick convert clock_bg.png -colors 64 clock_bg_l8_64.png

    ImageMagick還可以告訴您圖像中使用了多少種顏色。 使用該指令:

    magick identify -format %k Blue_Buttons_Round_Edge_small.png

    比較

    下面提供了三幅圖像(原圖、使用Paint.NET的L8圖像和使用ImageMagick的L8圖像)用於比較:

    時鐘圖像比較,從左到右:原圖、Paint.NET和ImageMagick

    中間的時鐘喪失了邊界陰影中的細節。 兩種情況下,時鐘背景的中央部分看起來還可以。

    手動配置

    It is also possible to select image formats and compression algorithm without using TouchGFX Designer. 在專案根目錄的檔案application.config中指定設定:

    application.config
    {
    "image_configuration": {
    images": {
    "Blue_Buttons_Round_Edge_small.png": {
    "format": "L8_ARGB8888",
    "l8_compression": "LZW9"
    }
    },
    "dither_algorithm": "2",
    "alpha_dither": "yes",
    "layout_rotation": "0",
    "opaque_image_format": "RGB888",
    "nonopaque_image_format": "ARGB8888",
    "section": "ExtFlashSection",
    "extra_section": "ExtFlashSection",
    "l8_compression": "yes"
    }
    }

    “Image_configuration”下的“images”部分指定了每幅圖像的格式。 這裡沒有提及的圖像將以預設格式(opaque_image_format或nonopaque_image_format)生成。

    We recommend using TouchGFX Designer for image configuration when possible.