Cara Upload, Resize, dan Membuat Thumbnail Gambar dengan PHP dan AJAX

Mengelola gambar dengan baik sangat penting dalam pengembangan website, terutama untuk menjaga performa dan tampilan tetap optimal.

Pada tutorial ini, kamu akan belajar cara upload gambar, melakukan resize, serta membuat thumbnail menggunakan PHP dan AJAX.

Teknik ini sangat sering digunakan pada website seperti portal berita, blog, dan marketplace.

Alur Proses Upload Gambar

Sebelum masuk ke kode, berikut alur kerja sistem:

User upload gambar melalui form atau AJAX
File dikirim ke server
PHP memproses gambar
Gambar di-resize sesuai ukuran
Thumbnail dibuat otomatis
File disimpan ke server

Validasi dan Upload Gambar

Langkah pertama adalah menerima file upload dan melakukan validasi dasar:

if (isset($_FILES['gambar'])) {
  $gambar = $_FILES['gambar'];

  if ($gambar['error'] == 0) {

    $format = pathinfo($gambar['name'], PATHINFO_EXTENSION);

    if (in_array($format, ['jpg', 'jpeg', 'png'])) {

      $nama_file = time() . '.' . $format;

      move_uploaded_file($gambar['tmp_name'], 'uploads/' . $nama_file);

Penjelasan:

Membaca dan Memproses Gambar

Setelah file diupload, kita baca gambar menggunakan GD Library:

switch ($format) {
  case 'jpg':
  case 'jpeg':
    $gambar = imagecreatefromjpeg('uploads/' . $nama_file);
    break;
  case 'png':
    $gambar = imagecreatefrompng('uploads/' . $nama_file);
    break;
}

Menentukan Ukuran Resize dan Thumbnail

$lebar = 500;
$tinggi = 500;

$lebar_thumbnail = 100;
$tinggi_thumbnail = 100;

$canvas = imagecreatetruecolor($lebar, $tinggi);
$canvas_thumbnail = imagecreatetruecolor($lebar_thumbnail, $tinggi_thumbnail);

Proses Resize dan Thumbnail

imagecopyresampled(
  $canvas,
  $gambar,
  0,
  0,
  0,
  0,
  $lebar,
  $tinggi,
  imagesx($gambar),
  imagesy($gambar)
);

imagecopyresampled(
  $canvas_thumbnail,
  $gambar,
  0,
  0,
  0,
  0,
  $lebar_thumbnail,
  $tinggi_thumbnail,
  imagesx($gambar),
  imagesy($gambar)
);

Penjelasan:

imagecopyresampled digunakan untuk mengubah ukuran gambar
canvas digunakan untuk hasil resize
canvas_thumbnail untuk thumbnail

Menyimpan Gambar dan Thumbnail

switch ($format) {
  case 'jpg':
  case 'jpeg':
    imagejpeg($canvas, 'uploads/resized_' . $nama_file);
    imagejpeg($canvas_thumbnail, 'uploads/thumbnail_' . $nama_file);
    break;
  case 'png':
    imagepng($canvas, 'uploads/resized_' . $nama_file);
    imagepng($canvas_thumbnail, 'uploads/thumbnail_' . $nama_file);
    break;
}

Membersihkan Resource

imagedestroy($gambar);
imagedestroy($canvas);
imagedestroy($canvas_thumbnail);

Catatan Penting

Agar sistem ini aman dan optimal, perhatikan hal berikut:

Kesimpulan

Dengan menggunakan PHP dan GD Library, kamu bisa membuat sistem upload gambar yang lengkap dengan fitur resize dan thumbnail.

Teknik ini sangat penting untuk meningkatkan performa website karena ukuran gambar menjadi lebih ringan dan terstruktur.

Fitur ini sangat cocok digunakan untuk:

Website berita
Blog
Gallery
Marketplace

Jika kamu ingin mengembangkan lebih lanjut, kamu bisa menambahkan fitur seperti preview gambar, drag and drop upload, atau kompresi otomatis agar performa website semakin maksimal.