Resize and Crop Images and Videos in Next.js Using ImageKit

In this tutorial, we’ll explore how to resize and crop images using ImageKit’s URL-based API — before the image is even rendered on your website. Perfect for improving performance and keeping full control of how images appear without using CSS or JavaScript.

✅ What You’ll Learn:
* How to resize images using the w (width) and h (height) parameters
* How to define aspect ratios with ar for consistent layouts
* How to apply padding with cm-pad_resize without cropping
* How to force dimensions with c-force, even if it stretches
* How to crop using cm-extract and focus on specific parts of the image

🛠️ Tools & Packages Used:
- REG: https://tinyurl.com/yp6shkcw
- DOC: https://tinyurl.com/yckd62vu

⏱️ Timestamps:
00:00 – Demo
01:14 – Setup Next.js
02:35 – Build UI
07:19 – Setup ImageKit
08:46 – Render image with ImageKit
13:09 – Image resize & crop (inspect in browser)
15:12 – Apply width & height from state
19:17 – Aspect ratio
20:00 – Pad resize
22:24 – Forced crop
23:17 – Extract crop

🌐 Check out more content:
- My Portfolio: https://www.cand.site/
- Medium: https://medium.com/@ckriswinarto

💻 Get the Source Code:
- GitHub: https://github.com/candraKriswinarto/imagekit-resize-crop

🌐 Recommended Digital Tools (Affiliate Links):
- Hostinger: Get 20% Off on Web Hosting - https://dub.sh/zrpWarU

👍 If you found this video helpful, please like, and subscribe!

❓ Any questions? Drop them in the comments below!

#Coding #WebDevelopment #imagekit

Видео Resize and Crop Images and Videos in Next.js Using ImageKit канала Cand Dev