search

Niels-IO / next-image-export-optimizer

Use Next.js advanced <Image/> component with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.
411 stars 51 forks source link

SVG optimization with tools like svgo #195

Open feO2x opened 5 months ago

feO2x commented 5 months ago

Hi @Niels-IO,

first of all, thanks for all your efforts with next-image-export-optimizer. It’s an excellent tool.

I have one question regarding support for SVGs: do you plan to support optimization with tools like svgo? The use case is the following: I have an unoptimized SVG image that was created by a design tool like Adobe Illustrator or Xara Designer Pro X and simply copy it into my NextJS project. next-image-export-optimizer could then use a tool like svgo internally to optimize the image, usually reducing the SVG size by 30% to 70%:

svgo ./app/header/home-logo.svg -o ./app/header/home-logo-min.svg

home-logo.svg:
Done in 59 ms!
20.011 KiB - 60.5% = 7.912 KiB

Currently, I manually optimize SVGs with svgo and then utilize the pass-through functionality of next-image-export-optimizer for SVGs. Automating this process would be highly beneficial.

I'm also writing this because in one of the future versions, you plan to optimize SVG images to WebP or leave them unprocessed (https://github.com/Niels-IO/next-image-export-optimizer/issues/184), which is a breaking change. IMO, the default use case should be optimizing the SVG image and leave it in the same format as vector graphics tend to be smaller than rasterized images (even if webp is awesome when it comes to compression vs. image quality).

I would let the end user decide if they want to optimize an SVG to webp (via a global setting and/or per-image). The default setting would optimize the SVG with svgo, but would not change the format. This way, you would not introduce a breaking change, there would only be one optimized SVG file per image that is served for all requested sizes (we wouldn't need a source set for this). And users could opt in when they really want to convert SVGs to webp images.

I look forward to your thoughts on this.

Have a great day, feO2x

Niels-IO commented 5 months ago

Hi @feO2x,

This is an interesting idea! I never heard of this package. What is your experience with the quality of the output from svgo? Will there be artifacts or any other misrepresentations of the original shape?

feO2x commented 5 months ago

I've never had any issues - artifacts should not be a problem at all because vector graphics usually do not contain rasterized elements. I also have never experienced any deformed/changed elements. svgo mostly removes white space and simplifies elements.