最大限度地提升Next.js网站中的图片质量

译文
开发 前端
只需轻松优化图片,即可帮助您的应用程序保持最佳状态,并节省时间和空间。

​译者 | 布加迪

审校 | 孙淑娟

图片是任何网站或应用程序的重要组成部分,它们有助于使内容更吸引人、外观更漂亮。然而,如果图片没有得到适当优化,它们也会减慢网站或应用程序的运行速度。

为何要优化图片?

优化图片之所以很重要,有以下几个原因:

  • 有助于缩短网站或应用程序的加载时间。
  • 可以减少客户端需要下载的数据量,从而节省带宽成本。
  • 有助于提升网站或应用程序的整体性能。

如何优化Next.js网站中的图片?

有几种方法可以优化Next.js网站中的图片。一种方法是使用Image组件。该组件可自动优化图片以提升性能。

优化图片的另一种方法是使用内置的图片处理功能。Next.js可以自动调整大小、压缩和优化图片,以提升性能。

最后,您可以使用第三方库,比如react-optimized-image。这个库提供了各种图片优化功能。

使用Image组件

Image组件是优化Next.js网站中图片的最简单方法。若想使用它,只需从next/image包导入该组件。

一旦您导入了组件,就可以像使用React中的任何其他组件一样使用它。Image组件有几个道具(prop),您可以用来控制它如何渲染图片。

import Image from 'next/image'
export default function MyImage() {
return (
<Image
src="/my-image.jpg"
width="200"
height="200"
quality="100"
alt="My image"
/>
)
}

在该例中,Image组件渲染的图片宽度为200px,高度为200px。您也可以使用CSS或Tailwind之类的框架,为您的应用程序和图片设置样式。

Image组件所需的一些道具是width、height、src和alt。src道具是您想要使用的图片的URL。可以使用width和height道具来设置图片的宽度和高度(以像素为单位)。alt道具是图片的替代文本。

Image组件的一些可选道具是布局、加载器、占位符和优先级。布局道具指定图片的布局。您可以使用加载器道具来指定自定义的图片加载器。占位符道具指定自定义的图片占位符。优先级道具指定图片的优先级。

使用Image组件的一些好处如下:

  • 提升性能:使用Image组件的主要好处之一是提升性能。该组件可自动优化图片以提升性能。
  • 自动调整图片大小:使用Image组件的另一个好处是自动调整图片大小。该组件可以自动调整图片大小,以适应道具的宽度和高度。
  • 自动压缩图片:Image组件还可以自动压缩图片,以减少文件大小。
  • 支持延迟加载:Image组件还支持延迟加载。这意味着它只会加载在屏幕上可见的图片。

使用第三方库

如果您需要对图片优化做更进一步的控制,可以使用react-optimized-image之类的第三方库。这个库提供众多图片优化功能。

react-optimized-image的一些功能包括如下:

  • 优化客户端和服务器端图片:react-optimized-image可以优化客户端和服务器端图片。这意味着图片针对性能和文件大小进行了优化。
  • 自动调整图片大小:react-optimized-image可以自动调整图片的大小,以适合宽度和高度道具。
  • 自动压缩图片:react-optimized-image还可以自动压缩图片,以减少文件大小。
  • 支持延迟加载:react-optimization-image还支持延迟加载。这意味着它只会加载在屏幕上可见的图片。
  • 支持多种图片格式:react-optimization-image支持多种图片格式,包括JPEG、PNG和WebP。

若要使用react-optimization-image,只需使用npm安装该库。

一旦安装了该库,就可以将其导入到项目中。

import Img from 'react-optimized-image'
export default function NextImg() {
return (
<Img
src="/my-image.jpg"
sizes={[400, 800]}
alt="My image"
/>
)
}

您还可以将SVG文件与react-optimized-image结合使用。

import {Svg} from 'react-optimized-image'
export default function NextImg() {
return (
<Svg
src="/my-image.svg"
className=“filled-red”
/>
)
}

该例使用className道具为SVG指定类别名。您可以使用该类别名,用CSS为SVG设置样式,或者使用JavaScript与它进行交互。

react-optimized-image还提供了相比内置的图片优化功能更好的另几个优点。

相比内置功能,使用软件包的一个好处是它可以自动生成不同大小的图片。这意味着您不必为同一个图片创建不同的版本。

另一个好处是它可以自动为用户的设备提供适当大小的图片。这意味着拥有高分辨率屏幕的设备将获得高分辨率图片,而拥有低分辨率屏幕的设备将获得低分辨率图片。

最后,react-optimized-image是一个完全开源的项目。这意味着如果您需要特定的特性或错误修正版,可以为该库贡献代码。

您应该使用哪种方法?

那么,您应该使用哪种方法来优化Next.js网站中的图片?

如果您需要基本的图片优化,可以使用内置的图片处理功能。这是开始优化图片的最简单方法。

如果您需要对图片优化进行进一步的控制,可以使用react-optimized-image之类的第三方库。这个库提供了更高级的图片优化功能。

如果您需要获得最好的性能,可以结合使用内置的图片处理功能和第三方库,这可以集两者之众长。但是不建议初学者使用这种方法,因为它需要更多的设置。

利用优化的图片来改进SEO

通过优化网站或应用程序上的图片,您可以改进搜索引擎优化(SEO)。谷歌的算法考虑到了网站和应用程序的加载速度。如果您的网站或应用程序加载缓慢,这将对SEO产生负面影响。

图片优化后,您可以缩短网站或应用程序的加载时间,这可以改进SEO。此外,您还可以添加开放式图片协议,以获得更好的性能。

原文标题:Maximize Image Quality With Next.js,作者:Imran Alam

责任编辑:华轩 来源: 51CTO
相关推荐

2019-11-24 23:36:49

物联网数据价值IOT

2022-06-27 16:46:52

网络安全物联网智能建筑

2013-03-25 11:14:29

云存储数据存储云集成存储

2013-03-26 09:57:44

云计算数据存储云存储

2018-05-16 13:53:41

2022-07-21 10:23:14

CIO影子IT云计算

2019-11-06 10:00:08

Windows 10PC电池寿命

2015-07-27 14:35:09

数据中心风险

2015-06-10 09:24:36

AWS云服务ROI

2017-10-23 18:13:42

CDN

2022-08-08 10:48:21

安全供应链IT

2018-03-28 14:48:25

大数据风险用户

2009-08-25 09:13:33

EVSSL证书绿色地址栏天威诚信

2021-09-29 16:15:30

物联网洪水风险IoT

2018-02-10 10:22:08

2021-02-06 14:01:12

比特币基金股票

2016-01-05 10:17:32

2009-09-17 13:09:06

2016-11-01 11:11:54

数据中心大数据

2022-08-19 10:36:28

人工智能机器学习数字化转型
点赞
收藏

51CTO技术栈公众号