Optimizing the Uploaded Image in PHP Tutorial

Legendary · 2025-02-27T03:37:04+0000

In this tutorial, I will show you a way how to upload images in PHP with reduced quality and resized resolution. This kind of feature might be helpful to your current or future project that uploads and displays lots of images. It will help your project load the pages faster even there are a lot of images are being shown because instead of displaying the original size and quality of the images is optimized. For example, you are developing a Blog Site and each blog or article has a thumbnail or banner image. On your list page, you want to display the thumbnails or images of the articles listed. So, instead of displaying the image that has the original size and resolution, you can display the optimized images so that the list page will load faster even though lots of images are being loaded on the page.

In this article, I will show you a simple web program that contains an uploading feature and displays it. The application will also upload the original copy of the image and creates an optimized copy and save them both in different directories. I will be using a MySQL Database to store the images paths. Uploaded optimized images will be loaded on the right side of the panel with the links displaying the original and optimized images so you can compare. The source code only reduces the quality of the low-resolution images. The system will only create a resized copy of the uploaded image that is larger than 640x480 pixels resolution.

Getting Started

Download the following to your local machine:

The latest version of XAMPP

Install the XAMPP into your local machine. Next, open the XAMPP's php.ini

file and uncomment GD Library extension to enable it. After that, open the XAMPP's Control Panel and start the Apache and MySQL Server.

Open your preferred browser and browse the XAMPP's PHPMyAdmin by browsing http://localhost/phpmyadmin

.

Creating the Database

Create a new database naming dummy_db. After that, navigate the page into the SQL tab of your newly created database. Then, paste the SQL Script below into the provided text field and click the Go button below to execute the SQL Script.

CREATE

TABLE

`uploaded_

files`

(
`id`

int

(

30

)

NOT

NULL

AUTO_INCREMENT

PRIMARY KEY

,
`original_

path`

text

NOT

NULL

,
`thumbnail_

path`

text

NOT

NULL
)

ENGINE

=

InnoDB

DEFAULT

CHARSET

=

utf8mb4;

Creating the Database Connection File

Open your preferred text editor such as notepadd++ or sublime text. Create a new PHP File naming db-connect.php. Save the file inside your source code directory's root path. Then, copy/paste the script below.

<?php
$host

=

'localhost'

;
$username

=

'root'

;
$pw

=

''

;
$dbname

=

'dummy_db'

;
$conn

=

new

mysqli(

$host

,

$username

,

$pw

,

$dbname

)

;
if

(

!

$conn

)

{
die

(

"Cannot connect to the database. Error:"

.

$conn

->

error

)

;
}

Creating the Interface

Next, create a new PHP File naming index.php. This file contains the scripts of displaying the elements of the application. I contains the uploading form and display area of the uploaded images. Uploaded images will only display the optimized images.

<?php require_once(

'db-connect.php'

)

; ?>
<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

Optimzing Uploaded Images</

title

>
</

head

>
<style

>
html, body{
width:100%;
margin:unset;
}
.text-center{
text-align:center;
}
.panel-row{
width:100%;
display:flex;
padding: 0 15px;
}
.left-panel{
width:30%;
padding: .5rem;
min-height:10rem;
border-radius:.5rem;
}
.right-panel{
width:70%;
padding: .5rem;
display:flex;
flex-wrap:wrap;
}
input[type="file"]{
width:100%;
}
.img-holder{
width:20%;
height:15vh;
padding:.5em;
margin-bottom:1.8em
}
.img-holder>img{
width:100%;
height:100%;
object-fit:scale-down;
object-position:center;
background: #000c;
}
@media (max-width:680px){
.panel-row{
flex-direction:column
}
.left-panel, .right-panel{
width:100%;
}
.img-holder{
width:90%;
height:40vh;
}
}
</

style

>
<body

>
<h2

class

=

"text-center"

>

Optimizig Uploaded Images</

h2

>
<hr

>
<div

class

=

"panel-row"

>
<div

class

=

"left-panel"

>
<form

action

=

"upload.php"

method

=

"POST"

enctype

=

"multipart/form-data"

>
<h4

class

=

"text-center"

><b

>

Upload Image</

b

></

h4

>
<input

type

=

"file"

name

=

"img"

accept

=

"image/png, image/jpeg"

required>
<small

><i

>

Accepts only PNG and JPEG Files</

i

></

small

>
<br

>
<br

>
<center

>
<button

>

Upload</

button

>
</

center

>
</

form

>
</

div

>
<div

class

=

"right-panel"

>
<?php
$query =

$conn->

query("SELECT * FROM `uploaded_files`");
while($row = $query->fetch_assoc()):
?>
<div

class

=

"img-holder"

>
<img

src

=

"<?= $row['thumbnail_path'] ?>

" alt="">
<br

>
<div

class

=

"text-center"

><a

href

=

"<?= $row['original_path'] ?>

" target="_blank">Original</

a

></

div

>
<div

class

=

"text-center"

><a

href

=

"<?= $row['thumbnail_path'] ?>

" target="_blank">Optimized</

a

></

div

>
</

div

>
<?php endwhile; ?>
</

div

>
</

div

>
<?php $conn->

close(); ?>
</

body

>
</

html

>

Creating the Upload Script

Lastly, create a new PHP File naming upload.php. This is where the main scripts for our goal on this tutorial be found. The below PHP Script contains the uploading the original and optimized copies of the image. This contains also the code of saving the paths of the images in the database.

<?php
require_once

(

'db-connect.php'

)

;
if

(

$_SERVER

[

'REQUEST_METHOD'

]

==

'POST'

)

{
if

(

isset

(

$_FILES

[

'img'

]

)

&&

!

empty

(

$_FILES

[

'img'

]

[

'tmp_name'

]

)

)

{
$img

=

$_FILES

[

'img'

]

;
// Orginal uploaded images directory
$original_dir

=

"originals/"

;
//Creating Directory if not exists
if

(

!

is_dir

(

$original_dir

)

)
mkdir

(

$original_dir

)

;
// uploaded images thumbnail directory
$thumbnail_dir

=

"thumbnails/"

;
//Creating Directory if not exists
if

(

!

is_dir

(

$thumbnail_dir

)

)
mkdir

(

$thumbnail_dir

)

;
//FileName
$fname

=

$img

[

'name'

]

;
// Checking Duplicate Filename
$i

=

0

;
while

(

true

)

{
if

(

$i

==

0

)

{
if

(

!

is_file

(

$original_dir

.

$fname

)

&&

!

is_file

(

$thumbnail_dir

.

$fname

)

)

{
break

;
}
}

else

{
if

(

!

is_file

(

$original_dir

.

$i

.

"_"

.

$fname

)

&&

!

is_file

(

$thumbnail_dir

.

$i

.

"_"

.

$fname

)

)

{
$fname

=

$i

.

"_"

.

$fname

;
break

;
}
}
$i

++;
}
// Image File Type
$file_type

=

mime_content_type

(

$img

[

'tmp_name'

]

)

;
$oupload

=

false

;
$thumb_upload

=

false

;
if

(

$file_type

==

'image/png'

)

{
// For PNG Files
$gdimg

=

imagecreatefrompng

(

$img

[

'tmp_name'

]

)

;
if

(

$gdimg

)

{
$oupload

=

imagepng

(

$gdimg

,

$original_dir

.

$fname

,

9

)

;
list

(

$width

,

$height

)

=

getimagesize

(

$img

[

'tmp_name'

]

)

;
if

(

$width

>

640

||

$height

>

480

)

{
if

(

$width

>

$height

)

{
$perc

=

(

$width

-

640

)

/

$width

;
$width

=

640

;
$height

=

$height

-

(

$height

*

$perc

)

;
}

else

{
$perc

=

(

$height

-

480

)

/

$height

;
$height

=

480

;
$width

=

$width

-

(

$width

*

$perc

)

;
}
}
$gdimg

=

imagescale(

$gdimg

,

$width

,

$height

)

;
$thumb_upload

=

imagepng

(

$gdimg

,

$thumbnail_dir

.

$fname

,

6

)

;
imagedestroy

(

$gdimg

)

;
}

else

{
echo

'<script>alert("Invalid PNG File.")</script>'

;
}
}

else

if

(

$file_type

==

'image/jpeg'

)

{
// For JPEG Files
$gdimg

=

imagecreatefromjpeg

(

$img

[

'tmp_name'

]

)

;
if

(

$gdimg

)

{
$oupload

=

imagejpeg

(

$gdimg

,

$original_dir

.

$fname

,

100

)

;
list

(

$width

,

$height

)

=

getimagesize

(

$img

[

'tmp_name'

]

)

;
if

(

$width

>

640

||

$height

>

480

)

{
if

(

$width

>

$height

)

{
$perc

=

(

$width

-

640

)

/

$width

;
$width

=

640

;
$height

=

$height

-

(

$height

*

$perc

)

;
}

else

{
$perc

=

(

$height

-

480

)

/

$height

;
$height

=

480

;
$width

=

$width

-

(

$width

*

$perc

)

;
}
}
$gdimg

=

imagescale(

$gdimg

,

$width

,

$height

)

;
$thumb_upload

=

imagejpeg

(

$gdimg

,

$thumbnail_dir

.

$fname

,

50

)

;
imagedestroy

(

$gdimg

)

;
}

else

{
echo

'<script>alert("Invalid JPEG File.")</script>'

;
}
}

else

{
echo

'<script>alert("Invalid Image type.")</script>'

;
}
if

(

$oupload

&&

$thumb_upload

)

{
$sql

=

"INSERT INTO `uploaded_files` (`original_path`, `thumbnail_path`) VALUES ('{$original_dir}

{$fname}

', '{$thumbnail_dir}

{$fname}

') "

;
$save

=

$conn

->

query

(

$sql

)

;
if

(

$save

)

{
echo

'<script>alert("Image has been uploaded successfully.")</script>'

;
}

else

{
if

(

is_file

(

$original_dir

.

$fname

)

)
unlink

(

$original_dir

.

$fname

)

;
if

(

is_file

(

$thumbnail_dir

.

$fname

)

)
unlink

(

$thumbnail_dir

.

$fname

)

;
echo

'Uploading Image Failed <br>'

;
echo

'Error: '

.

$conn

->

error

;
exit

;
}
}

else

{
echo

'Uploading Image Failed <br>'

;
exit

;
}
}

else

{
echo

'<script>alert("No Image file has been sent.")</script>'

;
}
}

else

{
echo

'<script>alert("No Data has been sent.")</script>'

;
}
$conn

->

close

(

)

;
echo

'<script>location.replace("./")</script>'

;
?>

That's it! You can now check the application and see if it works as we planned and if it achieves our goal of this tutorial. You can test the application by browsing http://localhost/source_code_directory_name/

in to your preferred browser.

DEMO VIDEO

That's the end of this tutorial. If there's an error occurred on your end, please review your changes to your codes and try to differentiate them from the source code I provided above. You can also download the working source code I created for this tutorial. The download button is located below this article.

I hope this tutorial will help you with what you are looking for and you'll find this useful for your future PHP Projects.

Explore more on this website for more Tutorials and Free Source Codes.

Download

You must upgrade your account or reply in the thread to view hidden text.

Optimizing the Uploaded Image in PHP Tutorial

More options

Legendary

452,292

323,341

323,350