BLOG › Convert & Compress & Edit Image › How to Resize Images with OpenCV Python/CSS/PHP

How to Resize Images with OpenCV Python/CSS/PHP

Resize Images with OpenCV

Resizing images means scaling them for better processing. These images can then be used in various machine learning applications. A resized image has a lesser number of pixels than its original version and this, in turn, brings down the training time of a neural network. The complexity level of the model also gets reduced in the process compared to a pixel rich image having a larger number of input nodes.

Part 1. How to Resize Images in OpenCV-Python
Part 2. How to Resize Images Using PIL with Aspect Ratio
Part 3. A Solution to Resize Images with CSS
Part 4. Steps to Resize Images with PHP
Part 5. Free Online Tool to Resize Images in One-Click

Part 1. How to Resize Images in OpenCV-Python

By default, resizing changes the height and width of an image. Users can either preserve or alter the aspect ratio depending on their requirements. For preserving the aspect ratio, the width or height has to be calculated for a target width or height. Let us now take a look at the steps you need to follow for undertaking cv2 resize:

First, you need to use the command cv2.imread() for opening the image.
The image can be both upscaled and downscaled as per requirement by using the cv2.resize() command.
Next, you will have to use various interpolation methods and pass them using the opencv function.
All the rotated images can be displayed using the cv2.imshow() command.
Ultimately, you need to destroy all windows using the command cv2.destroyAllWindows().

Part 2. How to Resize Images Using PIL with Aspect Ratio

Python Imaging Library or PIL is used to resize an image to a width of 300 pixels and a height that is in proportion to the new height.

For undertaking the PIL image resize while maintaining its aspect ratio, you need to define the maximum size of the file.
Once the maximum size has been defined, a resize ratio can be computed by entering the formula min(maxwidth/width, maxheight/height).
You can also do the same by following the library method of image.thumbnail. PIL uses Image.NEAREST filter by default to resize images and this can offer top-notch performance at the cost of sacrificing quality.

Part 3. A Solution to Resize Images with CSS

Image resize in CSS is used to upscale or downscale images so that they can fit the div container. The resize image property is created using the max-width property in CSS. Thus, it is necessary to have a properly defined width and height of the image in the HTML. Otherwise, the resize property won’t yield correct results. Let us now take a look at the steps to undertake background resize CSS:

To proceed with CSS auto resize image, you will have to use the below-mentioned code:

img{

max-width:100%;

max-height:100%

}

You can also opt for an alternative syntax of

img{

max-width:100%;

max-height:auto

}

Doing this ensures that the width of the images does not exceed that of the container. Users can also take the help of the object-fit property to ensure that it fits the image without making any changes in terms of its proportionality.

Here you need to be careful about not adding the explicit height and width to the image(img) tag.
One of the biggest problems of the max-width and max-height code is that they are not compatible with various browsers.

Part 4. Steps to Resize Images with PHP

You can use the PHP script to create a resized image or thumbnail from an original file. Let us now take a look at the steps you need to follow for undertaking PHP resize:

Resizing is possible only when the set limits are lesser than the source image. You can simply copy $source to $destination if the source image is smaller than or equal to the set limits of $max_width and $max_height.
In the case of landscape images, the $width is more than $height. Hence you need to limit $new_width according to the set $max_width before accordingly calculating the $new_height.
Similarly, for portrait or square images, the $width is either less than or equal to the $height. Thus the $new_width can be calculated after limiting the $new_height to the set $max_height.
On completion of the calculations, an image object of the source image can be created using the respective function of $original = imagecreatefromXXX($source).

In the next step, an empty resized canvas has to be created using the syntax$resize = imagecreatetruecolor($new_width, $new_height).
Now you will have to use the code imagecopyresampled($resize, $original) for copying and resizing the image file from the source to the destination.
Ultimately, you need to save the resized image using the code imageXXX($resize).

Part 5. Free Online Tool to Resize Images in One-Click

All of the methods mentioned above are mostly targeted for users having professional-grade knowledge. Thus, it is ill-suited for amateur users on the large. If you fall under the second category, then you can seek out the help of Wondershare Online UniConverter for resizing your images completely free of cost, and also undertaking a variety of editing work without downloading any bulky software in your system. Batch processing is supported by this online utility which can deal with BMP, JPG, GIF, and PNG without lowering down the quality of the final output. Let us now take a look at the steps of resizing images using UniConverter:

{{ $lang.resize.loading }} ...

{{ $lang.resize.resizingImages }}...

{{ imgResizeError ? $lang.resize.resizedFail : $lang.resize.resizedSuccess }}!

{{ $lang.resize.sorryYourFiles }} "{{imgErrorArr.join('，')}}" {{ $lang.resize.resizedFailDownload }} {{ $lang.resize.desktopVersion }} {{ $lang.resize.tryAgain }}

Pictures consist of countless pixels that can be categorized under three primary colors of green, red, and blue. Resizing images make them more well-suited to certain applications. You can try out the different methods discussed above to resize images. But Online UniConverter can surely yield you the best results by retaining image quality and presenting users with an extremely intuitive interface of doing the same.