![]() The static import method is recommended as it informs the client about the original image size. Old import Image from "next/image" // Replace with either of the following: // With static import (Recommended) import ExportedImage from "next-image-export-optimizer" import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" // With dynamic import import ExportedImage from "next-image-export-optimizer" For example, specify the folder where all the images are stored (Defaults to public/images)Ĭhange the export command in package.json exports = Īdd the above configuration to your Ĭhange the default values in your where appropriate. ![]() The images are then referenced in the src attribute of the component. All images that should be optimized are stored inside the public folder like public/images (except for the statically imported images and remote images).Supports animated images (accepted formats: GIF and WEBP).Supports remote images which will be downloaded and optimized. ![]() Automatic generation of tiny, blurry placeholder images.Serve the exported React bundle only via a CDN.Conversion of JPEG and PNG files to the modern WEBP format by default.Fast image transformation using sharp.js (also used by the Next.js server in production). ![]() Reduces the image size and page load times drastically through responsive images.Optimizes all static images in an additional step after the Next.js static export. Use Next.js advanced component with the static export functionality. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |