2023年Q2用戶偏好榜：12+256G版本成新主流
3月份的性能榜、性價比榜和好評榜之后，就要輪到2023年的第二季度偏好榜了，上半年的新機潮已經過去，最明顯的肯定就是大內存和存儲的機型了，另外部分中端機也取消了屏幕塑料支架
如果你用過Next.js，那么很可能邂逅過Next Image組件。此圖像優化解決方案不僅支持webp和avif等現代格式，還可以針對不同屏幕尺寸生成量身定制的多個版本。
要想獲得這種魔力，只需將以下代碼添加到頁面：
import Image from 'next/image';export default function Page() { return ( <Image src="/profile.png" width={500} height={500} alt="Picture of the author" /> );}不過，就像其他任何魔法一樣，只有打好堅實的基礎，才能熟練的運用自如。
在本文中，我們將探討Next Image的工作原理，并澄清一些常見誤解。
next/image的底層架構主要由三個組件組成：
生成的URL如下：
/_next/image?url=/images/example.jpg&w=640&q=75這樣編碼的URL接受兩個參數：w（寬度）和q（質量）。我們發現沒有h（高度）屬性，這個我們稍后討論。
Next Image API用作圖像代理，類似于IPX。它執行以下任務：
Next Image根據特定條件使用不同的圖像優化庫：Sharp或Squoosh。
Sharp是一個快速高效的圖像優化node.js模塊，利用原生的libvips庫。
Squoosh是一個完全基于節點的圖像優化解決方案。有點慢，但不需要在計算機上安裝任何其他庫。
因此，一般Sharp用于生產環境，而在本地環境中默認使用Squoosh。
p.s.我建議在本地環境中也使用Sharp。雖然Sharp和Squoosh優化圖像的方式非常相似，但與Squoosh相比，Sharp的壓縮算法會導致顏色下降。這可能會導致生產環境和本地環境之間視覺行為的差異，尤其是在嘗試將圖像的背景顏色與頁面背景匹配時。
了解了next/image背后的主要架構后，讓我們一起辨別一些常見的誤解，以便更有效地利用它。
開發人員中有個常見的誤解是next/image可以裁剪圖像。之所以會出現這種混淆，是因為寬度、高度和填充屬性可以傳遞給組件，從而給人一種圖像已被裁剪的印象。
實際上，情況并非如此。
Next Image組件主要將寬度和高度用來分配給img標記，以防止布局偏移。
1Db28資訊網——每日最新資訊28at.com
為什么呢？
1Db28資訊網——每日最新資訊28at.com
對于next/image，有兩種方法可用于加載本地圖像：
import Image from 'next/image';import profileImg from './profile.jpg';export default function Page() { return ( <> {/* Using absolute path */} <Image src="/profile.png" width={500} height={500} alt="Picture of the author" /> {/* Using imported image via relative path */} <Image src={profileImg} alt="Picture of the author" /> </> );}在處理示例、教程甚至開源項目中的本地圖像時，使用絕對路徑很普遍。
可以看到，除了自動寬度/高度分配之外沒有顯著差異。
但是，有區別。
當你通過絕對路徑從公用文件夾訪問圖像時，Next.js遵循目標服務器的緩存策略，默認情況下，是30天的緩存策略而不是public,max-age=31536000,immutable。
對圖像資源使用30天緩存策略會顯著降低Lighthouse分數。
next/image組件接受sizes屬性，類似于html img sizes屬性。
但是，它也執行一些獨特的操作。
sizes屬性與srcset協同工作，接受應激活的瀏覽器條件和圖像寬度列表。
以下是圖片使用sizes的示例：
<img srcset="/img/html/vangogh-sm.jpg 120w, /img/html/vangogh.jpg 193w, /img/html/vangogh-lg.jpg 278w" sizes="(max-width: 710px) 120px, (max-width: 991px) 193px, 278px">讓我們深入了解細節以便理解得更透徹。當你使用Next Image而不指定sizes屬性時，srcset將包含兩個URL：一個用于標準版本（x1），另一個用于Retina版本（x2）。
通過這樣的設置，在Retina設備上使用時，瀏覽器將始終選擇Retina版本。這種偏好是由于在srcset中使用了1x和2x語法而產生的。
<img srcset=" /_next/image?url=%2Fimages%2Fexample.jpg&w=640&q=75 1x, /_next/image?url=%2Fimages%2Fexample.jpg&w=1080&q=75 2x "/>瀏覽器將其解釋為：加載這個URL為2x像素密度，另一個URL為1x像素密度。
因此，如果桌面上的圖像版本小于移動設備或平板電腦上的圖像版本，則瀏覽器將始終使用默認的Next Image語法加載較大的版本。
然而，不幸的是，這可能會導致性能欠佳并降低Lighthouse分數。
但是，有一種方法可以指示瀏覽器根據合適的寬度加載圖像。不是向srcset URL提供1x、2x參數，而是指定圖像的寬度。
例如，瀏覽器中如果有以下說明：
<img srcset=" /_next/image?url=%2Fimages%2Fexample.jpg&w=640&q=75 640w, /_next/image?url=%2Fimages%2Fexample.jpg&w=1080&q=75 1080w "/>在這種情況下，瀏覽器會為頁面上使用的當前尺寸選擇最合適的圖像。
如果移動圖片的寬度為600px（Retina為1200px），則將選擇1080w版本。
同時，如果桌面圖像僅使用300px（Retina為600px），瀏覽器會選擇 640w。
此方法的優點在于加載最適合當前屏幕尺寸的圖像，通過減小圖像大小來提高性能。
下面讓我們使用100vw技巧將此策略應用于Next Image。
雖然你不能直接指示Next Image在URL附近使用width（w）參數而非像素密度（1x）選項，但可以應用從Next Image的編碼方式生成的解決方法：
為了說明這一點，一起來看看100vw生成的代碼：
<img sizes="100vw" srcset=" /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=3840&q=75 3840w " src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.6be618a3.jpg&w=3840&q=75"/>如果sizes中包含px值（例如(max-width: 1024px) 800px, 300px），則URL列表進一步擴展，達到默認配置16。
理想情況下，我更愿意為特定圖像生成4個URL，類似于其他框架，而不是使用許多不必要的選項來膨脹HTML，且這些選項中可能沒有一個適合我的需求。
關鍵點：要用更多版本填充srcset以獲得在各種分辨率下更好的性能，你可以簡單地將sizes設置為100vw。
此技巧強制創建8個不同尺寸——從640px開始的URL。
但是，由于此方法很容易增大HTML大小 - 特別是如果添加了額外的imageSizes或deviceSizes的話，因此慎用此方法。
我個人認為對于需要在許多不同地方使用具有不同圖像比例的大型項目，這種生成平均大小版本的方法很多時候是有益的。
這些版本可以滿足大多數方案，更頻繁地訪問緩存，同時保持易用性。
Next Image簡化了圖像管理并有著顯著優勢，它提供類似于第三方解決方案的高級裁剪和精確調整大小等附加功能。
同時有專門的組件可進行微調。
我特別喜歡它的自動化方法——生成0.25x、0.5x、1x和2x寬度的四個圖像版本。
本文鏈接：http://www.tebozhan.com/showinfo-26-82364-0.html教你如何玩轉Next Image
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號