Solutions For Digital Marketing & Money Saving : image

If you have a website where you let your users to upload images, you know that even the small images (around 100x100) can reach 50 - 100KB. This is way too much, when you could simply downsize the image to around 1 - 5KB, this is only the 1 - 5% of the size of the original image. Just imagine the benefits of downsizing 100.000 images... 
Bellow is an image before and after resizing: 
Before 
<div id="full-post"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiITguXHPUzRR6yFxfW6i78HDZTVvNPg6aXMN2ST0PWINyK-P0mc38U_AUP4vPh1rhR7HN-8QoP7iDYINfQW6N2Dzg1QgR0w9xDRodRH1Bx-tHC6vB1-0Sl6lX2wupNxhH3gTxtmhc8Js0i/s1600/example.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiITguXHPUzRR6yFxfW6i78HDZTVvNPg6aXMN2ST0PWINyK-P0mc38U_AUP4vPh1rhR7HN-8QoP7iDYINfQW6N2Dzg1QgR0w9xDRodRH1Bx-tHC6vB1-0Sl6lX2wupNxhH3gTxtmhc8Js0i/s1600/example.jpg" /></a><div class="code" style="float: left; text-align: center; width: 250px;"> 
 
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiITguXHPUzRR6yFxfW6i78HDZTVvNPg6aXMN2ST0PWINyK-P0mc38U_AUP4vPh1rhR7HN-8QoP7iDYINfQW6N2Dzg1QgR0w9xDRodRH1Bx-tHC6vB1-0Sl6lX2wupNxhH3gTxtmhc8Js0i/s1600/example.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiITguXHPUzRR6yFxfW6i78HDZTVvNPg6aXMN2ST0PWINyK-P0mc38U_AUP4vPh1rhR7HN-8QoP7iDYINfQW6N2Dzg1QgR0w9xDRodRH1Bx-tHC6vB1-0Sl6lX2wupNxhH3gTxtmhc8Js0i/s1600/example.jpg" /></a></div><div class="code" style="float: left; text-align: center; width: 250px;">After 
 
3.52KB</div>So let`s 24.80KB</div><div id="full-post">begin downsizing those images... 
The upload form 
upload-form.php:<div class="code"><form action="upload.php" method="POST" enctype="multipart/form-data"> 
<input type="hidden" name="MAX_FILE_SIZE" value="100000" /> 
Select image: <input name="theimage" type="file" /> 
<input type="submit" value="Upload image" /> 
</form></div>enctype="multipart/form-data" - this line tells the server that you want to send a file 
MAX_FILE_SIZE - limits the maximum file size in bytes 
type="file" - this is the file selecting input 
 
Checking the image 
First we need to check the file for 3 different problems: 
- it was submitted or not ? 
- it was uploaded ? 
- it is too big ? 
upload.php:<div class="code"><?php 
if(isset($_FILES['theimage'])){ 
if($_FILES['theimage']['size'] < 1){ 
echo 'Upload error!'; 
} 
else if($_FILES['theimage']['size'] > 100000){ 
echo 'The image is too big!'; 
} 
} 
else { 
echo 'There is no image!'; 
} 
?></div>Check image type 
Now we will check the type of the file, because we will accept only .jpg .gif and .png. At this step we will use some GD, too, because we will put our image in a variable:<div class="code"><?php 
if(isset($_FILES['theimage'])){ 
if($_FILES['theimage']['size'] < 1){ 
echo 'Upload error!'; 
} 
else if($_FILES['theimage']['size'] > 100000){ 
echo 'The image is too big!'; 
} 
else { 
switch($_FILES['theimage']['type']){ 
case 'image/gif': 
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']); 
break; 
case 'image/jpeg': 
case 'image/pjpeg': 
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']); 
break; 
case 'image/png': 
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']); 
break; 
} 
if(!isset($image)){ 
echo 'Only .gif, .jpg or .png images are allowed!'; 
} 
} 
} 
else { 
echo 'There is no image!'; 
} 
?></div>Working with transparent images 
We will downsize the images by converting it to .jpg. The jpg images can not be transparent and when the user uploads a transparent image, the transparent part will be painted in black. To make the transparent part white we need to create a white image with the same size as our uploaded image and then copy the uploaded image over the white image:<div class="code"><?php 
if(isset($_FILES['theimage'])){ 
if($_FILES['theimage']['size'] < 1){ 
echo 'Upload error!'; 
} 
else if($_FILES['theimage']['size'] > 100000){ 
echo 'The image is too big!'; 
} 
else { 
switch($_FILES['theimage']['type']){ 
case 'image/gif': 
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']); 
break; 
case 'image/jpeg': 
case 'image/pjpeg': 
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']); 
break; 
case 'image/png': 
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']); 
break; 
} 
if(!isset($image)){ 
echo 'Only .gif, .jpg or .png images are allowed!'; 
} 
else { 
$size = getimagesize($_FILES['theimage']['tmp_name']); 
$background = imagecreatetruecolor($size[0],$size[1]); 
$white = imagecolorallocate($background,255,255,255); 
imagefill($background,0,0,$white); 
imagecopy($background,$image,0,0,0,0,$size[0],$size[1]); 
} 
} 
} 
else { 
echo 'There is no image!'; 
} 
?></div>Downsize the image 
This is the final step, when we save the image in .jpg format: <div class="code"><?php 
if(isset($_FILES['theimage'])){ 
if($_FILES['theimage']['size'] < 1){ 
echo 'Upload error!'; 
} 
else if($_FILES['theimage']['size'] > 100000){ 
echo 'The image is too big!'; 
} 
else { 
switch($_FILES['theimage']['type']){ 
case 'image/gif': 
$image = imagecreatefromgif($_FILES['theimage']['tmp_name']); 
break; 
case 'image/jpeg': 
case 'image/pjpeg': 
$image = imagecreatefromjpeg($_FILES['theimage']['tmp_name']); 
break; 
case 'image/png': 
$image = imagecreatefrompng($_FILES['theimage']['tmp_name']); 
break; 
} 
if(!isset($image)){ 
echo 'Only .gif, .jpg or .png images are allowed!'; 
} 
else { 
$size = getimagesize($_FILES['theimage']['tmp_name']); 
$background = imagecreatetruecolor($size[0],$size[1]); 
$white = imagecolorallocate($background,255,255,255); 
imagefill($background,0,0,$white); 
imagecopy($background,$image,0,0,0,0,$size[0],$size[1]); 
$image = $background; 
$filename = explode(".",$_FILES['theimage']['name']); 
$filename = $filename[0]; 
imagejpeg($image,$_SERVER['DOCUMENT_ROOT'] . '/thumbnails/' . $filename . '.jpg',90); 
imagedestroy($image); 
echo 'Your image: <img src="/thumbnails/' . $filename . '.jpg" />'; 
} 
} 
} 
else { 
echo 'There is no image!'; 
} 
?></div>If you have any questions please don`t hesitate to ASK!</div>

Upload an image and downsize it (in KB`s) using php and GD

If you have a website where you let your users to upload images, you know that even the small images (around 100x100) can reach 50 - 100KB....

Upload an image and downsize it (in KB`s) using php and GD

Featured Post

Insure Your Insurance With The Best

Blog Archive