Ubah ukuran gambar _

Cara kerja pengubahan ukuran gambar berbasis browser

Setiap pengubahan ukuran adalah pipeline singkat yang berjalan sepenuhnya dalam JavaScript. Tidak ada pustaka codec yang diunduh dan tidak ada server yang terlibat. Canvas API browser sendiri mendekode file, menggambar ulang pada ukuran target, dan mengenkode ulang dalam memori, kemudian menyerahkan Blob yang dapat dipratonton atau di-zip oleh halaman. Karena setiap langkah berada di dalam sandbox tab, file asli tidak pernah mencapai jaringan.

1. Membaca setiap file yang diunggah sebagai Blob dan membuat URL objek sehingga browser dapat mendekodenya secara lokal, tanpa menyalin byte ke server atau menulisnya ke disk.
2. Menghitung dimensi target dari mode yang dipilih — batas sisi terpanjang, lebar dan tinggi tepat, atau skala persentase. Kunci rasio aspek menjaga proporsi tetap benar saat mengedit satu kolom.
3. Membuat Canvas offscreen pada ukuran target dan memanggil ctx.drawImage(source, 0, 0, width, height) untuk menggambar ulang piksel yang didekode. Browser menangani interpolasi yang menghaluskan hasil yang diskalakan.
4. Memanggil canvas.toBlob untuk mengenkode ulang dalam format sumber. PNG tetap lossless, JPEG dan WebP dienkode ulang pada kualitas tinggi. Kemudian halaman menampilkan kartu sebelum/sesudah dan menawarkan unduhan per gambar atau satu ZIP yang dibuat dalam memori dengan fflate.

Mengapa mengubah ukuran gambar?

• Gambar terlalu besar adalah penyebab paling umum halaman yang lambat. Foto telepon 4000×3000 yang langsung dimasukkan ke tata letak lebar 600 piksel mengirimkan sekitar 40 kali lebih banyak piksel daripada yang dapat ditampilkan layar. Membatasi sisi terpanjang ke 1600 px sebelum mengunggah memotong bobot halaman secara signifikan dan meningkatkan LCP Core Web Vitals.
• Formulir unggah menerapkan dimensi yang ketat. Slot avatar, portal foto ID, daftar marketplace, dan kartu OG semuanya menginginkan ukuran piksel tertentu: 1200×630 untuk pratinjau Open Graph, 512×512 untuk ikon aplikasi, 150×150 untuk thumbnail. Masukkan angka yang tepat dan lewati loop unggahan yang ditolak.
• Alat email dan obrolan secara diam-diam mengompres ulang semua yang besar, yang dapat merusak tangkapan layar yang bersih. Mengubah ukuran sendiri ke lebar yang wajar membuat hasilnya dapat diprediksi daripada menyerahkannya ke pipeline lossy orang lain.
• Konsistensi batch penting untuk galeri dan katalog. Menjalankan folder foto berbagai ukuran melalui satu target 800×800 berarti setiap kartu sejajar di grid, tanpa gambar raksasa yang merusak tata letak.

Aplikasi umum

Pengubahan ukuran muncul kapan pun dimensi sumber dan ekspektasi tujuan tidak cocok. Tiga pola muncul berulang kali.

• Mempersiapkan foto produk untuk toko Shopify atau WooCommerce. Folder foto kamera 4000 piksel dibatasi ke sisi terpanjang 1600 px agar toko memuat dengan cepat, sementara rasio aspek tetap tidak diubah sehingga tidak ada yang terlihat meregang.
• Menghasilkan aset sosial dan aplikasi dari satu file induk. Atur tepat 1200×630 untuk kartu Open Graph, kemudian 512×512 untuk ikon aplikasi, mengekspor masing-masing dalam beberapa klik tanpa membuka editor berat.
• Mengecilkan batch tangkapan layar QA atau dukungan sebelum dilampirkan ke tiket. Menskalakan folder 50 tangkapan layar ke 50% biasanya memotong ukuran arsip sekitar tiga perempat sebelum masuk ke pelacak bug.

Contoh nyata: foto 4000 px menjadi gambar web 1600 px

Foto 4000×3000 langsung dari telepon adalah muatan umum yang jauh lebih besar dari yang dibutuhkan tata letak web mana pun. Ini adalah tolok ukur yang wajar untuk apa yang dihemat oleh pengubahan ukuran.

Seret foto ke zona unggahan, biarkan mode pada Batasi sisi terpanjang, dan atur nilainya ke 1600. Pipeline Canvas menggambar ulang gambar pada 1600×1200 dengan rasio aspek terjaga, kemudian mengenkode ulang dalam format asli. Kartu output menampilkan dimensi baru dan ukuran file, yang untuk JPEG tipikal turun dari beberapa megabyte menjadi beberapa ratus kilobyte. Klik Unduh pada kartu untuk mengambil file tunggal, atau klik Unduh .zip jika Anda mengubah ukuran beberapa gambar dalam satu kali proses. Seluruh siklus, dari seret hingga unduh, berjalan dalam sepersekian detik dan menggunakan nol bandwidth setelah halaman itu sendiri selesai dimuat.

Mode ubah ukuran apa saja yang tersedia?

Tiga. Batasi sisi terpanjang membatasi lebar atau tinggi yang lebih panjang ke nilai piksel dan menskalakan sisi lain untuk cocok — ini adalah default yang aman karena tidak pernah mendistorsi. Lebar × tinggi tepat memungkinkan Anda mengetikkan kedua angka, dengan kunci rasio aspek yang menghitung ulang kolom kedua dari rasio sumber saat Anda mengedit yang pertama — matikan kunci saat formulir meminta ukuran non-proporsional yang tepat. Skala berdasarkan persentase mengalikan kedua dimensi dengan satu faktor, berguna untuk menghalvakan atau menggandakan seluruh batch sekaligus. Enam preset sekali klik (dari 1920×1080 hingga thumbnail 150×150) mencakup target yang paling umum.

Apakah ini terjadi di perangkat saya?

Ya. Halaman menggunakan Canvas API native browser dan Web File API untuk mendekode, menggambar ulang, dan mengenkode ulang setiap gambar dalam memori. Tidak ada data gambar yang dikirim ke server, tidak ada unggahan sementara, tidak ada perjalanan cloud. Anda dapat memverifikasinya sendiri: buka DevTools, beralih ke panel Jaringan, dan jalankan pengubahan ukuran. Satu-satunya permintaan keluar yang akan Anda lihat adalah pemuatan halaman awal dan panggilan iklan. Tidak ada yang berbentuk gambar yang meninggalkan tab, yang membuatnya aman untuk dokumen ID yang dipindai, gambar medis, dan materi lain yang tidak ingin Anda unggah.

Apakah pengubahan ukuran akan mengurangi kualitas?

Mengecilkan gambar (downscaling) terlihat sangat baik — browser merata-ratakan piksel sumber menjadi lebih sedikit piksel, sehingga detail tetap tajam dan file menjadi jauh lebih kecil. Memperbesar di atas resolusi sumber (upscaling) tidak dapat menciptakan detail yang tidak pernah ditangkap, sehingga gambar kecil yang diperbesar akan terlihat buram — ini adalah batasan setiap pengubah ukuran, bukan alat ini secara khusus. Output mempertahankan format sumber: PNG tetap lossless, JPEG dan WebP dienkode ulang pada pengaturan kualitas tinggi sehingga perbedaan visual dari aslinya sulit diperhatikan.

Format file apa yang didukung?

Pada sisi input, format apa pun yang dapat didekode browser diterima: PNG, JPEG, WebP, GIF, dan BMP mencakup hampir setiap file yang dihasilkan oleh telepon, kamera, atau alat tangkapan layar. Output mempertahankan format sumber di mana enkoder Canvas mendukungnya — PNG, JPEG, dan WebP berfungsi langsung. GIF dan BMP, yang dapat didekode Canvas API tetapi tidak dapat dienkode ulang, disimpan sebagai PNG lossless. Nama file yang diubah ukurannya menyertakan dimensi baru (misalnya photo-1600x1200.jpg) sehingga batch mudah disortir.

Seret gambar Anda, pilih ukuran, ubah. Semuanya berjalan di tab Anda. Tanpa unggahan, tanpa akun, tanpa menunggu antrean server.