AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置:首頁 > 科技  > 軟件

教你如何玩轉(zhuǎn)Next Image

來源: 責編: 時間:2024-04-09 17:22:11 218觀看
導讀如果你用過Next.js,那么很可能邂逅過Next Image組件。此圖像優(yōu)化解決方案不僅支持webp和avif等現(xiàn)代格式,還可以針對不同屏幕尺寸生成量身定制的多個版本。要想獲得這種魔力,只需將以下代碼添加到頁面:import Image from '

如果你用過Next.js,那么很可能邂逅過Next Image組件。此圖像優(yōu)化解決方案不僅支持webp和avif等現(xiàn)代格式,還可以針對不同屏幕尺寸生成量身定制的多個版本。QBD28資訊網(wǎng)——每日最新資訊28at.com

要想獲得這種魔力,只需將以下代碼添加到頁面:QBD28資訊網(wǎng)——每日最新資訊28at.com

import Image from 'next/image';export default function Page() {  return (    <Image      src="/profile.png"      width={500}      height={500}      alt="Picture of the author"    />  );}

不過,就像其他任何魔法一樣,只有打好堅實的基礎,才能熟練的運用自如。QBD28資訊網(wǎng)——每日最新資訊28at.com

在本文中,我們將探討Next Image的工作原理,并澄清一些常見誤解。QBD28資訊網(wǎng)——每日最新資訊28at.com

核心架構

next/image的底層架構主要由三個組件組成:QBD28資訊網(wǎng)——每日最新資訊28at.com

  • React Next Image組件
  • Image API
  • Image優(yōu)化器

生成的URL如下:QBD28資訊網(wǎng)——每日最新資訊28at.com

/_next/image?url=/images/example.jpg&w=640&q=75

這樣編碼的URL接受兩個參數(shù):w(寬度)和q(質(zhì)量)。我們發(fā)現(xiàn)沒有h(高度)屬性,這個我們稍后討論。QBD28資訊網(wǎng)——每日最新資訊28at.com

Image API

Next Image API用作圖像代理,類似于IPX。它執(zhí)行以下任務:QBD28資訊網(wǎng)——每日最新資訊28at.com

  • 接受圖像URL、寬度和質(zhì)量
  • 驗證參數(shù)
  • 確定緩存控制策略
  • 處理圖像
  • 以用戶瀏覽器支持的格式提供圖像

Image優(yōu)化器

Next Image根據(jù)特定條件使用不同的圖像優(yōu)化庫:Sharp或Squoosh。QBD28資訊網(wǎng)——每日最新資訊28at.com

Sharp是一個快速高效的圖像優(yōu)化node.js模塊,利用原生的libvips庫。QBD28資訊網(wǎng)——每日最新資訊28at.com

Squoosh是一個完全基于節(jié)點的圖像優(yōu)化解決方案。有點慢,但不需要在計算機上安裝任何其他庫。QBD28資訊網(wǎng)——每日最新資訊28at.com

因此,一般Sharp用于生產(chǎn)環(huán)境,而在本地環(huán)境中默認使用Squoosh。QBD28資訊網(wǎng)——每日最新資訊28at.com

p.s.我建議在本地環(huán)境中也使用Sharp。雖然Sharp和Squoosh優(yōu)化圖像的方式非常相似,但與Squoosh相比,Sharp的壓縮算法會導致顏色下降。這可能會導致生產(chǎn)環(huán)境和本地環(huán)境之間視覺行為的差異,尤其是在嘗試將圖像的背景顏色與頁面背景匹配時。QBD28資訊網(wǎng)——每日最新資訊28at.com

結(jié)果

了解了next/image背后的主要架構后,讓我們一起辨別一些常見的誤解,以便更有效地利用它。QBD28資訊網(wǎng)——每日最新資訊28at.com

next/image不裁剪

開發(fā)人員中有個常見的誤解是next/image可以裁剪圖像。之所以會出現(xiàn)這種混淆,是因為寬度、高度和填充屬性可以傳遞給組件,從而給人一種圖像已被裁剪的印象。QBD28資訊網(wǎng)——每日最新資訊28at.com

實際上,情況并非如此。QBD28資訊網(wǎng)——每日最新資訊28at.com

Next Image組件主要將寬度和高度用來分配給img標記,以防止布局偏移。QBD28資訊網(wǎng)——每日最新資訊28at.com

QBD28資訊網(wǎng)——每日最新資訊28at.com

為什么呢?QBD28資訊網(wǎng)——每日最新資訊28at.com

QBD28資訊網(wǎng)——每日最新資訊28at.com

對本地映像使用導入

對于next/image,有兩種方法可用于加載本地圖像:QBD28資訊網(wǎng)——每日最新資訊28at.com

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" />    </>  );}

在處理示例、教程甚至開源項目中的本地圖像時,使用絕對路徑很普遍。QBD28資訊網(wǎng)——每日最新資訊28at.com

可以看到,除了自動寬度/高度分配之外沒有顯著差異。QBD28資訊網(wǎng)——每日最新資訊28at.com

但是,有區(qū)別。QBD28資訊網(wǎng)——每日最新資訊28at.com

當你通過絕對路徑從公用文件夾訪問圖像時,Next.js遵循目標服務器的緩存策略,默認情況下,是30天的緩存策略而不是public,max-age=31536000,immutable。QBD28資訊網(wǎng)——每日最新資訊28at.com

對圖像資源使用30天緩存策略會顯著降低Lighthouse分數(shù)。QBD28資訊網(wǎng)——每日最新資訊28at.com

了解sizes和100vw技術

next/image組件接受sizes屬性,類似于html img sizes屬性。QBD28資訊網(wǎng)——每日最新資訊28at.com

但是,它也執(zhí)行一些獨特的操作。QBD28資訊網(wǎng)——每日最新資訊28at.com

sizes屬性與srcset協(xié)同工作,接受應激活的瀏覽器條件和圖像寬度列表。QBD28資訊網(wǎng)——每日最新資訊28at.com

以下是圖片使用sizes的示例:QBD28資訊網(wǎng)——每日最新資訊28at.com

<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">

讓我們深入了解細節(jié)以便理解得更透徹。當你使用Next Image而不指定sizes屬性時,srcset將包含兩個URL:一個用于標準版本(x1),另一個用于Retina版本(x2)。QBD28資訊網(wǎng)——每日最新資訊28at.com

通過這樣的設置,在Retina設備上使用時,瀏覽器將始終選擇Retina版本。這種偏好是由于在srcset中使用了1x和2x語法而產(chǎn)生的。QBD28資訊網(wǎng)——每日最新資訊28at.com

<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像素密度。QBD28資訊網(wǎng)——每日最新資訊28at.com

因此,如果桌面上的圖像版本小于移動設備或平板電腦上的圖像版本,則瀏覽器將始終使用默認的Next Image語法加載較大的版本。QBD28資訊網(wǎng)——每日最新資訊28at.com

然而,不幸的是,這可能會導致性能欠佳并降低Lighthouse分數(shù)。QBD28資訊網(wǎng)——每日最新資訊28at.com

但是,有一種方法可以指示瀏覽器根據(jù)合適的寬度加載圖像。不是向srcset URL提供1x、2x參數(shù),而是指定圖像的寬度。QBD28資訊網(wǎng)——每日最新資訊28at.com

例如,瀏覽器中如果有以下說明:QBD28資訊網(wǎng)——每日最新資訊28at.com

<img  srcset="    /_next/image?url=%2Fimages%2Fexample.jpg&w=640&q=75   640w,    /_next/image?url=%2Fimages%2Fexample.jpg&w=1080&q=75 1080w  "/>

在這種情況下,瀏覽器會為頁面上使用的當前尺寸選擇最合適的圖像。QBD28資訊網(wǎng)——每日最新資訊28at.com

如果移動圖片的寬度為600px(Retina為1200px),則將選擇1080w版本。QBD28資訊網(wǎng)——每日最新資訊28at.com

同時,如果桌面圖像僅使用300px(Retina為600px),瀏覽器會選擇 640w。QBD28資訊網(wǎng)——每日最新資訊28at.com

此方法的優(yōu)點在于加載最適合當前屏幕尺寸的圖像,通過減小圖像大小來提高性能。QBD28資訊網(wǎng)——每日最新資訊28at.com

下面讓我們使用100vw技巧將此策略應用于Next Image。QBD28資訊網(wǎng)——每日最新資訊28at.com

雖然你不能直接指示Next Image在URL附近使用width(w)參數(shù)而非像素密度(1x)選項,但可以應用從Next Image的編碼方式生成的解決方法:QBD28資訊網(wǎng)——每日最新資訊28at.com

  1. 如果sizes屬性包含vw數(shù)字,則只會使這些尺寸大于最小deviceSize(默認為640)乘以百分比(100vw = 1,50vw = 0.5)。例如指定100vw,最終將得到8個URL。
  2. 如果sizes屬性包含非vw數(shù)字,則srcset將包含所有大小(即deviceSizes和imageSizes的所有可能組合),總共產(chǎn)生16個URL。

為了說明這一點,一起來看看100vw生成的代碼:QBD28資訊網(wǎng)——每日最新資訊28at.com

<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。QBD28資訊網(wǎng)——每日最新資訊28at.com

理想情況下,我更愿意為特定圖像生成4個URL,類似于其他框架,而不是使用許多不必要的選項來膨脹HTML,且這些選項中可能沒有一個適合我的需求。QBD28資訊網(wǎng)——每日最新資訊28at.com

關鍵點:要用更多版本填充srcset以獲得在各種分辨率下更好的性能,你可以簡單地將sizes設置為100vw。QBD28資訊網(wǎng)——每日最新資訊28at.com

此技巧強制創(chuàng)建8個不同尺寸——從640px開始的URL。QBD28資訊網(wǎng)——每日最新資訊28at.com

但是,由于此方法很容易增大HTML大小 - 特別是如果添加了額外的imageSizes或deviceSizes的話,因此慎用此方法。QBD28資訊網(wǎng)——每日最新資訊28at.com

我個人認為對于需要在許多不同地方使用具有不同圖像比例的大型項目,這種生成平均大小版本的方法很多時候是有益的。QBD28資訊網(wǎng)——每日最新資訊28at.com

這些版本可以滿足大多數(shù)方案,更頻繁地訪問緩存,同時保持易用性。QBD28資訊網(wǎng)——每日最新資訊28at.com

結(jié)論

Next Image簡化了圖像管理并有著顯著優(yōu)勢,它提供類似于第三方解決方案的高級裁剪和精確調(diào)整大小等附加功能。QBD28資訊網(wǎng)——每日最新資訊28at.com

同時有專門的組件可進行微調(diào)。QBD28資訊網(wǎng)——每日最新資訊28at.com

我特別喜歡它的自動化方法——生成0.25x、0.5x、1x和2x寬度的四個圖像版本。QBD28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.tebozhan.com/showinfo-26-82364-0.html教你如何玩轉(zhuǎn)Next Image

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 六款較流行的開源漏洞掃描工具推薦及特點分析

下一篇: Dart 中 JS 互操作的歷史,你知道嗎?

標簽:
  • 熱門焦點
Top