Simplified Image Resizing with PHP
Recently, as I built a Website to show off a range of products, I realized that not only was I going to want to use the same product image over and over again, but I was going to want to use that same image at different sizes throughout the site!
I thought to myself, “I don’t feel like having 4,000 different thumbnails on my server for each product, and I don’t want to have the image look all jacked-up and distorted if I hard code the image width and height in my HTML”.
I know what you’re thinking. Why couldn’t I just use something like ImageMagik?
In most cases, I would use ImageMagik so that I could have a regular version and a thumbnail version of each image. But in this particular case, I wanted to be able to display various sizes of the same image, without having 4,000 different thumbnails sitting around taking up space.
So how did I do it? Well, I improvised. I knew these things:
- I wanted one image per product.
- I wanted the size of the altered image to keep its aspect ratio, no matter whether it was landscape or portrait.
- I wanted one script to do all of this dynamically.
So, with the knowledge I’d gained using PHP almost on a daily basis, I sat down and started figuring out a function to achieve these goals. I am by no means a PHP guru — in fact, I taught myself the language sometime in the summer of 2002, so by most standards, I’m still a newbie. But I thought I could create a script that would do exactly what I wanted…
Getting Started
Let’s say you have a great line of socks that you want to sell through your site. Well, you’re proud of these fantastic socks and want people to see as much of them as possible: on the product views page, on the search page, on the listing page, etc. But this doesn’t mean that you have to use the default image size each time, nor risk the quality of the image being degraded when it is stretched or crunched into a space. Some socks are longer than others and so you might have the image sizes ranging from 200×400 up to 600×750 pixels.
To begin writing the function, we have to declare it as such… Then we have to throw in our attributes. We want to restrict our image, so we have to let the function know the dimensions to which we want to restrict it, and we have to know what the original image size is to begin with (we’ll get to that part in a second).
$height) < $percentage = ($target / $width); >else < $percentage = ($target / $height); >//gets the new value and applies the percentage, then rounds the value $width = round($width * $percentage); $height = round($height * $percentage); //returns the new sizes in html image tag format. this is so you can plug this function inside an image tag and just get the return "width="$width" height="$height""; > ?>
Before we take our new function on a test drive, we need to get the width and height of the image that we want to display. There is a magical command in PHP called getimagesize(). This command, used properly, will return the image width, height, type, and even the width and height in HTML image tag format (width=”x” height=”y”).
$mysock = getimagesize("images/sock001.jpg"); Now, $mysock is an array that holds vital information about the particular image we want to display. In index 0, we have the width ( $mysock[0] ), and in index 1, we have the height ( $mysock[1] ). That’s really all we need, in order to get what we want done. Want to see the function… well, function? Here we go!
The Function in Action
Let’s say you want to display a list of your beautiful socks, but you want room on the page to show them neatly in a row, and to do that they cannot be larger than 150 pixels tall or wide.
That’s it! Now, no matter what the original file size, it will be restricted to no more than 150 pixels in width or height (or whatever you specify).
Now, you may think “This sounds too good to be true. Is there any circumstance where using this technique could prove disastrous?”
Actually, there is. Keep in mind that you aren’t changing the file’s original size. That same 200×400, 50 KB picture you uploaded only moments ago is still 200×400, 50 KB. This script only changes height and width attribute in HTML, so that your original picture conforms to the height and width you think will look best on your Web page.
Having said that, if you have a page that lists 50-something products, the page will display the way you want it to, but uses will have to download all 50 of those 50 KB pictures, which could take some time. So I’d have to recommend this technique in situations where you’re only showing a few pictures at a time.
Share This Article
Greg started his pursuit of knowledge in PHP and MySQL in the Summer of 2002. Currently, NokX is involved in freelance work under the name NokX, but is expanding and joining forces to create a new identity that has yet to be named.
PHP Resize Image
Sometimes we need to resize images on our website. For example, the size of the image is more than what we need. If your website is created with PHP, the resize image method will be helpful and can be done in two ways in PHP. One uses the Imagick class and the other with PHP’s own functions.
Many hosts do not have Imagick installed, so we have to use PHP’s own functions. In this article, we will teach you how to resize the image, so stay tuned.
Why do we need Image resizing?
All websites need high SEO in order to be displayed in search engines. One of the things that are important in increasing the SERP of a page is its size. Now suppose that the page has images with high size and volume. what will happen? The page loading speed will slow down and you will lose your users even if you have written the best content on the internet.
Therefore, all pages need to have a suitable size. One of the important things that increase the size of pages is images. In this tutorial, functions will be introduced that you can use to reduce the size of your images. We have also prepared an article for you on this website titled How to Compress Image Without Losing Visible Quality.
How to resize an image in PHP?
It is possible to change the image size in PHP using the following examples.
Resize JPEG format image
function resize_image_jpeg($source_file,$destination_file, $width, $height, $quality, $crop=FALSE) < list($current_width, $current_height) = getimagesize($source_file); $rate = $current_width / $current_height; if ($crop) < if ($current_width >$current_height) < $current_width = ceil($current_width-($current_width*abs($rate-$width/$height))); >else < $current_height = ceil($current_height-($current_height*abs($rate-$width/$height))); >$newwidth = $width; $newheight = $height; > else < if ($width/$height >$rate) < $newwidth = $height*$rate; $newheight = $height; >else < $newheight = $width/$rate; $newwidth = $width; >> $src_file = imagecreatefromjpeg($source_file); $dst_file = imagecreatetruecolor($newwidth, $newheight); imagecopyresampled($dst_file, $src_file, 0, 0, 0, 0, $newwidth, $newheight, $current_width, $current_height); imagejpeg($dst_file, $destination_file, $quality); >resize_image_jpeg('image.jpg','dst_image.jpg','100','100',75,false);In this example, we have two ways to change the image size, one with crop and the other without crop. In crop, it doesn’t matter how wide the image is, its width will be the same as entered in the function parameter, which is 100 in this example. If the width of the image after resizing is greater than 100, the remaining width will be cropped.
In the method without a crop, if the height is greater than the width, the height will be considered the basis, and if the width is greater than the height, the width will be considered the basis, and the image will be resized based on the basis.
Resize PNG format image
PNG images are slightly different from JPEG format due to the possibility of being transparent. The way to determine the width and height is the same as the previous function and the only difference is the way to create and save the image.
function resize_image_png($source_file,$destination_file, $width, $height, $quality, $crop=FALSE) < list($current_width, $current_height) = getimagesize($source_file); $rate = $current_width / $current_height; if ($crop) < if ($current_width >$current_height) < $current_width = ceil($current_width-($current_width*abs($rate-$width/$height))); >else < $current_height = ceil($current_height-($current_height*abs($rate-$width/$height))); >$newwidth = $width; $newheight = $height; > else < if ($width/$height >$rate) < $newwidth = $height*$rate; $newheight = $height; >else < $newheight = $width/$rate; $newwidth = $width; >> $src_file = imagecreatefrompng($source_file); imagepalettetotruecolor($src_file); imagealphablending($src_file, true); imagesavealpha($src_file, true); $dst_file = imagecreatetruecolor($newwidth, $newheight); imagecopyresampled($dst_file, $src_file, 0, 0, 0, 0, $newwidth, $newheight, $current_width, $current_height); imagepng($dst_file, $destination_file, $quality); >resize_image_png('image.png','dst_image.png','100','100',7,false);The quality parameter must be between 0 to 9.
Resize WebP format image
The WebP format is one of the image formats designed by Google and, like SVG, is known as Next-Gen Image. The size of WebP images is lower than JPEG and PNG because this format uses text to store images.
In the following function, you will do how to resize WebP images.
function resize_image_webp($source_file,$destination_file, $width, $height, $quality, $crop=FALSE) < list($current_width, $current_height) = getimagesize($source_file); $rate = $current_width / $current_height; if ($crop) < if ($current_width >$current_height) < $current_width = ceil($current_width-($current_width*abs($rate-$width/$height))); >else < $current_height = ceil($current_height-($current_height*abs($rate-$width/$height))); >$newwidth = $width; $newheight = $height; > else < if ($width/$height >$rate) < $newwidth = $height*$rate; $newheight = $height; >else < $newheight = $width/$rate; $newwidth = $width; >> $src_file = imagecreatefromwebp($source_file); $dst_file = imagecreatetruecolor($newwidth, $newheight); imagecopyresampled($dst_file, $src_file, 0, 0, 0, 0, $newwidth, $newheight, $current_width, $current_height); imagewebp($dst_file, $destination_file, $quality); >resize_image_webp('image.webp','dst_image.webp','100','100',75,false);Conclusion
In the examples above, we introduced functions that you can use to resize the image. These functions are built-in PHP functions that can be used in most PHP versions today.
You can even develop a plugin for WordPress using these functions and provide it to users or even sell it. On this website, we have provided an article titled How To Create A Custom WordPress Plugin for you.