如何使用 HTML 的 picture 元素

作者： -


<picture> 是 HTML5 包覆圖片用的 tag。可以搭配 source 來因應不同情況下（解析度、寬度），甚至是相容性（webp、jpeg、svg、png……）來顯示的圖片。


現況

基本上所有的瀏覽器都支援此 HTML5 的 tag，除了 IE ( Edge )系列要更新到 Edge 13 之後的版本才能使用。不過就算不支援也只是回到原先的 img 而已，沒有什麼大礙。

picture 的相容性
各大瀏覽器對於 picture 的相容性 ( caniuse.com ) - 於 2017 年 6 月

使用方法



不同的圖片類型：


<source srcset="img/text.avif" type="image/avif">
<source srcset="img/text.webp" type="image/webp">

不同瀏覽器寬度：


<source media="(min-width: 768px)" srcset="text-768.jpg">
<source media="(min-width: 360px)" srcset="text-360.jpg">

picture 會由上到下找尋吻合瀏覽器現況的 source 值，若第一個 source 值不符合使用的瀏覽器的支援度，才會去找第二個、第三個……，以此類推，都不適用才會直接套用原本寫在 img 的圖片。

實例


<picture>
  <source media="(min-width: 1440px)" srcset="https://api.fnkr.net/testimg/1920x400/9a91f2/FFF/?text=min-width-1440px">
  <source media="(min-width: 768px)" srcset="https://api.fnkr.net/testimg/1440x300/c7254e/FFF/?text=min-width-992px">
  <img src="https://api.fnkr.net/testimg/350x200/9a91f2/FFF/?text=other" alt="test" style="width:auto;">
</picture>
test
請試著變動瀏覽器寬度

當然，source 也能跟 img 的 srcset 一樣使用不同解析度的圖和 sizes 。另外，當 img srcset 之中的圖片長寬比例不一時，也可以用 picture 解決。

缺點

雖然它還能解決 webp 相容性的問題，但缺點卻顯而易見：無條件載入 img tag 的圖片。就算瀏覽器採用了 source tag 的 webp 圖片，它還是會載入 img 裡面設定的圖片，增加不必要的流量，拖慢網頁載入時間。

相關連結：W3C picture

留言

張貼留言

這個網誌中的熱門文章

用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 »