-
#7901
00cb28f49
Thanks @bluwy! - Improve sourcemap generation and performance -
Updated dependencies [
41afb8405
,c00b6f0c4
,1f0ee494a
,00cb28f49
,c264be349
,e1e958a75
]:
-
#7500
e644b3465
Thanks @wooseopkim! - fix: makePicture
generate valid dev URLs -
#7510
4256409a9
Thanks @Mrowa96! - Fix problem where image metadata generation throwed error when provided url started with /@astroimage -
Updated dependencies [
9e2426f75
,cdc28326c
,19c2d43ea
,2172dd4f0
,1170877b5
]:
-
#7340
9739adc91
Thanks @wooseopkim! - Fix problem where filenames with spaces produce invalid srcset attributes -
Updated dependencies [
30bb36371
,3943fa390
,7877a06d8
,e314a04bf
,33cdc8622
,76fcdb84d
,8e2923cc6
,459b5bd05
]:
- #7260
39403c32f
Thanks @natemoo-re! - Unflags support foroutput: 'hybrid'
mode, which enables pre-rendering by default. The additionalexperimental.hybridOutput
flag can be safely removed from your configuration.
- Updated dependencies [
57f8d14c0
,414eb19d2
,a7e2b37ff
,dd1a6b6c9
,d72cfa7ca
,144813f73
,b5213654b
,e3b8c6296
,890a2bc98
,39403c32f
,101f03209
]:
-
#6991
719002ca5
Thanks @MoustaphaDev! - Enable experimental support for hybrid SSR with pre-rendering enabled by defaultastro.config.mjs
import { defineConfig } from 'astro/config'; export defaultdefineConfig({ output: 'hybrid', experimental: { hybridOutput: true, }, })
Then add
export const prerender = false
to any page or endpoint you want to opt-out of pre-rendering.src/pages/contact.astro
--- export const prerender = false; if (Astro.request.method === 'POST') { // handle form submission } --- <form method="POST"> <input type="text" name="name" /> <input type="email" name="email" /> <button type="submit">Submit</button> </form>
-
Updated dependencies [
4516d7b22
,e186ecc5e
,c6d7ebefd
,914c439bc
,e9fc2c221
,075eee08f
,719002ca5
,fc52681ba
,fb84622af
,cada10a46
,cd410c5eb
,73ec6f6c1
,410428672
,763ff2d1e
,c1669c001
,3d525efc9
]:
-
#7059
ebb40f5cb
Thanks @jasikpark! - Addfetchpriority
to allowedPicture
attributes in@astrojs/image
-
#6969
77270cc2c
Thanks @bluwy! - Avoid removing leading slash forbuild.assetsPrefix
value in the build output -
#6952
e5bd084c0
Thanks @Princesseuh! - Update allowed Sharp versions to support 0.32.0 -
Updated dependencies [
a8a319aef
,a695e44ae
,367e61776
,77270cc2c
,895fa07d8
,72c6bf01f
,e5bd084c0
]:
-
#6773
99479e6b9
Thanks @doganalper! - Make sizes prop optional on Image component
-
#6714
ff0430786
Thanks @bluwy! - Addbuild.assetsPrefix
option for CDN support. If set, all Astro-generated asset links will be prefixed with it. For example, setting it tohttps://cdn.example.com
would generatehttps://cdn.example.com/_astro/penguin.123456.png
links.Also adds
import.meta.env.ASSETS_PREFIX
environment variable that can be used to manually create asset links not handled by Astro. -
Updated dependencies [
489dd8d69
,a1a4f45b5
,a1108e037
,8b88e4cf1
,d54cbe413
,4c347ab51
,ff0430786
,2f2e572e9
,7116c021a
]:
-
#6701
46ecf4662
Thanks @Princesseuh! - Remove unnecessary.wasm
files inside build output when possible -
Updated dependencies [
c0b7864a4
,5e33c51a9
,c2d4ae1cb
,08e92f4f8
,f0b732d32
,a0bdf4ce2
,c04ea0d43
,46ecf4662
]:
-
#6680
386336441
Thanks @koriwi! - Invalidates cache when changing serviceEntryPoint -
Updated dependencies [
1f783e320
,2e92e9aa9
,adecda7d6
,386336441
,7c439868a
,25cd3e574
,4bf87c64f
,fc0ed9c53
]:
-
#6548
4685f5554
Thanks @matthewp! - Use base64 encoded modules for Squoosh integrationThis moves
@astrojs/image
to use base64 encoded versions of the Squoosh wasm modules. This is in order to prevent breakage in SSR environments where your files are moved around. This will fix usage of the integration in Netlify.
-
#6494
a13e9d7e3
Thanks @Yan-Thomas! - Consistency improvements to several package descriptions -
Updated dependencies [
acf78c5e2
,04e624d06
,cc90d7219
,a9a6ae298
,6a7cf0712
,bfd67ea74
,f6eddffa0
,c63874090
,d637d1ea5
,637f9bc72
,77a046e88
]:
- #6213
afbbc4d5b
Thanks @Princesseuh! - Updated compilation settings to disable downlevelling for Node 14
-
#6421
e58a92527
Thanks @vtavernier! - Handle missing trailing slash in processStaticImage -
Updated dependencies [
fec583909
,b087b83fe
,694918a56
,a20610609
,a4a74ab70
,75921b3cd
,afbbc4d5b
]:
-
#6347
504c7bacb
Thanks @natemoo-re! - Fix internalgetSetCookie
usage for[email protected]
-
Updated dependencies [
5e26bc891
,a156ecbb7
,ccd72e6bb
,504c7bacb
,63dda6ded
,f91a7f376
]:
-
#6142
9fdecb560
Thanks @wulinsheng123! - Improve type definitions (background
should be optional) -
#6157
460f9e732
Thanks @chasm! - Fix duplicatealt
attribute on Picture component. -
Updated dependencies [
f6fc662c3
,592386b75
,1b591a143
,bf8d7366a
,ec38a8921
,f20a85b64
,9f22ac3d0
,cee70f5c6
,ac7fb04d6
,d1f5611fe
,2189170be
,32abe49bd
]:
- #5932
b3e65991f
Thanks @rasendubi! - Allow images from outside srcDir
-
#5894
ca91976ed
Thanks @ralacerda! -getPicture()
return object with the correct image type
-
#5478
1c7eef308
Thanks @nemo0! - Update READMEs for consistency -
#6008
9c298aa5a
Thanks @jasikpark! - Updated error message for missingwidths
prop to provide an example -
#6008
9c298aa5a
Thanks @jasikpark! - Allow passingundefined
to TransformOptions, this is a types fix for users withexactOptionalTypes
enabled in their tsconfig -
Updated dependencies [
b4432cd6b
,98a4a914b
,071e1dee7
,322e059d0
,b994f6f35
,12c68343c
]:
-
#5584
9963c6e4d
& #5842c4b0cb8bf
Thanks @wulinsheng123 and @natemoo-re! - Breaking Change: client assets are built to an_astro
directory in the build output directory. Previously these were built to various locations, includingassets/
,chunks/
and the root of build output.You can control this location with the new
build
configuration option namedassets
. -
#5707
5eba34fcc
Thanks @bluwy! - Removeastro:build:start
backwards compatibility code -
#5806
7572f7402
Thanks @matthewp! - Make astro a peerDependency of integrationsThis marks
astro
as a peerDependency of several packages that are already gettingmajor
version bumps. This is so we can more properly track the dependency between them and what version of Astro they are being used with.
-
#5930
46ecd5de3
Thanks @h3y6e! - Update magic-string from 0.25.9 to 0.27.0 -
#5788
006405d33
Thanks @MoustaphaDev! - - Refactor types to support props auto-completion for theImage
andPicture
components.- Pass previously missing
alt
prop to thegetPicture
function
- Pass previously missing
-
#5871
1bd42c6b2
Thanks @Princesseuh! - Fix the integration failing to work properly on Node 18+ -
#5888
35b26f377
Thanks @Princesseuh! - Fix crash on Netlify Functions due toimport.meta.url
-
Updated dependencies [
93e633922
,16dc36a87
,01f3f463b
,e2019be6f
,05caf445d
,49ab4f231
,a342a486c
,8fb28648f
,1f92d64ea
,c2180746b
,ae8a012a7
,cf2de5422
,ce5c5dbd4
,ec09bb664
,665a2c222
,259a539d7
,f7aa1ec25
,4987d6f44
,304823811
,302e0ef8f
,55cea0a9d
,dd56c1941
,9963c6e4d
,be901dc98
,f6cf92b48
,e818cc046
,8c100a6fe
,116d8835c
,840412128
,1f49cddf9
,7325df412
,16c7d0bfd
,a9c292026
,2a5786419
,4a1cabfe6
,a8d3e7924
,fa8c131f8
,64b8082e7
,c4b0cb8bf
,23dc9ea96
,63a6ceb38
,a3a7fc929
,52209ca2a
,5fd9208d4
,5eba34fcc
,899214298
,3a00ecb3e
,5eba34fcc
,2303f9514
,1ca81c16b
,b66d7195c
]:
-
#5930
46ecd5de3
Thanks @h3y6e! - Update magic-string from 0.25.9 to 0.27.0 -
Updated dependencies [
4987d6f44
,304823811
,7325df412
,a8d3e7924
,5fd9208d4
]:
-
#5788
006405d33
Thanks @MoustaphaDev! - - Refactor types to support props auto-completion for theImage
andPicture
components.- Pass previously missing
alt
prop to thegetPicture
function
- Pass previously missing
-
#5871
1bd42c6b2
Thanks @Princesseuh! - Fix the integration failing to work properly on Node 18+ -
#5888
35b26f377
Thanks @Princesseuh! - Fix crash on Netlify Functions due toimport.meta.url
-
Updated dependencies [
16dc36a87
,05caf445d
,a342a486c
,ce5c5dbd4
,be901dc98
,e818cc046
,8c100a6fe
,64b8082e7
,899214298
,3a00ecb3e
,1ca81c16b
,b66d7195c
]:
-
#5842
c4b0cb8bf
Thanks @natemoo-re! - Breaking Change: client assets are built to an_astro
directory in the build output directory. Previously these were built to various locations, includingassets/
,chunks/
and the root of build output.You can control this location with the new
build
configuration option namedassets
.
-
#5806
7572f7402
Thanks @matthewp! - Make astro a peerDependency of integrationsThis marks
astro
as a peerDependency of several packages that are already gettingmajor
version bumps. This is so we can more properly track the dependency between them and what version of Astro they are being used with.
- Updated dependencies [
01f3f463b
,1f92d64ea
,c2180746b
,ae8a012a7
,cf2de5422
,ec09bb664
,665a2c222
,f7aa1ec25
,302e0ef8f
,840412128
,1f49cddf9
,4a1cabfe6
,c4b0cb8bf
,23dc9ea96
,63a6ceb38
,52209ca2a
,2303f9514
]:
- #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! 🎉