「提供 next-gen 格式的圖片」是什麼意思

作者： -

如果你在改善網站速度，對這句話想必一定很眼熟（沒錯，就是 PageSpeed Insights），但到底什麼是 next-gen？簡單來說就是 WebP、AVIF、JPEG2000、JPEG XR 等格式的圖片。

WebP

WebP 目前是這四種格式中支援度最廣的格式，且支援去背和透明度。

它除了 IE11 之外，基本上都支援；而 safari 則要看版本夠不夠新（macOS 11）。

WebP的支援度
WebP 的瀏覽器支援度

另外，它有一個很像的名詞叫 WebM 影片格式：

WebM 是一個由 Google 資助的專案（WebP 也和 Google 有關），目標是構建一個開放的、免著作權費用的影片格式檔。該影片格式能提供高品質的影片壓縮以配合 HTML5 使用。（wiki）用途基本上一樣是為了改善網頁載入速度。

AVIF

Netflix 聲稱 AVIF 將會是下一代的圖像編碼演算法，並稱它對於他們的影音串流媒體網站而言，是取代 JPEG 格式的最佳選擇。

不過，相較於 2010 年就出現的 WebP，2019 年才誕生的 AVIF 支援度在2023年之後才追趕上來。

AVIF的支援度
AVIF的瀏覽器支援度

JPEG 2000

JPEG 2000 比前兩者更早出現，副檔名是 .jp2 或 .j2c，跟 AVIF 一樣在當年被吹捧成下一代圖像的壓縮標準，但至今幾乎沒有網站在用，也只有 safari 有支援，其它瀏覽器完全不想理它。

JPEG2000的支援度
JPEG2000 的瀏覽器支援度

JPEG XR、JPEG XL

JPEG XR（JPEG extended range）是基於由 Microsoft 所開發的 HD Photo 的圖像格式，所以……基本上只有 IE9~IE11 和舊版本的 Edge 支援。

JPEG XR的支援度
IE 專屬的 JPEG XR


JPEG XL 則發表於 2017 年，但就目前為止的支援度是慘不忍賭，完全沒有瀏覽器支援。


實際運用

基本上，還是要靠 HTML 的 picture 來使用最安全，或者是寫程式判斷瀏覽器支援度，然後載入相對應的圖片格式。個人認為，目前使用 WebP + jpg/png/gif 的應對方式就夠了，頂多再加個 AVIF，但效益如何就自己判斷了。

再來就是 server 端有沒有設定宣告的問題。舉例來說，如果你是用 web.config 設定網站的話，記得要宣告 WebP 或 AVIF 是圖片檔：


<staticContent>
  <mimeMap fileExtension=".webp" mimeType="image/webp" />
  <mimeMap fileExtension=".avif" mimeType="image/avif" />
</staticContent>

忘記宣告的話，使用者的瀏覽器就算支援該格式也看不到圖片，呈現出來的畫面跟找不到圖片一樣。

結語

最後，除非有什麼重大錯誤，要不然不要對 PageSpeed Insights 的分數太認真，要不要用 next-gen 格式的圖片也是網站管理員或開發團隊自己決定就好。雖然看到綠色的分數很爽，但若一心追求分數而把使用者需求和開發維護網站的效率拋在腦後，豈不是本未倒置了嗎？


留言

張貼留言

這個網誌中的熱門文章

用CSS的 min() max() 與vw，設計有極限值的RWD響應式文字

作者： -
圖片
你是否有想過，max/min font size 的解法？能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size？答案是可以的！ 文章目錄： vw 基本運用 極限問題 Media Query max()、min()、clamp() If you just want the best solution, just click "max()、min()、clamp()" . 為何使用 vw？ 在編寫 CSS 的時候，你可能習慣將網頁上的字體大小(font-size)使用 rem、em、px 等單位設定，但在講究 RWD 的情況下，甚至是 Google SEO 著重在手機介面的現在，總是會遇到桌機看起來很舒適，但畫面一變小，標題類的字就又太佔版面。 而使用 viewport width (vw) 當作字體大小的單位，就可以讓字體隨著視窗寬度的不同自動縮放其大小。 各瀏覽器支援 vw 的情況 vw 基本運用： vw 是視窗寬度的百分比，所以 1vw = 1%的視窗寬度。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。 h1,.h1{ font-size: 1.5vw; } 除了直接運用之外，也能搭配 calc 使用： h1,.h1{ font-size: calc(10px + 1.5vw); } 極限問題（max or min font size） 這是不管設計什麼東西都存在且必需要考慮的事情，vw 也不例外。 設計網頁一定會設一個網頁寬度，以此寬度設定做為最大值；而人的視力有限，以 16px 當作最小值。所以，當視窗被拉到極大或極小的時候，以 vw 為單位的字體勢必會變成你不想要的樣子，這時候我們就必需設定最大值和最小值，讓字體在合理的區間變動，而 media query 和 min()、max()就出現在解決辦法的清單之中： Media Query 下面為使用的例子： h1,.h1{ font-size: 3.5vw; } @media (min-width: 1600px) { h1,.h1{ font-size: 40px; } } @
READ THIS »

10 steps、「ライブ会場を沸らせる、フロアを沸かす」ミーム動画の作り方 (Viggle AI)

作者： -
圖片
日本近期流行的「ライブ会場を沸る」或是稱為「フロアを沸かす」的迷音AI短片，是怎麼製作生成的？下面我們用英文和影片帶你一步一步做，完全不用動腦。 （続いて英語でステップバイステップで説明します。操作手順動画も用意しているので、頭を使わずに簡単にできます。） 操作步驟 steps: Enter to Viggle AI's Discord server (https://discord.gg/viggle). Select any of these rooms named "animate" and click to enter. Type "/" to bring up a list of commands. Select "animate" from the list of commands. Upload your image. motion_prompt: type "$lil_yachty_stage_entrance". background: select "From template". finetune: select "On". Hit Enter or click on the submit button to send the command. Wait for approximately 1 to 5 minutes for the AI animation to be generated. 日本語操作手順： Viggle AIのDiscordサーバーに入る(https://discord.gg/viggle)。 任意の「animate」ルームを選択して、クリックして入る。 "/"を入力して、コマンドのリストを表示し、「animate」を選択します。 コマンドのリストから「animate」を選択します。 画像をアップロードします。 motion_prompt: "$lil_yachty_stage_entrance"を入力します。 background：「From
READ THIS »

Google Search Console 網頁發現方式多了「參照網頁」

作者： -
圖片
在檢查網址中的「涵蓋範圍」，發現方式新增了參照網頁（Referring page），讓網站管理者知道Google是用哪些方式得知這個頁面。 數據說明 參照網頁可能直接連到該URL，或者是連到該頁面的上一層或更上層。如果不存在任何值，並不意味著不存在任何引用頁面，只是此訊息可能此時對 網址檢查工具 不可用。 也就是說，對於較新的頁面，參照網頁可能不會有數據，這是很正常的。Google 新增這個欄位也顯示出他們是用多種方式來得知網頁的存在並抓取。 什麼是參照網頁？ 其實就是 GA 中的「 參照連結網址 」，意思是使用者進到你的網頁的來源網址，search console 會自動辦識這些流量來自哪裡。通常是連結，當然也有可能會是瀏覽器書籤、最愛、email 或手機app等，這大概也是為什麼不一定會有數據的原因之一吧。 頻繁更新 近期 Google Search Console 一直在更新，說不定是受到 Bing 更新的打擊(x)，例如「涵蓋範圍」也更新成只剩下近3個月的資料、新增「檢索統計資料」等等功能，以及對於 CWVs 的相關更新 ，我們可以期待它的功能和數據將越來越豐富與完整。
READ THIS »