图片优化
图片占典型网站 页面重量 的很大一部分,并且可以对网站的 LCP 性能 产生相当大的影响。
Next.js 图片组件扩展了 HTML <img>
元素,具有自动图片优化功能:
-
尺寸优化:使用 WebP 和 AVIF 等现代图片格式自动为每个设备提供正确尺寸的图片。
-
视觉稳定性:加载图片时自动阻止 布局转变。
-
更快的页面加载:仅当图片使用原生浏览器延迟加载进入视口时才会加载图片,并带有可选的模糊占位符。
-
资源灵活性:按需调整图片大小,即使是存储在远程服务器上的图片
🎥 监视:了解有关如何使用
next/image
→ YouTube(9 分钟) 的更多信息。
import Image from 'next/image'
import profilePic from './me.png'
export default function Page() {
return (
<img src="https://next.nodejs.cn/_next/image?url=/docs/light/responsive-image.png&w=3840&q=75"/>
```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
export default function Responsive() {
return (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<img src="https://next.nodejs.cn/_next/image?url=/docs/light/fill-container.png&w=3840&q=75"/>
```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
export default function Fill() {
return (
<div
style={{
display: 'grid',
gridGap: '8px',
gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
}}
>
<div style={{ position: 'relative', height: '400px' }}>
<img src="https://next.nodejs.cn/_next/image?url=/docs/light/background-image.png&w=3840&q=75"/>
```jsx
import Image from 'next/image'
import mountains from '../public/mountains.jpg'
export default function Background() {
return (
<Image
alt="Mountains"
src={mountains}
placeholder="blur"
quality={100}
fill
sizes="100vw"
style={{
objectFit: 'cover',
}}
/>
)
}
window.devicePixelRatio
`window.devicePixelRatio` 是一个 Web API 属性,它返回一个数值,表示屏幕的物理像素和 CSS 像素之间的比例。这个属性对于处理视网膜(Retina)显示屏和其他高 DPI(Dots Per Inch)设备非常有用,因为它可以帮助开发者了解物理像素与 CSS 像素的实际映射关系。
以下是 `window.devicePixelRatio` 的一些关键点:
1. **定义**:`devicePixelRatio` 是 `window` 对象的一个只读属性,返回一个无符号的浮点数。
2. **用途**:主要用于响应式设计和高性能图形渲染,确保在高分辨率屏幕上提供清晰的图像和布局。
3. **默认值**:在标准显示屏上,`devicePixelRatio` 的值通常是 1。这意味着每个 CSS 像素对应一个物理像素。
4. **高分辨率屏幕**:在高分辨率屏幕上,比如苹果的视网膜显示屏,`devicePixelRatio` 的值可能是 2 或更高,这意味着每个 CSS 像素可能对应多个物理像素。
5. **使用示例**:
```javascript
var ratio = window.devicePixelRatio;
console.log("设备像素比: " + ratio);
```
6. **应用场景**:
- 根据 `devicePixelRatio` 动态调整图像大小,确保在高分辨率屏幕上图像不会模糊。
- 调整 canvas 元素的大小,以利用额外的像素提高图形的清晰度。
- 为不同的设备像素比提供不同的 CSS 样式或媒体查询。
7. **兼容性**:大多数现代浏览器都支持 `window.devicePixelRatio` 属性。
8. **注意事项**:虽然 `devicePixelRatio` 提供了设备像素比的信息,但它并不总是等于屏幕的 DPI。有些设备可能有其他方式来表示或处理像素比,因此在使用时需要考虑不同设备的特定行为。
通过使用 `window.devicePixelRatio`,开发者可以创建更加灵活和适应不同设备显示特性的 Web 应用。
const dpr = window.devicePixelRatio || 1;
let dprAdjustedWidth: number | undefined = undefined;
if (width) {
dprAdjustedWidth = Math.round(width * dpr * 100000) / 100000;
}
let dprAdjustedHeight: number | undefined = undefined;
if (height) {
dprAdjustedHeight = Math.round(height * dpr * 100000) / 100000;
}
视频优化
要继续了解有关视频优化和最佳实践的更多信息,请参阅以下资源:
-
了解视频格式和编解码器:根据你的视频需求选择正确的格式和编解码器,例如用于兼容性的 MP4 或用于网络优化的 WebM。详细信息请参见 Mozilla 的视频编解码器指南。
-
视频压缩:使用 FFmpeg 等工具有效压缩视频,平衡质量与文件大小。在 FFmpeg 的官方网站 了解压缩技术。
-
解析和码率调整:根据观看平台调整 解析和比特率,移动设备设置较低。
-
内容交付网络 (CDN):利用 CDN 提高视频传输速度并管理高流量。使用某些存储解决方案(例如 Vercel Blob)时,系统会自动为你处理 CDN 功能。了解更多 关于 CDN 及其优势。