Sporer 櫥窗裡的 Wermut、Bitter 與 Hopfen 三款陶瓶酒

嵌進你的網站

圖片網址

路徑帶內容雜湊，內容永遠不變，可以無限期快取。

https://img.rickywang.live/media/7f/a5/7fa5bf9b1e4ab52a34fb34d3788f939ae183bd9306f0110a0ed0cd4f88f3d948/orig.jpg

原生 <img>

已帶 srcset 三種尺寸與 width/height，瀏覽器自己挑、也不會有版位跳動。

<img
  src="https://img.rickywang.live/media/7f/a5/7fa5bf9b1e4ab52a34fb34d3788f939ae183bd9306f0110a0ed0cd4f88f3d948/orig.jpg"
  srcset="https://img.rickywang.live/media/7f/a5/7fa5bf9b1e4ab52a34fb34d3788f939ae183bd9306f0110a0ed0cd4f88f3d948/w640.jpg 640w, https://img.rickywang.live/media/7f/a5/7fa5bf9b1e4ab52a34fb34d3788f939ae183bd9306f0110a0ed0cd4f88f3d948/orig.jpg 1108w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1108" height="1477"
  alt="Sporer 櫥窗裡的 Wermut、Bitter 與 Hopfen 三款陶瓶酒"
  loading="lazy" decoding="async" />

Next.js <Image>

用 next/image 的話，記得把圖庫網域加進 next.config 的 remotePatterns，否則正式版會 400。

<Image
  src="https://img.rickywang.live/media/7f/a5/7fa5bf9b1e4ab52a34fb34d3788f939ae183bd9306f0110a0ed0cd4f88f3d948/orig.jpg"
  width={1108} height={1477}
  alt="Sporer 櫥窗裡的 Wermut、Bitter 與 Hopfen 三款陶瓶酒"
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABA…"  /* 完整字串見下方「模糊佔位」 */
/>

模糊佔位（blurDataURL）

約 400~900 bytes 的 base64，內嵌即可，不需要額外請求。

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABIMDRANCxIQDhAUExIVGywdGxgYGzYnKSAsQDlEQz85Pj1HUGZXR0thTT0+WXlaYWltcnNyRVV9hnxvhWZwcm7/2wBDARMUFBsXGzQdHTRuST5Jbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm7/wAARCAAgABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCOKyi34Dce1T/Z7ZXAJJNQwSqflDc9atCFXjM+77tZtpM0SbVx4it0bAjGKKgN3GDmiquiLMzLN0Dfv324HWtGG5gTS5ULjeTxWWqRvBMS/wA275auSWSC5tkU8OtQ4amnO7WIVEZiDedk/wB2irUGnhnuF4+TpRSaYJo//9k=