前言介紹
- 這款 WordPress 外掛「Inline Image Base64 – inline specific images into the HTML」是 2021-04-18 上架。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2025-04-18，距離現在已有 16 天。
- 外掛最低要求 WordPress 4.6 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
giuse |
外掛標籤
layout shift | Speed Optimisation |
內容簡介
使用 Inline Image Base64 外掛，您可以將特定圖片以 base64 直接嵌入到 HTML 內。
您還可以使用它來禁用特定圖片的懶加載功能。
啟用後，當您在媒體庫中打開附件時，您將看到兩個核取方塊。一個是為了將圖像嵌入 HTML，另一個則是用於禁用本機懶加載。
將第一個出現在視口中的圖像嵌入 HTML 中，可以顯著提高渲染性能。
對於輕量級圖像，效益會更高，例如輕量級商標等。
如果對太大的圖像進行嵌入，HTML 的大小可能會變得太大。
將圖像嵌入 HTML 中對於不超過 20-30 kB 的圖像非常有用。但這取決於您已有的 HTML 大小。
建議使用 Google PageSpeed Insights 進行一些速度測試，以檢查效益。
上傳已具有正確尺寸的圖像。
為了達到最小的內容佈局移位，最好使用自定義 CSS 為圖像指定寬度和高度。
無論如何，建議禁用第一次渲染期間出現在視口中的所有圖像的本機懶加載。
禁用這些圖像的懶加載只能帶來好處。
您將在媒體庫中的每個附件中找到設置，而非這個外掛專屬的設置頁面。
如何將圖像嵌入 HTML
安裝並啟用 Inline Image Base64
前往媒體庫，打開要嵌入 HTML 的圖像
勾選「嵌入圖像」核取方塊
如何禁用特定圖像的本機懶加載
安裝並啟用 Inline Image Base64
前往媒體庫，打開要不加載懶加載的圖像
取消勾選「本機懶加載」核取方塊
建議事項
始終禁用第一次渲染期間出現在頁面視口中的圖像的懶加載
只嵌入在頁面初始加載期間出現在視口中的圖像，前提是它們沒有太大。最多不超過 20-30 kB，但這取決於 HTML 的大小。
在將圖像嵌入後，建議使用 Google PageSpeed Insights 進行測試，以評估可能導致太大 HTML 的效益和缺點。
幫助
如有任何問題，請勿猶豫在支援論壇開啟討論串。
原文外掛簡介
With Inline Image Base64 you can inline specific images directly into the HTML as base64.
You can also use it to disable the native lazy loading for specific images.
After successful activation, you will see two checkboxes when you open an attachment in the media library. One for inlining the image and another one to disable the native lazy loading.
Inlining the first image that appears in the viewport can drastically improve the rendering performance.
The benefits will be higher for light images. A typical example is a light logo.
If you do it for too big images the size of the HTML may become too big.
Inlining images is very useful for images that are not more than 20-30 kB. But it depends on the size of the HTML that you already have.
We suggest perform some speed tests with Google PageSpeed Insights to check the benefits.
Upload an image that already has the right dimensions.
To have a minimum Content Layout Shift, better you assign the width and hight to the image with custom CSS.
In any case, we suggest disabling the native lazy loading for all the images that appear on the viewport during the first rendering.
Disabling the lazy loading for those images can only give benefits.
You will find the settings on every single attachment in the media library, no dedicated settings page for this plugin.
How to inline an image into the HTML
Install and activate Inline Image base64
Go to the media library and open the image that you want to inline into the HTML
Check the checkbox “Inline Image”
How to disable the native lazy loading of a specific image
Install and activate Inline Image base64
Go to the media library and open the image that you want to load without lazy loading
Unheck the checkbox “Native Lazy Loading”
Suggestions
Always disable the lazy loading for the images that appear in the viewport during the page loading
Inline only the images that appears in the viewport during the page loading, only if they aren’t too big. Until 20-30 kB should be ok, but it depends on the size of the HTML.
Perform some tests with Google PageSpeed Insights before and after inlining an image. So you can evaluate the benefits and drawbacks that could be caused by a too large HTML
Help
For any kind of issue, don’t hesitate to open a thread on the Support Forum
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Inline Image Base64 – inline specific images into the HTML」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
0.0.1 | 0.0.2 | 0.0.3 | 0.0.4 | trunk |
延伸相關外掛（你可能也想知道）
暫無相關外掛推薦。