Optimize external / dynamic images on-the-fly in SvelteKit

📰 Dev.to · Matthias Andrasch

Optimize external images on-the-fly in SvelteKit using IPX and Unpic APIs

intermediate Published 1 Feb 2025

Action Steps

Install the IPX and Unpic APIs in your SvelteKit project
Configure IPX to optimize images on-the-fly
Use Unpic to handle dynamic image optimization
Test and verify image optimization using browser developer tools
Apply image optimization to production environment using SvelteKit's build and deployment features

Who Needs to Know This

Frontend developers and designers working with SvelteKit can benefit from this technique to improve page load times and user experience.

Key Insight

💡 Use IPX and Unpic APIs to optimize external images in SvelteKit for improved page load times and user experience.

Key Takeaways

Optimize external images on-the-fly in SvelteKit using IPX and Unpic APIs

Full Article

Title: Optimize external / dynamic images on-the-fly in SvelteKit

URL Source: https://dev.to/mandrasch/optimize-external-dynamic-images-on-the-fly-in-sveltekit-25k8

Published Time: 2025-02-01T11:05:35Z

Markdown Content:
[Skip to content](https://dev.to/mandrasch/optimize-external-dynamic-images-on-the-fly-in-sveltekit-25k8#main-content)

[![Image 1: DEV Community](https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png)](https://dev.to/)

[Powered by Algolia](https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral)

[Log in](https://dev.to/enter?signup_subforem=1)[Create account](https://dev.to/enter?signup_subforem=1&state=new-user)

## DEV Community

![Image 2](https://assets.dev.to/assets/heart-plus-active-9ea3b22f2bc311281db911d416166c5f430636e76b15cd5df6b3b841d830eefa.svg)4 Add reaction

![Image 3](https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg)4 Like ![Image 4](https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg)0 Unicorn ![Image 5](https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg)0 Exploding Head ![Image 6](https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg)0 Raised Hands ![Image 7](https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg)0 Fire

0 Jump to Comments 3 Save Boost

Copy link

Copied to Clipboard

[Share to X](https://twitter.com/intent/tweet?text=%22Optimize%20external%20%2F%20dynamic%20images%20on-the-fly%20in%20SvelteKit%22%20by%20Matthias%20Andrasch%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Fmandrasch%2Foptimize-external-dynamic-images-on-the-fly-in-sveltekit-25k8)[Share to LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Fmandrasch%2Foptimize-external-dynamic-images-on-the-fly-in-sveltekit-25k8&title=Optimize%20external%20%2F%20dynamic%20images%20on-the-fly%20in%20SvelteKit&summary=If%20all%20your%20images%20are%20known%20at%20build%20time%2C%20%40sveltejs%2Fenhanced-img%20is%20all%20you%20need%20for%20optimizing%20and...&source=DEV%20Community)[Share to Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Fmandrasch%2Foptimize-external-dynamic-images-on-the-fly-in-sveltekit-25k8)[Share to Mastodon](https://s2f.kytta.dev/?text=https%3A%2F%2Fdev.to%2Fmandrasch%2Foptimize-external-dynamic-images-on-the-fly-in-sveltekit-25k8)

[Share Post via...](https://dev.to/mandrasch/optimize-external-dynamic-images-on-the-fly-in-sveltekit-25k8#)[Report Abuse](https://dev.to/report-abuse)

[![Image 8: Matthias Andrasch](https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F775550%2F140349fc-ec5c-40bd-b3b1-f68877defc52.jpeg)](https://dev.to/mandrasch)

[Matthias Andrasch](https://dev.to/mandrasch)
Posted on Feb 1, 2025

![Image 9](https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg)4![Image 10](https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg)![Image 11](https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg)![Image 12](https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg)![Image 13](https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg)

# Optimize external / dynamic images on-the-fly in SvelteKit

[#svelte](https://dev.to/t/svelte)[#sveltekit](https://dev.to/t/sveltekit)[#ipx](https://dev.to/t/ipx)[#unpic](https://dev.to/t/unpic)

If all your images are known at b

Read full article → ← Back to Reads