我在 Laravel 有一個帶有 tailwindcss 的網站，我有一些帶有桌面版圖片的文章，這些圖片display:none適用于移動版，我的問題是：是否可以不為我的移動用戶下載圖片？為了讓我的網站更快，更輕的手機（對不起，如果我犯了英語錯誤，這不是我的主要語言）。
目前，我使用帶有媒體查詢最大寬度的 1 x 1 px 影像的圖片標簽，以便最小化下載，但我想知道是否沒有更合適的技術。
<picture class="hidden lg:inline object-cover rounded-l-xl max-w-xl">
<source media="(max-width: 599px)" srcset="{{asset('img/student-medium.jpg')}}">
<source media="(min-width: 600px)" srcset="{{asset('img/student.jpg')}}">
<img src="{{asset('img/student.jpg')}}" alt="photo d'étudiants qui travaillent">
</picture>
uj5u.com熱心網友回復：
在 img 標簽上使用屬性loading: lazy似乎是解決我的問題的好方法。
<img class="hidden lg:inline object-cover rounded-l-xl max-w-xl" loading="lazy"
src="{{asset('img/student.jpg')}}" srcset="{{asset('img/student-medium.jpg')}} 1x,
{{asset('img/student.jpg')}} 2x" alt="photo d'étudiants qui travaillent">
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/532638.html