Resize image JPEG dengan PHP

Wednesday, November 28, 2007 8:15
Posted in category PHP
42 Comments

Artikel 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.

You can skip to the end and leave a response. Pinging is currently not allowed.
Tags:

42 Responses to “Resize image JPEG dengan PHP”

  1. ArRay says:

    January 3rd, 2008 at 12:24 pm

    Nah..!! Ini nih yang gw cari….
    Akhirnya ketemu juga..

  2. slam says:

    January 24th, 2008 at 9:21 am

    mau resize nih

  3. Siriusjack says:

    February 5th, 2008 at 11:14 am

    kalo untuk gambar dengan format `.gif` gimana????

  4. VJ says:

    March 31st, 2008 at 11:06 am

    nggak nyambung…

  5. Endrik says:

    May 15th, 2008 at 1:35 pm

    Emang Jossss!
    Thanks bro

  6. 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

  7. Herli says:

    June 4th, 2008 at 9:45 pm

    wah.. ini dia yang dicari !! :D

  8. ddx says:

    July 8th, 2008 at 10:54 am

    wah terimakasih sekali bro .. berfungsi dengan baik .. thx , anda memang hebat

  9. 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!

  10. 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

  11. peter says:

    August 24th, 2008 at 7:22 pm

    wah akhirnya ketemu juga,,,thx,,,tapi dicoba dulu yah…

  12. 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

  13. rizoa says:

    October 4th, 2008 at 4:47 pm

    ngopi iah boz…thx

  14. luthfi says:

    October 25th, 2008 at 6:36 pm

    usefull, great post!

  15. dhi says:

    February 2nd, 2009 at 4:15 pm

    He….

  16. ahmadu says:

    March 18th, 2009 at 10:19 am

    matur nuwun bwt souerce-nya…

  17. aageboi says:

    March 20th, 2009 at 9:23 am

    thx ya.. di coba dulu

  18. 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

  19. 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

  20. 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

  21. 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 :D

  22. 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 :)

  23. 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

  24. Aan Kurniawan says:

    October 28th, 2009 at 4:20 pm

    Nice sharing Gan :)

  25. faisal says:

    December 31st, 2010 at 7:58 pm

    mas kalau gambar tersebut di pisah dalam folder yang berbeda gmn?????

  26. bayu says:

    January 3rd, 2011 at 9:34 am

    jika gambar dipisah dalam folder yg berbeda:

    temukan skrip di bawah ini :

    //Simpan gambar dalam ukuran sebenarnya
    move_uploaded_file($_FILES["img"]["tmp_name"], $vfile_upload);

    kemudian rubah menjadi :

    //Simpan gambar dalam ukuran sebenarnya
    $vdir_upload = "img/folder_ukuran_asli/";
    move_uploaded_file($_FILES["img"]["tmp_name"], $vfile_upload);

    dan temukan skrip di bawah ini :

    //Simpan gambar
    imagejpeg($im,$vdir_upload . "small_" . $img_name);

    kemudian rubah menjadi :

    //Simpan gambar
    $vdir_upload = "img/folder_small/";
    imagejpeg($im,$vdir_upload . "small_" . $img_name);

    juga temukan skrip di bawah ini :

    //Simpan gambar
    imagejpeg($im,$vdir_upload . "medium_" . $img_name);

    kemudian rubah menjadi :

    //Simpan gambar
    $vdir_upload = "img/folder_medium/";
    imagejpeg($im,$vdir_upload . "medium_" . $img_name);

    smg berhasil ;)

  27. faisal says:

    January 6th, 2011 at 11:41 pm

    mas file fotonya kenapa tidak bisa nyimpan di folder_ukuran _asli???? apa pangaruh script
    //direktori gambar
    $vdir_upload = “img/”;
    $vfile_upload = $vdir_upload . $img_name;

    trus saya nyimpan dengan size foto 2MB dimension 2378 x 3648 di folder small dan medium tidak bisa menyimpan kenapa ya???

  28. bayu says:

    January 7th, 2011 at 10:41 am

    terima kasih atas pertanyaannya mas faisal :)

    tidak bisa menyimpan di folder_ukuran _asli, tidak ada pengaruhnya dengan skrip di bawah ini :

    //direktori gambar
    $vdir_upload = “img/”;
    $vfile_upload = $vdir_upload . $img_name;

    dan skrip tersebut boleh dihilangkan, karena sudah digantikan oleh skrip yg baru di komen saya sebelumnya.

    mengenai foto 2MB dengan dimensi 2378 x 3648 itu,

    coba buka file php.ini, dan temukan perintah “memory_limit”

    coba set dengan nilai 64M yang semula di bawah itu, kemudian restart apache

    kalau tidak mau juga, coba tambahkan lagi nilainya menjadi 128M :P

  29. faisal says:

    January 11th, 2011 at 11:50 pm

    trus kenapa tidak bisa menyimpan di folder asli??? kalau mau nyimpan dengan database gmn caranya ya. . .

  30. bayu says:

    January 13th, 2011 at 12:55 pm

    mungkin foldernya belum ada mas faisal. saya jg bingung, kok di tmptnya mas faisal gak bisa ya? he.. trus klo nyimpan ke database, yang disimpan link gambarnya aja. smg berhasil ya.. :)

  31. faisal says:

    January 14th, 2011 at 12:43 am

    kurang efisien dong???? sciprnya nyimpan data dengan database dan function

  32. bayu says:

    January 14th, 2011 at 9:46 am

    klo data gambar disimpan di database, hasilnya akan berupa BLOB. dan jarang sekali web yang pakai metode spt ini mas faisal, karena load gambar akan berat.

  33. agung tri lestari says:

    April 17th, 2011 at 1:20 am

    mantap tenan

  34. Junaedy says:

    May 23rd, 2011 at 3:10 pm

    tolong bantuannya :
    gambarnya kok ga bisa ke simpan pada fodernya?
    makasih…

  35. bayu says:

    May 23rd, 2011 at 8:49 pm

    bgmn errornya pak junaedy? jgn2 php_gd seperti yang dijelaskan di cara 1 belum aktif

  36. Udin says:

    January 4th, 2012 at 10:35 pm

    Mas Bayu…  bagaimana kalo dari script yg ada diatas tersebut dibuat untuk Multiple image. Maksudnya, saya upload 6 foto sekaligus dlm 1 form. Bagaimana caranya? Apa yang perlu saya ubah? karena saya coba lakukan spt ini:
    UploadImage($_FILES["img"]["name"]);
    UploadImage($_FILES["img2"]["name"]);
    UploadImage($_FILES["img3"]["name"]);
    tetap tidak bisa…

  37. Udin says:

    January 4th, 2012 at 10:38 pm

    Tambahan: bagaimana caranya file yg ukuran asli gak perlu diupload, jadi saya hny perlu thumbnailnya dan beberapa foto dgn ukuran yg berbeda (saya buat 3 ukuran yg berbeda2).

  38. bayu says:

    January 6th, 2012 at 10:09 am

    Hi, Mas Udin..
    Maaf sebelumnya, kalau artikel di atas itu cuma untuk upload satu file gambar saja. Coba lihat saja di dalam fungsi UploadImage masih menggunakan $_FILES["img"], yang artinya memanggil input img ( <input name="img" type="file"/> ). Kalau mau rubah sendiri, modifikasi fungsi UploadImage tsb, jadikan $_FILES["img"] ke dalam bentuk variable. Atau kalau mau lebih sabar, ntar malam saya buatkan artikelnya deh :)
    Trus kalau untuk cuma upload thumbnailnya saja, bisa menggunakan fungsi :
    move_uploaded_file($_FILES["img"]["tmp_name"], $vfile_upload);
    cukup satu baris itu saja

  39. Melliza says:

    January 15th, 2012 at 9:27 pm

    Tolong bantuannya, saya mendapat pesan error “The image “http://localhost/tes.php” cannot be displayed because it contains errors.” ketika mencoba script diatas. Error ini karena apa ya?

    Terimakasih sebelumnya.

  40. bayu says:

    January 15th, 2012 at 9:38 pm

    Mungkin ada skripnya yg salah. Kalau bisa, dibuat bertahap skripnya, dari yang simple, trus kalau sudah oke, meningkat ke yang lebih kompleks. 
    Atau kalau masih bingung bisa dijabarkan skripnya biar bisa saya bantu analisa

  41. jul says:

    February 1st, 2012 at 6:56 pm

    mas bayu,
    bagaimana caranya apabial selian jpg? misalnya gif, maunpun png

    terima kasih

  42. bayu says:

    February 7th, 2012 at 9:31 am

    tinggal diganti perintah imagecreatefromjpeg menjadi imagecreatefrompng atau imagecreatefromgif mas jul :)

Leave a Reply

Comment spam protected by SpamBam

«
»