Astro 5.4 兩個關於 Markdown 圖片的新功能

在上星期發佈的 Astro 5.4，剛好有兩個關於 Markdown 中圖片的新功能，都是 PolyWolf 做出來的，分別是：

Markdown 中外部圖片的最佳化
Markdown 中的響應式圖片支援

這次我要介紹的就是 Astro 5.4 更新項目中的這兩項。

Markdown 中外部圖片的最佳化

Astro 中的圖片最佳化就是把圖片原始檔做壓縮，讓大小變小，讀取會比較快。以前如果連結的是網路上的圖片，Astro 不會處理。例如如果 Markdown 裡有：

![Armadillo](https://images.unsplash.com/photo-1624647879166-1acf407afc89)

產生的 HTML 會是：

<img src="https://images.unsplash.com/photo-1624647879166-1acf407afc89" alt="Armadillo" />

這次的更新會讓這種網路上的圖片也會經過處理，Astro 會將圖片下載起來做最佳化處理。不過前提是圖片網址符合 image.domains 或 image.remotePatterns 的設定，例如可能要有這個設定，上面的圖片才會被最佳化：

import { defineConfig } from "astro";

export default defineConfig({
  image: {
    domains: ["images.unsplash.com"]
  }
});

Markdown 中的響應式圖片支援

響應式圖片就是為圖片提供多個尺寸的版本，讓瀏覽器選一個最符合顯示尺寸的版本。好處是對螢幕解析度小的行動裝置來說，不需要下載檔案大小比較大的原尺寸圖片，可以加快讀取速度。

在 <Image> 跟 <Picture> 元件都可以產生響應式圖片後，以 Markdown 語法引用的圖片原本還是只會轉成大小相同的 WEBP 檔。在這次更新後，以 Markdown 語法引用的圖片終於也可以產生響應式圖片了。

要產生響應式圖片，要在設定加入：

import { defineConfig } from "astro";

export default defineConfig({
  image: {
    experimentalLayout: "responsive"
  },
  experimental: {
    responsiveImages: true
  }
});

目前並沒有設定單獨一張 Markdown 中的圖片為響應式圖片的方法，如果照上面設定了，所有以 Markdown 語法引用的圖片都會是響應式圖片。

Markdown 中外部圖片的最佳化

Markdown 中的響應式圖片支援

參考資料