Is it possible to alter the quality of an image using PHP?
Get the solution ↓↓↓Edit: click on the images to see the difference in quality.
Context
I'm trying to improve the quality of uploaded images when expanded to 1500px. The images act as a background covering the whole screen when displayed, so I want any image the user uploads, regardless of its original dimensions, to look good when expanded. I looked into code that could change the resolution of the image, but with the code I implemented, it lessened the quality of the photo. For example, the first image I attached below is an image of the photo being displayed normally with its default dimensions (750 x 445). The second photo is how the same file looks after being expanded to 1500px in width and changing its corresponding height, as well (1500 x 890). The quality of the expanded image is worse than the quality of the original image.
Code
Here's the code I used to upload the image:
The form:
<div class='imgContainer' style='width: 100%; height: 1000px;'>
<img src='images/collapse.jpg' style='object-fit: cover; width: 100%; height: 100%;'>
</div>
The code that echos the file onto the page after running theresize_image
function:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset($_FILES['image']) && $_FILES['image']['type'] == 'image/jpeg') {
$fileDestination = "images/".$_FILES['image']['name'];
move_uploaded_file($_FILES['image']['tmp_name'], $fileDestination);
$file = $fileDestination;
resize_image($file, "1500");
echo
"<div class='imgContainer' style='width: 100%; height: 1000px;'>
<img src='$file' style='object-fit: cover; width: 100%; height: 100%;'>
</div>";
}
}
The function that resizes the image:
function resize_image($file, $max_resolution) {
if (file_exists($file)) {
$original_image = imagecreatefromjpeg($file);
//resolution
$original_width = imagesx($original_image); //get image width
$original_height = imagesy($original_image); //get image height
//find ratio of new width to old width and change the height based on the ratio
$ratio = $max_resolution / $original_width;
$new_width = $max_resolution;
$new_height = $original_height * $ratio;
if ($original_image) { //if image resource exists
$new_image = imagecreatetruecolor($new_width, $new_height);
imagecopyresampled($new_image, $original_image, 0, 0, 0, 0, $new_width, $new_height, $original_width, $original_height);
imagejpeg($new_image, $file);
}
}
}
However, the quality of the image is not maintained as the width of the image increases. In this example, it's not as obvious, but I can tell that the quality of the image is worse. The first image is the original image before being altered (750 x 445) and the second image is the altered image (1500 x 890)
Question
Is there a way to expand an image after upload without reducing the quality of the photo? Is there something simple I'm missing here? Is what I'm trying to do even possible?
Things I Have Tried
I also tried adding this code to theresize_image
function, to no avail:
$background = imagecolorallocate($new_image, 0, 0, 0);
imagefill($new_image, 0, 0, $background);
This code was added in this part of the function:
function resize_image($file, $max_resolution) {
if (file_exists($file)) {
$original_image = imagecreatefromjpeg($file);
//resolution
$original_width = imagesx($original_image); //get image width
$original_height = imagesy($original_image); //get image height
//find ratio of new width to old width and change the height based on the ratio
$ratio = $max_resolution / $original_width;
$new_width = $max_resolution;
$new_height = $original_height * $ratio;
if ($original_image) { //if image resource exists
$new_image = imagecreatetruecolor($new_width, $new_height);
----> $background = imagecolorallocate($new_image, 0, 0, 0);
----> imagefill($new_image, 0, 0, $background);
imagecopyresampled($new_image, $original_image, 0, 0, 0, 0, $new_width, $new_height, $original_width, $original_height);
imagejpeg($new_image, $file);
}
}
}
Any thoughts? Thanks.
Answer
Solution:
Basically you can easily play with decreasing the quality but not vice versa. There is nothing better than original.
Well there are still some techniques how to enlarge the image step by step aka increasing the size by little steps instead of duplicating the original size while keeping no compression.
But still you will get worse result in the end.
Note: both images you have shown us has equal quality - just try to zoom the smaller one into the size of the bigger one. They looks both same blurish at the same size.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: fastcgi sent in stderr: "primary script unknown" while reading response header from upstream
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.