Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
astro-better-image-service
Advanced tools
Astro integration for image compression and conversion, superseding Astro's default image service.
astro-better-image-service
is an Astro integration for image compression and conversion, superseding Astro's default image service.
sharpImageService
) are supported.astro add
(recommended)Run the following command and it will automatically install the package and add the integration to your astro.config.{ts,js,mjs,cjs}
file.
bun astro add astro-better-image-service
npx astro add astro-better-image-service
bun add astro-better-image-service
npm install astro-better-image-service
astro.config.{ts,js,mjs,cjs}
import betterImageService from "astro-better-image-service";
import { defineConfig } from "astro/config";
export default defineConfig({
// ...
integrations: [
// ... other integrations
betterImageService(),
// ... other integrations
],
// ...
});
You may put the betterImageService
integration anywhere in the integrations
array.
Please note that this integration cannot be used with other integrations using the Image Service API. (I haven't seen any yet.)
This integration is built using Astro's Image Service API.
It enables us to use all the awesome features of Astro, for example, caching, lazy loading, and more listed in the Astro Images documentation.
Image optimization with the maximum compression ratio may slow down your build time.
You are discouraged using this integration in SSR environments, because it may slow down the responses.
sharpImageService
)astro:assets
) uses the default compression settings of sharp, in which the compression ratio is medium, as referred to in the Astro Discord.astro-compress sets the compression level to the maximum, whereas astro:assets uses the default settings
We most likely could tune up the settings a bit, though we need to be careful about it taking too much time (notably because of SSR doing it at runtime)
see: https://discord.com/channels/830184174198718474/830184175176122389/1168307099571331155
format
option is ignored)@playform/compress
(f.k.a. astro-compress
)@playform/compress
does not cache compressed images, so slows down your build time. https://github.com/PlayForm/Compress/issues/49
@playform/compress
does not support converting SVG images to raster images.
* It only compresses built files in outDir
, and does not intercept the build process.
Unless you set image.service
in astro.config.{ts,js,mjs,cjs}
to passthroughImageService
, Astro optimizes images and @playform/compress
compresses them again.
Since astro-better-image-service
does not support optimizing HTML, CSS, and JavaScript files, you may use @playform/compress
with it to compress them.
For example, you may use the following configuration.
astro.config.{ts,js,mjs,cjs}
import betterImageService from "astro-better-image-service";
import compress from "@playform/compress";
import { defineConfig } from "astro/config";
export default defineConfig({
integrations: [
betterImageService(),
compress({
Image: false,
SVG: false,
}),
],
});
If you want to configure the configuration of the image compression and conversion, you may pass a configuration object to the betterImageService
function.
The configuration object is merged with the default configuration object, exported as defaultConfig
from the package.
astro.config.{ts,js,mjs,cjs}
import betterImageService from "astro-better-image-service";
import { defineConfig } from "astro/config";
export default defineConfig({
// ...
integrations: [
betterImageService({
sharp: {
sharp: {
// sharp constructor options
},
png: {
// sharp png options
},
jpeg: {
// sharp jpeg options
},
webp: {
// sharp webp options
},
avif: {
// sharp avif options
},
},
svgo: {
// svgo options
},
}),
],
// ...
});
limitInputPixels
You cannot configure image.service.config.limitInputPixels
in the configuration object unless you set the image.service.entrypoint
to sharpImageService
.
We support to set limitInputPixels
in the configuration object of betterImageService
for compatibility with the default image service.
However, we recommend setting sharp.sharp.limitInputPixels
in the configuration object of betterImageService
for clarity.
For example, you may set limitInputPixels
to false
as follows.
astro.config.{ts,js,mjs,cjs}
import betterImageService from "astro-better-image-service";
import { defineConfig } from "astro/config";
export default defineConfig({
// ...
integrations: [
betterImageService({
// not recommended
limitInputPixels: false,
// recommended
sharp: {
sharp: {
limitInputPixels: false,
},
},
}),
],
// ...
});
Run the following commands to start development.
gh repo clone risu729/astro-better-image-service
cd astro-better-image-service
mise install
mise run buni
To test this package, you may link it to a project using it by running the following commands.
mise run dev
# in a project using astro-better-image-service
bun link astro-better-image-service
E2E tests using Playwright run on GitHub Actions.
To commit, run the following command.
commitizen will ask you to fill in the commit message.
mise run commit
# or to commit only staged files
mise run commit:staged
This package is released automatically by GitHub Actions using semantic-release.
package.json#version
is not updated in git, but automatically updated and published to npm.
MIT License
@playform/compress
package.FAQs
Astro integration for image compression and conversion, superseding Astro's default image service.
The npm package astro-better-image-service receives a total of 154 weekly downloads. As such, astro-better-image-service popularity was classified as not popular.
We found that astro-better-image-service demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.