Resize image JPEG dengan PHP
Wednesday, November 28, 2007 8:15Artikel ini bertujuan untuk membuat sebuah gambar JPEG yang di-upload menjadi 3 bentuk(kecil, sedang, dan ukuran sebenarnya). Diharapkan dapat mengurangi beban load halaman website yang mempunyai list konten bergambar seperti e-commerce.
Catatan * : Hanya untuk format gambar (JPG,JPEG)
Menu upload gambar yang disediakan oleh website-website yang ada pada saat ini kebanyakan gambar yang di-upload di-copy secara langsung ke server. Jadi gambar yang dihasilkan hanya satu buah saja yaitu gambar yang di-upload. Padahal, pada kenyataannya website seperti e-commerce pada umumnya melakukan preview gambar sampai sebanyak tiga kali, yaitu:
- Preview gambar untuk list semua konten dengan keterangan singkat
- Preview gambar untuk keterangan detail
- Preview gambar untuk ukuran sebenarnya(versi large)
Apabila gambar yang dimiliki hanya satu buah saja, jadi setiap preview tersebut memakai gambar yang sama, hanya saja di-resize oleh perintah html. Hal ini tentu saja membebani pengunjung website ketika membuka list konten yang seharusnya menggunakan gambar kecil, tetapi disuguhkan gambar dalam ukuran sebenarnya. Oleh sebab itu penulis mencoba menawarkan sebuah solusi untuk hal di atas. Ilustrasinya seperti berikut:
- Pengelola web mengupload sebuah gambar JPEG (versi large)
- Sistem mengupload gambar tersebut menjadi 3 versi : versi small(untuk preview semua list konten), versi medium(untuk preview keterangan detail), versi large(ukuran sebenarnya)
Jadi, setelah gambar diupload dan dibuat menjadi 3 bagian maka website akan menampilkan gambar dalam ukuran sebenarnya(bukan di-rezise oleh perintah html).
Langkah-langkah implementasi :
1. Pastikan pustaka GD sudah diaktifkan agar PHP dapat mendukung pembuatan grafis secara on the fly.
Caranya:
- buka file configurasi php(php.ini) dengan text editor.
- Cari ;extension=php_gd.dll
- Hilangkan tanda ; sehingga menjadi extension=php_gd.dll
2. Buat folder “img” pada direktori htdocs(untuk web server Apache) atau wwwroot(untuk web server IIS)
3. Buat file php seperti di bawah ini dan simpan dengan nama “upload_image.php” di direktori yg sama dengan folder “img”:
<?php
//Fungsi untuk meng-upload gambar
function UploadImage($img_name){
header("Content-type: image/jpeg");
//direktori gambar
$vdir_upload = "img/";
$vfile_upload = $vdir_upload . $img_name;
//Simpan gambar dalam ukuran sebenarnya
move_uploaded_file($_FILES["img"]["tmp_name"], $vfile_upload);
//identitas file asli
$im_src = imagecreatefromjpeg($vfile_upload);
$src_width = imageSX($im_src);
$src_height = imageSY($im_src);
//Simpan dalam versi small 110 pixel
//set ukuran gambar hasil perubahan
$dst_width = 110;
$dst_height = ($dst_width/$src_width)*$src_height;
//proses perubahan ukuran
$im = imagecreatetruecolor($dst_width,$dst_height);
imagecopyresampled($im, $im_src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width, $src_height);
//Simpan gambar
imagejpeg($im,$vdir_upload . "small_" . $img_name);
//Simpan dalam versi medium 320 pixel
//set ukuran gambar hasil perubahan
$dst_width = 320;
$dst_height = ($dst_width/$src_width)*$src_height;
//proses perubahan ukuran
$im = imagecreatetruecolor($dst_width,$dst_height);
imagecopyresampled($im, $im_src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width, $src_height);
//Simpan gambar
imagejpeg($im,$vdir_upload . "medium_" . $img_name);
imagedestroy($im_src);
imagedestroy($im);
}
//Upload Gambar
UploadImage($_FILES["img"]["name"]);
?>
4. Buat file html seperti di bawah ini dan simpan dengan nama “upload.html” di direktori yg sama dengan folder “img”:
<html>
<body>
<form method="post" action="upload_image.php" enctype="multipart/form-data">
Image (JPG/JPEG) <input name="img" type="file"/></td>
<input name="submit" type="submit" value="Upload" />
</body>
</html>
5. Coba upload sebuah gambar berformat JPEG dengan perintah tersebut.
Lihat pada direktori “img”, jika berhasil maka akan terbentuk 3 buah file upload.
ArRay says:
January 3rd, 2008 at 12:24 pm
Nah..!! Ini nih yang gw cari….
Akhirnya ketemu juga..
slam says:
January 24th, 2008 at 9:21 am
mau resize nih
Siriusjack says:
February 5th, 2008 at 11:14 am
kalo untuk gambar dengan format `.gif` gimana????
VJ says:
March 31st, 2008 at 11:06 am
nggak nyambung…
Endrik says:
May 15th, 2008 at 1:35 pm
Emang Jossss!
Thanks bro
cahyo says:
June 1st, 2008 at 2:52 pm
wach , setelah sekian lama mencari akhirnya dapet juga, trims mudah-mudah aku bisa, tapi kalau ada kesulitan boleh kan tanya-tanya lagi ?, hee…he maklum pemula
Herli says:
June 4th, 2008 at 9:45 pm
wah.. ini dia yang dicari !!
ddx says:
July 8th, 2008 at 10:54 am
wah terimakasih sekali bro .. berfungsi dengan baik .. thx , anda memang hebat
thariq says:
July 13th, 2008 at 12:12 am
mas,setelah saya klik upload,kok malah tiba-tiba ada pop up buat download scriptnya upload_image.php,sih?
kira-kira kenapa ya?
mohon bantuannya..terima kasih!
thariq says:
July 13th, 2008 at 12:19 am
oh…uda bisa!hehehe…
rupanya harus diakses langsung lewat browser,gk bisa di doubleclick…
terima kasih banyak mas,,,semoga semakin sukses,karena membagikan ilmu dengan baik sekali…hehehe
peter says:
August 24th, 2008 at 7:22 pm
wah akhirnya ketemu juga,,,thx,,,tapi dicoba dulu yah…
peter says:
August 24th, 2008 at 8:47 pm
mas,,,thx berat,,,its work…
kalo pas gw mau upload gambar trus gambar yang saya upload disimpan di folder baru bisa gak,,,jadi php membuat folder baru sendiri unutk gallery nya???? thx
rizoa says:
October 4th, 2008 at 4:47 pm
ngopi iah boz…thx
luthfi says:
October 25th, 2008 at 6:36 pm
usefull, great post!
dhi says:
February 2nd, 2009 at 4:15 pm
He….
ahmadu says:
March 18th, 2009 at 10:19 am
matur nuwun bwt souerce-nya…
aageboi says:
March 20th, 2009 at 9:23 am
thx ya.. di coba dulu
irwan says:
April 21st, 2009 at 9:37 am
makasih bro!
Mo tanya, kalo php untuk resize + crop ada gak? Misalnya user upload image ukuran 400 X 300, trus maunya php nyimpen image dengan ukuran 200 X 200. Gimana?
Thx be4
Bayu says:
April 28th, 2009 at 11:44 am
Klo untuk resize + crop itu, konsepnya sama seperti artikel “Thumbnail image JPEG seperti flickr dengan PHP”. Maaf sblmny klo ada bagian yg tidak jelas atau susah dimengerti
Tannie says:
May 31st, 2009 at 7:25 pm
Sebagai alternatif, ada tool lain yg simple usage: http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php
boby says:
June 2nd, 2009 at 11:46 pm
mo nanya kl gt cara replace filenamenya gmn? misal stlh upload saya mo ganti filenamennya menjadi nama lain gt
makasi yah
bayu says:
June 3rd, 2009 at 2:09 pm
Klo mau menentukan nama file gambarnya sendiri, lebih baik waktu uploadnya aja, caranya :
1. di bagian skrip paling bawah ada
//Upload Gambar
UploadImage($_FILES["img"]["name"]);
2. ubah $_FILES["img"]["name"] menjadi nama file yang diinginkan
3. Contoh : UploadImage(“gambarku”)
Itu cuma sebagai contoh saja, sebab tidak mungkin setiap gambar dinamakan “gambarku”. Biasanya, pada e-commerce penamaan gambar sesuai dengan kode barang. Tinggal dikombinasikan aja dengan hasil query sql. Smg berhasil
G3n1k says:
July 28th, 2009 at 9:05 pm
thanks kawan, kalau aku simpulkan code inti nya jadi:
$src_img = imagecreatefromjpeg($src_img);
$destPic = imagecreatetruecolor($w_pic, $h_pic);
@imagecopyresampled($destPic, $src_img, 0, 0, 0, 0, $w_pic, $h_pic, $width, $height);
@imagejpeg($destPic, $dest_img);
imagedestroy($src_img);
imagedestroy($destPic);
thanks great post
Aan Kurniawan says:
October 28th, 2009 at 4:20 pm
Nice sharing Gan