Cara Resize dan Membuat Thumbnail Gambar dengan PHP dan AJAX (GD Library)

Mengelola gambar dalam website adalah hal penting, terutama untuk optimasi performa dan tampilan. Salah satu teknik yang sering digunakan adalah membuat versi resize dan thumbnail dari gambar yang diupload.

Pada tutorial ini, kamu akan belajar cara memproses gambar menggunakan PHP, AJAX, dan GD Library, termasuk resize, crop, dan pembuatan thumbnail otomatis.

Apa Itu GD Library

GD Library adalah library bawaan PHP yang digunakan untuk memproses gambar seperti:

• Resize gambar
• Crop gambar
• Membuat thumbnail
• Mengubah format gambar

Library ini wajib aktif jika kamu ingin memanipulasi gambar menggunakan PHP.

Alur Proses Upload dan Resize

Berikut alur kerja dari sistem ini:

• User mengupload gambar melalui AJAX
• Server menerima file
• Gambar diproses (resize dan crop)
• Thumbnail dibuat otomatis
• Data disimpan ke database
• Data dikembalikan dalam format JSON

Contoh Kode PHP Resize dan Thumbnail

Berikut implementasi lengkapnya:

if (isset($_POST['action']) && $_POST['action'] == 'edit') {
  $nama_file_lama = $_POST['nama_file_lama'];

  if ($_FILES['gambar']['error'] === UPLOAD_ERR_OK) {

    $nama_file = basename($_FILES['gambar']['name']);
    $ekstensi_file = strtolower(pathinfo($nama_file, PATHINFO_EXTENSION));

    if (in_array($ekstensi_file, array('jpg', 'jpeg', 'png', 'gif'))) {

      $nama_file = uniqid() . '.' . $ekstensi_file;

      $lokasi_file = 'uploads/' . $nama_file;
      $lokasi_file_thumbnail = 'uploads/thumbnail_' . $nama_file;

      move_uploaded_file($_FILES['gambar']['tmp_name'], $lokasi_file);

      switch ($ekstensi_file) {
        case 'jpg':
        case 'jpeg':
          $gambar = imagecreatefromjpeg($lokasi_file);
          break;
        case 'png':
          $gambar = imagecreatefrompng($lokasi_file);
          break;
        case 'gif':
          $gambar = imagecreatefromgif($lokasi_file);
          break;
      }

      $lebar_gambar = imagesx($gambar);
      $tinggi_gambar = imagesy($gambar);

      $ukuran_canvas = 500;
      $ukuran_thumbnail = 150;

      $canvas = imagecreatetruecolor($ukuran_canvas, $ukuran_canvas);
      $canvas_thumbnail = imagecreatetruecolor($ukuran_thumbnail, $ukuran_thumbnail);

      $skala = min($ukuran_canvas / $lebar_gambar, $ukuran_canvas / $tinggi_gambar);
      $posisi_crop_x = ($lebar_gambar - $ukuran_canvas / $skala) / 2;
      $posisi_crop_y = ($tinggi_gambar - $ukuran_canvas / $skala) / 2;

      imagecopyresampled($canvas, $gambar, 0, 0, $posisi_crop_x, $posisi_crop_y, $ukuran_canvas, $ukuran_canvas, $lebar_gambar - 2 * $posisi_crop_x, $tinggi_gambar - 2 * $posisi_crop_y);

      imagecopyresampled($canvas_thumbnail, $gambar, 0, 0, $posisi_crop_x, $posisi_crop_y, $ukuran_thumbnail, $ukuran_thumbnail, $lebar_gambar - 2 * $posisi_crop_x, $tinggi_gambar - 2 * $posisi_crop_y);

      switch ($ekstensi_file) {
        case 'jpg':
        case 'jpeg':
          imagejpeg($canvas, $lokasi_file);
          imagejpeg($canvas_thumbnail, $lokasi_file_thumbnail);
          break;
        case 'png':
          imagepng($canvas, $lokasi_file);
          imagepng($canvas_thumbnail, $lokasi_file_thumbnail);
          break;
        case 'gif':
          imagegif($canvas, $lokasi_file);
          imagegif($canvas_thumbnail, $lokasi_file_thumbnail);
          break;
      }

      unlink($_POST['nama_file_lama']);
      unlink($_POST['nama_file_lama_thumbnail']);

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

  $sql = "UPDATE gambar SET nama = '" . $_POST['nama'] . "', deskripsi = '" . $_POST['deskripsi'] . "', nama_file = '" . $nama_file . "', nama_file_thumbnail = '" . $lokasi_file_thumbnail . "' WHERE id = " . $_POST['id'];
  $conn->query($sql);

  $sql = "SELECT * FROM gambar WHERE id = " . $_POST['id'];
  $result = $conn->query($sql);
  $row = $result->fetch_assoc();

  echo json_encode($row);
}

Penjelasan Proses Resize

Beberapa poin penting dalam kode:

• imagecreatefromjpeg/png/gif digunakan untuk membaca gambar
• imagecreatetruecolor membuat canvas baru
• imagecopyresampled digunakan untuk resize dan crop
• ukuran canvas menentukan hasil akhir gambar
• thumbnail dibuat dengan ukuran lebih kecil

Fungsi Crop Otomatis

Kode di atas tidak hanya resize, tapi juga melakukan crop otomatis agar gambar tetap proporsional (square).

Ini penting untuk:

• Thumbnail berita
• Foto profil
• Gallery

Penyimpanan ke Database

Setelah gambar diproses, data disimpan ke database:

• nama
• deskripsi
• nama file utama
• nama file thumbnail

Kemudian data dikembalikan dalam format JSON untuk digunakan oleh AJAX.

Catatan Penting

Agar fitur ini berjalan dengan baik, pastikan:

• GD Library sudah aktif di server
• Folder uploads memiliki permission write
• Validasi file dilakukan (ukuran & tipe)
• Gunakan prepared statement untuk keamanan

Kesimpulan

Menggunakan PHP dan GD Library, kamu bisa membuat sistem upload gambar yang lebih profesional dengan fitur resize dan thumbnail otomatis.

Teknik ini sangat penting untuk:

• Website berita
• Blog
• Marketplace
• Sistem manajemen konten

Dengan optimasi gambar yang baik, website kamu akan lebih cepat, ringan, dan SEO friendly.

Kalau kamu mau, kita bisa lanjut ke versi advanced seperti upload dengan preview, drag & drop, atau kompresi gambar otomatis biar performa makin maksimal.