next img
1.0.0
Merkmale
sharploading="lazy" )<Picture /> KomponenteStandardmäßig ist NEXT-IMG für die Verwendung konfiguriert:
768px All diese und mehr Einstellungen können in Ihrem next.config.js geändert werden.config.js oder in den einzelnen Bildimporten.
Von Humaans entwickelt und verwendet.
Standardmäßig hilft Ihnen NEXT.js oder WebPack bei der Optimierung von Bildern nicht viel. Dies bedeutet eine benutzerdefinierte Konfiguration oder Skript-, Verarbeitung von Bildern von Hand, mithilfe eines Bild -CDN oder überhaupt nicht optimieren. NEXT-IMG bietet und einen alternativen optimierten Ansatz zum Hinzufügen von Bildern zu Ihren nächsten.js-Projekten. Es kombiniert ein Next.js -Plugin, einen benutzerdefinierten Webpackloader und eine React -Komponente, um die Servierbilder auf eine Weise auf eine Weise auf eine Weise zu erstellen, die fast so einfach ist wie das Eingeben von <img src='foo.png' /> .
Kurz gesagt, es dauert Folgendes:
< Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } alt = 'Jellyfish' />Importiert, verändert, optimiert, Caches (persistent im Git -Repo) und gibt folgende HTML aus:
< picture >
< source
type =" image/webp "
srcset ="
/_next/static/images/[email protected] 375w,
/_next/static/images/[email protected] 750w,
/_next/static/images/[email protected] 800w,
/_next/static/images/[email protected] 1600w
"
sizes =" (max-width: 768px) 375px, 800px "
/>
< source
type =" image/jpeg "
srcset ="
/_next/static/images/[email protected] 375w,
/_next/static/images/[email protected] 750w,
/_next/static/images/[email protected] 800w,
/_next/static/images/[email protected] 1600w
"
sizes =" (max-width: 768px) 375px, 800px "
/>
< img
src =" /_next/static/images/[email protected] "
srcset ="
/_next/static/images/[email protected] 375w,
/_next/static/images/[email protected] 750w,
/_next/static/images/[email protected] 800w,
/_next/static/images/[email protected] 1600w
"
width =" 375 "
height =" 250 "
alt =" Jellyfish "
/>
</ picture >Beispiele anzeigen.
Installieren Sie das Paket
npm install next-img
Fügen Sie das Plugin zu Ihrem next.config.js :
const withImg = require ( 'next-img/plugin' )
module . exports = withImg ( {
nextImg : {
breakpoints : [ 768 ] ,
} ,
} ) Importieren Sie in Ihrer Anwendung die Bilder und einbetten Sie sie mit der <Picture /> -Komponente ein:
import { Picture } from 'next-img'
import jelly from './images/jelly.jpg?sizes=375,800'
export default ( ) => < Picture src = { jelly } />Oder Inline:
import { Picture } from 'next-img'
export default ( ) => < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } />In diesem speziellen Beispiel werden die folgenden Bilder erzeugt:
Die angegrenzten und optimierten Bilder werden während der Entwicklung im resources in der Wurzel Ihres Projekts gespeichert. Dies bedeutet, dass Sie, wenn Sie die Import -Importparameter oder die Plugin -Konfiguration optimieren, zusätzliche Bilder generieren, die nicht mehr von Ihrem Projekt verwendet werden. In diesem Fall führen Sie den Befehl next-img aus, um unnötige Bilder zu entfernen und fehlende zu erstellen:
npx next-img
Schauen Sie sich nun das resources in Ihrer Quellensteuerung ein, um später für Entwicklungs- und Produktionsergebnisse wiederverwendet zu werden. Sie können diese Funktion ausschalten, indem Sie persistentCache: false in der Plugin -Konfiguration einstellen. In diesem Fall werden die Bilder nur in einem temporären Cache im .next -Verzeichnis gespeichert.
Weitere Nutzungsbeispiele anzeigen.
Standard -Plugin -Konfigurationsoptionen:
{
// global settings for images, can be overriden per image
breakpoints : [ 768 ] ,
densities : [ '1x' , '2x' ] ,
// output image quality configuration
jpeg : {
quality : 80 ,
webp : {
quality : 90 ,
reductionEffort : 6 ,
} ,
} ,
png : {
quality : 100 ,
webp : {
reductionEffort : 6 ,
lossless : true ,
} ,
} ,
// the directory within Next.js build output
imagesDir : 'images' ,
// the output image name template
imagesName : '[name]-[size]@[density]-[hash].[ext]' ,
// advanced - customise the image public path
imagesPublicPath : null ,
// advanced - customise the image output path
imagesOutputPath : null ,
// persistent cache allows for fast deploy and
// development workflow by avoiding reprocessing
// images that were previously processed
persistentCache : true ,
persistentCacheDir : 'resources' ,
// this directory within .next is used in case persistent cache is turned off
cacheDir : path . join ( 'cache' , 'next-img' )
} Weitere Informationen zu jpeg/png/webp -Komprimierungsoptionen finden Sie in einer scharfen Dokumentation.
Beim Importieren eines Bildes können Sie Abfrageparameter verwenden, um die Optimierung anzupassen:
320px breit angeben, geben Sie hier einfach 320 an, das Plugin produziert alle notwendigen größeren Versionen, die auf der Konfiguration densities basieren.1x und 2x -Bildergrößen erzeugt. Geben Sie 1x an, wenn Sie nur ein Bild pro Größe oder 1x,2x,3x usw. erstellen möchten, wenn Sie mehr Dichten wünschen.jpeg -Bilder. Beachten Sie, dass die jpeg->webp -Einstellungen unter diesem Param verschachtelt werden müssen, z ?jpeg[webp][quality]=95png -Bilder. Beachten Sie, dass die png->webp -Einstellungen unter diesem Param untergebracht werden müssen, z ?png[webp][lossless]=false&png[webp][nearLossless]=trueBeispiele:
import img1 from './images/img.jpg'
import img2 from './images/img.jpg?sizes=375,900'
import img3 from './images/img.jpg?sizes=375,900&densities=1x'
import img4 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x'
import img5 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x&jpeg[quality]=70&jpeg[webp][quality]=70' next-img wird mit einer React-Komponente geliefert, die das Einbettungsbilder leichter macht.
Hier sind die Requisiten, die dieser Komponentenzugang:
img -Tag weitergeleitet. Dies ermöglicht die Verwendung von Attributen wie alt , loading="lazy" usw. Wenn über die src -Prop ein einzelnes Bild bereitgestellt wird, wird jede Größe so konfiguriert, dass sie pro Breakpoint angezeigt werden, das mit dem Attribut HTML sizes attribute verfügbar ist.
sizes Beispiel <Picture> Breakpoints [375, 768] und ?sizes=100,400,800
(max-width: 375px) 100px,
(max-width: 768px) 400px,
800px
Wenn eine Reihe von Bildern über die src -Prop bereitgestellt wird, wird jedes Bild so konfiguriert, dass sie pro Breakpoint angezeigt werden, das mit dem HTML media attribute verfügbar ist.
Beispielsweise wendet die <Picture> src=[img1, img2, img3] das folgende media [375, 768] :
< picture >
< source media =" (max-width: 480px) " sizes =" {{img1 width}} " />
< source media =" (max-width: 768px) " sizes =" {{img2 width}} " />
< source sizes =" {{img3 width}} " />
< img ... />
</ picture > Muss ich die <Picture /> -Komponente verwenden?
Die Bildkomponente ist optional. Sie können das importierte Bildobjekt verarbeiten, wie Sie möchten.
Könnten die Bilder nicht weiter optimiert werden?
Ja, Sie könnten wahrscheinlich ~ 10% -20% oder mehr Komprimierung erhalten, wenn Sie das jpg/png über ImageOptim oder andere Tools übergeben. Da dieses Plugin ein bereits gut optimiertes Webp ausgibt und Sie Webp für die meisten modernen Browser bedienen, wird die Notwendigkeit, diese zusätzliche Dateigröße für jpg/png zu quetschen, da es sich um die Fallback -Bilder handelt. Es kann jedoch Anwendungsfälle geben, in denen benutzerdefinierte Komprimierungsalgorhithmen erforderlich sind und wir in Zukunft möglicherweise Unterstützung für willkürliche Transformationen in diesem Plugin hinzufügen.
Um dieses Projekt zu entwickeln, müssen Sie einen Beobachter für die <Picture /> -Komponente ausführen:
npm install
npm run watch
Sie können Beispiel als Spielplatz verwenden:
cd example
npm install
next
Um den Befehl next-img in der Beispiel-DIR auszuführen:
node ../bin/next-img
Roadmap
jpg->webp und png->webp -Conversions webp/jpg/png aus ?raw Abfrage zu unterstützen, die das Bild nicht in irgendeiner Weise verarbeitet next-img indem Sie sich direkt in next build anschließen Und einige Ideen dafür, wo dieses Projekt in Zukunft durchgeführt werden könnte:
imagemin -Optimierungs -Plugins in die Pipeline über die Konfiguration. Auf diese Weise können Benutzer steuern, wie sie ihre Bilder granuarer optimieren können.?sizes=100vw,50vw,900pxrequire() .
