How to crop an image in HTML?

Image API
1

Is cropping the image in ImageKit same as cropping an image in HTML? If not, how do I crop an image in HTML so that I can use the same image at different places on the same HTML page which require slightly different crops?

2

You can visually crop an image using CSS properties like object-fit, object-position, or by placing the image inside a container and using overflow: hidden.

Example (CSS-based crop):

<div style="width: 200px; height: 200px; overflow: hidden;">
  <img src="your-image.jpg" style="width: 100%; object-fit: cover;" />
</div>

We have covered more such techniques in the blog here - How To Scale and Crop Images with CSS

But this doesn’t reduce the actual image size. It still loads the full image, which can hurt page load performance and impact Lighthouse score. It is recommended to crop the image before loading it on your website, so that the size of the image loading is reduced beforehand.

Cropping with ImageKit

Use ImageKit’s c (crop), w (width), h (height), cm (crop mode) and fo (focus) parameters in the image URL to create actual cropped versions that load faster and are optimized. You can read more about them here - Resize and crop images

Example: Below is a URL which resizes and crops (if needed) an image to an output of 200x200px.

https://ik.imagekit.io/ikmedia/example_image.jpg?tr=w-200,h-200

You can create multiple cropped versions of the same image with different transformations, each tailored for where you want to use them.

Use HTML/CSS cropping only if you need visual control on the page. For real performance benefits and multiple crop variants, use ImageKit’s transformation URL parameters.