各位版上前輩們好~
目前複習html時發現picture element，利用source和srcset加上media可設定不同裝置寬度時進行圖片縮放，但之前學到CSS也有@media類似功能。
想請兩者在使用上大致的場景或使用上問題?
目前只想到:
1.html檔載入圖片較快，節省頻寬?
2.用CSS@media縮放圖片會有顫動問題?
新手剛學習，如果有觀念錯誤地方，再請大家鞭策指教~
已邀請的邦友 {{ invite_list.length }}/5
1.html檔載入圖片較快，節省頻寬?
不懂你為何會這樣問?完全搭不上邊。無從回答你。
2.用CSS@media縮放圖片會有顫動問題?
正常不會。你可以試試。
謝謝浩瀚大大~
可能剛初學表達不清楚，抱歉讓你困擾
1.有人說html讀取順序由html程式碼本身先讀，再由外部引進CSS編碼設定，但大概是我目前試作程式碼比較簡單，我覺得沒差。 如果是幾千行甚至更多的複雜網頁不知道有沒有差別，大概是這意思
2.好的，我再嘗試。
理論上我是認為你可能是誤解其中的意思了。
正確來說，一般瀏覽器是讀取後端送過來的HTML碼。
而因為html檔。並不會經過編輯、解析的動作。
大多數來說運行的速度快是沒錯。但那只是指單純讀碼的速度。
而在圖片的讀取上，無論是後端生成HTML碼或是直接的HTML。
理論上讀取速度是一樣。並不會因為用HTML或是CSS引用，就會讀取比較快。
一般會覺得快的原因，大多是呈現在體感上快。而不是實際讀取的速度快。
如緩載圖片、事前加載、載入頁...等等東西。
去造就一種好像很快的體驗感。
iThome鐵人賽
看影片追技術