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.
