I have images in WebP format. They are in very high resolution, my designer sent them to me. I have stored them on my website server right now. But my page load time is slow because the size is very high and Google Lighthouse says I can resize these images. How do I resize these WebP images? I have 1000s of them.
Real-time URL-based resizing
ImageKit offers real-time resizing parameters for all images. These images can be in the ImageKit Media Library or present on your server or cloud storage like S3, Azure, etc., that is connected to ImageKit.
You need to add the height or width transformation parameters in the URL and you will get your WebP image resized in real time. This is great if you have a lot of images that need to be embedded directly on your website or app.
For example, to resize a WebP image to width 210px, we add ?tr=w-210 to the URL
https://ik.imagekit.io/ikmedia/docs_images/object.webp?tr=w-210
You have other resize and crop options as well. You can specify either height or width, or combine one of these parameters with the aspect ratio parameter to resize the WebP image in real-time. For example, with the aspect ratio parameter set to 4:3 at width 450px, our transformation will look like this
https://ik.imagekit.io/ikmedia/docs_images/object.webp?tr=w-450,ar-4-3
You can directly use this URL on your website or app for your end users. ImageKit uses a CDN for fast loading time, and we will also convert it to a suitable format that is supported on the user’s device. Like if a device does not support WebP, ImageKit will convert it to a JPEG or a PNG as required.
Manual Resize
You can also resize the WebP image manually if needed using the browser-based image editor in ImageKit. For this, upload the WebP image to the ImageKit Media Library, which is a built-in DAM solution, and use the image editor to resize the image. You can download the image or save it back to the media library.
