- #5474
299ae9bb6
Thanks @wulinsheng123! - added a warning if the image was GIF
- #5393
e2fb0c4ff
Thanks @wulinsheng123! - Log error if failed to fetch remote image
- #5260
37d664e26
Thanks @tony-sull! - Fixes a bug where theweb-streams-polyfill
dependency would not be installed with the--production
flag
-
#5180
b77200f42
Thanks @tony-sull! - Removes thecontent-visibility: auto
styling added by the<Picture />
and<Image />
components.Why: The content-visibility style is rarely needed for an
<img>
and can actually break certain layouts.Migration: Do images in your layout actually depend on
content-visibility
? No problem! You can add these styles where needed in your own component styles. -
#5038
ed2dfdae5
Thanks @emmanuelchucks! - HTML attributes included on the<Picture />
component are now passed down to the underlying<img />
element.Why?
- when styling a
<picture>
theclass
andstyle
attributes belong on the<img>
itself <picture>
elements should not actually provide anyaria-
attributeswidth
andheight
can be added to the<img>
to help prevent layout shift
- when styling a
-
#5056
e55af8a23
Thanks @matthewp! - # New build configurationThe ability to customize SSR build configuration more granularly is now available in Astro. You can now customize the output folder for
server
(the server code for SSR),client
(your client-side JavaScript and assets), andserverEntry
(the name of the entrypoint server module). Here are the defaults:import { defineConfig } from 'astro/config'; export default defineConfig({ output: 'server', build: { server: './dist/server/', client: './dist/client/', serverEntry: 'entry.mjs', }, });
These new configuration options are only supported in SSR mode and are ignored when building to SSG (a static site).
The integration hook
astro:build:start
includes a parambuildConfig
which includes all of these same options. You can continue to use this param in Astro 1.x, but it is deprecated in favor of the newbuild.config
options. All of the built-in adapters have been updated to the new format. If you have an integration that depends on this param we suggest upgrading to do this instead:export default function myIntegration() { return { name: 'my-integration', hooks: { 'astro:config:setup': ({ updateConfig }) => { updateConfig({ build: { server: '...', }, }); }, }, }; }
-
#5073
93f72f90b
Thanks @bluwy! - Fix image external config in build -
#5072
3918787cb
Thanks @bluwy! - Support relative protocol image URL
-
#5021
062335dbf
Thanks @matthewp! - Fix remote images in SSG mode -
#5034
2d9d42216
Thanks @bluwy! - Support strict dependency install
- #4997
a2b66c754
Thanks @panwauu! - Fixes a bug that lost query parameters for remote images in the<Picture />
component
- #4944
a8f1a91e7
Thanks @scottaw66! - Moves http-cache-semantics from dev dependency to dependency
-
#4909
989298961
Thanks @tony-sull! - Adds caching support for transformed images πLocal images will be cached for 1 year and invalidated when the original image file is changed.
Remote images will be cached based on the
fetch()
response's cache headers, similar to how a CDN would manage the cache.cacheDir
By default, transformed images will be cached to
./node_modules/.astro/image
. This can be configured in the integration's config options.export default defineConfig({ integrations: [image({ // may be useful if your hosting provider allows caching between CI builds cacheDir: "./.cache/image" })] });
Caching can also be disabled by using
cacheDir: false
.
- #4933
64a1d712e
Thanks @tony-sull! - Fixes a bug in dev when<Image />
is used for a local image with no transformations
-
#4906
ec55745ae
Thanks @tony-sull! - Updates the default image service to use format-specific quality defaults -
#4842
812658ad2
Thanks @bluwy! - Specify sharp as optional peer dependency -
#4842
812658ad2
Thanks @bluwy! - Add missing dependencies, support strict dependency installation (e.g. pnpm)
-
#4738
fad3867ad
Thanks @tony-sull! - Adds a new built-in image service based on web assembly libraries π₯ web container support!Migration: Happy with the previous image service based on
sharp
? No problem! Installsharp
in your project and update your Astro config to match.npm install sharp
--- import image from '@astrojs/image'; export default { // ... integrations: [ image({ serviceEntryPoint: '@astrojs/image/sharp', }), ], }; ---
- #4797
944d24e9e
Thanks @smeevil! - Do not pass width and height to the img element when wrapped in a picture element
- #4800
ea37de86e
Thanks @obennaci! - Prevent background flattening on formats supporting transparency
- #4678
4c05c65a3
Thanks @tony-sull! - Updates the integration to build all optimized images todist/assets
during SSG builds
- #4642
e4348a4eb
Thanks @beeb! - Added abackground
option to specify a background color to replace transparent pixels (alpha layer).
- #4649
db70afdcd
Thanks @tony-sull! - Fixes a bug related to filenames for remote images in SSG builds
- #4593
56f83be92
Thanks @tony-sull! - Fixes a bug that broke support for local images with spaces in the filename
-
#4482
00c605ce3
Thanks @tony-sull! -<Image />
and<Picture />
now support using images in the/public
directory π- Moving handling of local image files into the Vite plugin
- Optimized image files are now built to
/dist
with hashes provided by Vite, removing the need for a/dist/_image
directory - Removes three npm dependencies:
etag
,slash
, andtiny-glob
- Replaces
mrmime
with themime
package already used by Astro's SSR server - Simplifies the injected
_image
route to work for bothdev
andbuild
- Adds a new test suite for using images with
@astrojs/mdx
- including optimizing images straight from/public
- #4534
b8a80bc42
Thanks @Princesseuh! - Fix import.meta.env not being available when using the image integration's types
- #4338
579e2daf8
Thanks @tony-sull! - When using remote images in SSG builds, query parameters from the original image source should be stripped from final build output
- #4342
c4af8723b
Thanks @tony-sull! - The integration now includes a logger to better track progress in SSG builds. Use the newlogLevel: "debug"
integration option to see detailed logs of every image transformation built in your project.
- #4279
42fd6936c
Thanks @FredKSchott! - Add better warnings if the integration was not properly configured.
- #4221
92aa6a75e
Thanks @alex-drocks! - README update
- #4140
4678a3f35
Thanks @jackmerrill! - Added support for GIF to Animated WEBP images
- #4173
581120818
Thanks @tony-sull! - Fixes a bug related to local image files in SSR builds on Windows
- #4147
c039ea93a
Thanks @crutchcorn! - Enable usage outside of vite contexts, such as the config file
- #4146
97cf0cd89
Thanks @crutchcorn! - Export all "dist" files
- #4141
65f2d3b4b
Thanks @FredKSchott! - fix windows "bad package export" error
- #4045
a397b981f
Thanks @tony-sull! - Big improvements to the TypeScript and Language Tools support for@astrojs/image
π
-
#4015
6fd161d76
Thanks @matthewp! - Newoutput
configuration optionThis change introduces a new "output target" configuration option (
output
). Setting the output target lets you decide the format of your final build, either:"static"
(default): A static site. Your final build will be a collection of static assets (HTML, CSS, JS) that you can deploy to any static site host."server"
: A dynamic server application. Your final build will be an application that will run in a hosted server environment, generating HTML dynamically for different requests.
If
output
is omitted from your config, the default value"static"
will be used.When using the
"server"
output target, you must also include a runtime adapter via theadapter
configuration. An adapter will adapt your final build to run on the deployed platform of your choice (Netlify, Vercel, Node.js, Deno, etc).To migrate: No action is required for most users. If you currently define an
adapter
, you will need to also addoutput: 'server'
to your config file to make it explicit that you are building a server. Here is an example of what that change would look like for someone deploying to Netlify:import { defineConfig } from 'astro/config'; import netlify from '@astrojs/netlify/functions'; export default defineConfig({ adapter: netlify(), + output: 'server', });
- #4013
ef9345767
Thanks @tony-sull! - - Fixes two bugs that were blocking SSR support when deployed to a hosting service- The built-in
sharp
service now automatically rotates images based on EXIF data
- The built-in
- #3961
d73c04a9e
Thanks @tony-sull! - Updates the component to pass thealt
attribute down to the element
- #4048
e60d6d9c1
Thanks @tony-sull! - Removes Node'sfileURLToPath
dependency in the production SSR endpoint
- #4004
ef9c4152b
Thanks @sarah11918! - [READMEs] removed "experimental" from astro add instructions
- #3980
eaf187f2c
Thanks @tony-sull! - Fixing TypeScript definition exports for image components
- #3957
2a7dd040e
Thanks @tony-sull! - Improves theastro dev
experience when using a third-party hosted image service
- #3965
299b4afca
Thanks @tony-sull! - Adding a unique hash to remote images built for SSG to ensure unique URLs are always de-duplicated
- #3876
f9614128
Thanks @tony-sull! - Bug: Updating the component to default to async image decoding
- #3866
89d76753
Thanks @tony-sull! - The new<Picture />
component adds art direction support for building responsive images with multiple sizes and file types π
- #3854
b012ee55
Thanks @bholmesdev! - [astro add] Support adapters and third party packages
- #3869
0aaef1c4
Thanks @tony-sull! - Bugfix: fixing a bug that broke builds in NPM workspaces
- #3812
5ccccace
Thanks @tony-sull! - - Updates how the<Image />
component is exported to support older versions of Astro- Adds an example of using the
<Image />
component in markdown pages
- Adds an example of using the
- #3795
d143d24c
Thanks @tony-sull! - Automatically adds the requiredvite.optimizeDeps
config forsharp
. Also ensures that only whole numbers are passed to sharp's resize transform
- #3788
f4943e0f
Thanks @tony-sull! - Initial release! π