Pengubah Ukuran Gambar

Cara kerja pengubahan ukuran gambar

Saat Anda membuka sebuah gambar, browser mendekodekannya menjadi piksel mentah menggunakan createImageBitmap(). Alat ini kemudian membuat sebuah canvas HTML pada dimensi target Anda dan menggambar gambar tersebut di atasnya menggunakan ctx.drawImage(), yang menskalakan piksel dengan interpolasi bilinear bawaan browser. Terakhir, canvas.toBlob() mengenkode hasilnya ke JPEG, PNG, atau WebP — dan semuanya tetap berada di tab Anda; tidak ada yang dikirim ke server.

• Dimensi tepat: meregangkan atau memperkecil tepat ke lebar dan tinggi yang Anda masukkan. Dengan kunci aspect ratio aktif, gambar muat di dalam kotak tanpa distorsi.
• Berdasarkan persentase: menskalakan kedua dimensi dengan faktor yang sama (misalnya 50% = separuh lebar dan separuh tinggi = seperempat jumlah piksel).
• Muat di dalam: mengubah ukuran sisi terpanjang ke nilai yang Anda tetapkan, dengan mempertahankan proporsi asli. Sisi lainnya menyesuaikan secara otomatis.

Ukuran foto ujian dan formulir yang umum (India)

Selalu periksa pengumuman resmi sebelum mengunggah — persyaratan berubah antar siklus ujian. Gunakan tombol preset di atas untuk menerapkan dimensi yang diminta dengan sekali klik.

Tips untuk hasil terbaik

• Ubah ukuran sebelum mengompres. Ubah ukuran ke dimensi piksel yang tepat terlebih dahulu, lalu gunakan alat Kompres ke Ukuran Target untuk mencapai batas KB — urutan ini memberikan kualitas tertinggi.
• Gunakan JPEG untuk unggahan ujian. Sebagian besar portal pemerintah dan ujian mensyaratkan JPEG. PNG dan WebP baik untuk penggunaan web tetapi bisa ditolak oleh formulir unggahan.
• Hindari memperbesar foto kecil. Memperbesar gambar beresolusi rendah membuatnya buram. Mulailah dari file asli berkualitas tertinggi yang Anda miliki.
• Kualitas 80–90 untuk foto. Untuk keluaran JPEG, 80–90 adalah titik terbaik — terlihat sama dengan 100 tetapi jauh lebih kecil. Turunkan ke 70 hanya jika Anda perlu mencapai batas KB yang ketat.
• PNG tetap lossless. Slider kualitas hanya berlaku untuk JPEG dan WebP. PNG selalu disimpan ulang tanpa kehilangan kualitas.

Ubah ukuran vs kompres — apa yang Anda butuhkan

Raster vs vektor: mengapa pengubahan ukuran punya batas

Gambar digital hadir dalam dua jenis yang secara mendasar berbeda, dan keduanya berubah ukuran dengan cara yang berlawanan. Gambar raster — sebuah JPG, PNG, WebP, atau foto apa pun dari kamera — adalah kisi tetap berisi piksel berwarna. Gambar vektor — logo atau ikon SVG — adalah sekumpulan bentuk matematis (garis, kurva, dan isian) yang digambar ulang oleh komputer pada ukuran berapa pun yang Anda minta. Karena vektor dihitung ulang dari rumus, ia dapat diskalakan ke dimensi mana pun tanpa kehilangan kualitas; karena raster memiliki jumlah piksel terbatas yang sudah tertanam, memperbesarnya memaksa komputer menciptakan piksel yang tidak pernah terekam.

Alat ini bekerja pada gambar raster, yang memang merupakan wujud dari hampir setiap foto, tangkapan layar, dan unggahan ujian. Satu fakta itu mendorong setiap rekomendasi di halaman ini: Anda selalu bisa membuang piksel dengan rapi saat memperkecil gambar, tetapi Anda tidak pernah bisa benar-benar menambahkan kembali detail saat memperbesarnya. Jika Anda membutuhkan aset yang tetap tajam pada setiap ukuran — misalnya logo untuk cetak sekaligus layar — simpanlah master vektor (SVG) dan ekspor salinan raster darinya, alih-alih memperbesar PNG kecil.

Piksel, resolusi, aspect ratio, dan mitos DPI

Beberapa istilah sering dipakai secara longgar, jadi ada baiknya diperjelas:

• Piksel — unit terkecil dari gambar raster: satu titik berwarna.
• Resolusi / dimensi — jumlah piksel, ditulis lebar × tinggi (misalnya 1920 × 1080). Inilah satu-satunya ukuran yang menentukan seberapa besar gambar tampak di layar.
• Aspect ratio — perbandingan lebar terhadap tinggi, seperti 16:9 atau 1:1 (persegi). Menjaganya tetap konstan itulah yang mencegah foto tampak teregang atau gepeng.

Sumber kebingungan yang paling umum adalah DPI (dots per inch) dan sepupu digitalnya PPI (pixels per inch). Di layar, DPI tidak berarti: gambar 1000 × 1000 piksel tampil dengan ukuran yang persis sama baik filenya ditandai 72 DPI maupun 300 DPI, karena gambar digital yang tersimpan tidak memiliki dimensi fisik bawaan dalam inci atau sentimeter. Nilai DPI/PPI hanya memberi tahu printer berapa banyak piksel yang harus dipadatkan ke setiap inci fisik kertas — nilai itu menentukan ukuran cetak, bukan ukuran layar dan bukan jumlah piksel.

Jadi ketika sebuah formulir ujian meminta “foto 300 DPI”, yang sebenarnya penting untuk unggahan di layar adalah dimensi piksel dan ukuran file dalam kilobyte — nilai-nilai yang dikendalikan langsung oleh pengubah ukuran ini. Tetapkan lebar dan tinggi yang diminta dalam piksel dan Anda sudah memenuhi persyaratan yang sesungguhnya, apa pun label DPI yang kebetulan melekat pada file tersebut.

Cara kerja resampling yang sebenarnya

Ketika Anda mengubah jumlah piksel sebuah gambar, perangkat lunak harus memutuskan warna setiap piksel baru — proses yang disebut resampling atau interpolasi. Algoritme yang dipilih adalah faktor terbesar yang menentukan sebagus apa hasilnya:

• Nearest-neighbour hanya menyalin piksel terdekat yang sudah ada. Cara ini cepat dan menjaga tepi keras tetap tajam sempurna — ideal untuk pixel art — tetapi menghasilkan hasil yang kotak-kotak dan bergerigi pada fotografi.
• Bilinear memadukan empat piksel di sekitarnya untuk gradien yang halus. Ini adalah default yang baik dan murah, serta merupakan metode yang dipakai sebagian besar browser.
• Bicubic mempertimbangkan enam belas piksel tetangga untuk keluaran yang jauh lebih halus dan berkualitas lebih tinggi dengan biaya komputasi lebih besar; ini adalah andalan editor foto desktop.
• Lanczos menggunakan fungsi sinc berjendela pada lingkup tetangga yang lebih luas lagi dan umumnya menghasilkan pengecilan foto dunia nyata yang paling tajam, dengan biaya terbesar.

Dua prinsip muncul dari sini. Pertama, memperkecil (downscaling) adalah arah yang mudah: informasinya lebih banyak daripada yang dibutuhkan, sehingga hasilnya tetap bersih — meskipun untuk kualitas terbaik gambar sebaiknya difilter secara lembut sebelum sampling guna menghindari aliasing (artefak bergerigi atau menyerupai moiré), yang dilakukan otomatis oleh downscaler yang baik. Kedua, memperbesar (upscaling) tidak pernah dapat memulihkan detail yang memang tidak terekam sejak awal; interpolasi hanya bisa menghasilkan versi yang lebih besar dan lebih lembut dari apa yang sudah ada. “AI upscaler” modern tampak menambahkan detail, tetapi sebenarnya mereka menciptakan piksel yang masuk akal, bukan memulihkan piksel yang asli.

Alat ini mengubah ukuran dengan mesin Canvas bawaan browser. Menggambar gambar ke canvas pada ukuran baru menerapkan penghalusan gambar milik browser — biasanya filter kelas bilinear — yang cepat, privat, dan lebih dari cukup baik untuk foto, foto profil, dan unggahan formulir.

Memilih format untuk gambar yang telah diubah ukurannya

Pengubahan ukuran dan format file adalah keputusan yang terpisah, dan keduanya memengaruhi ukuran akhir. Lebih sedikit piksel selalu berarti file lebih kecil, tetapi enkodingnya juga penting. Berikut perbandingan format web yang umum:

WebP, yang dikembangkan Google dan diumumkan pada 2010, biasanya menghasilkan file sekitar seperempat hingga sepertiga lebih kecil daripada PNG yang sebanding, dan mendukung transparansi sekaligus animasi. AVIF biasanya mengompres lebih kuat lagi dan menambahkan warna 10-bit. Keduanya didukung oleh semua browser utama saat ini, sehingga menjadi pilihan yang sangat baik untuk gambar yang Anda publikasikan di web. Namun untuk formulir unggahan, tetaplah pada JPEG kecuali petunjuknya menyatakan lain: banyak portal hanya menerima JPG/JPEG dan akan menolak WebP atau PNG secara langsung.

Satu kehalusan yang ditangani alat ini untuk Anda: JPEG tidak memiliki transparansi, jadi ketika Anda mengonversi PNG transparan ke JPEG, area tembus pandang diisi dengan warna putih alih-alih berubah menjadi hitam. Jika Anda perlu mempertahankan transparansi, pilih PNG atau WebP sebagai format keluaran.

Mengubah ukuran gambar untuk performa web dan Core Web Vitals

Gambar berukuran berlebih adalah penyebab paling umum halaman web yang lambat. Jika sebuah tata letak menampilkan foto selebar 400 piksel tetapi filenya selebar 4000 piksel, browser mengunduh data berkali-kali lipat lebih banyak daripada yang bisa ditampilkan, lalu tetap memperkecilnya — memboroskan bandwidth dan menunda halaman. Menyajikan gambar pada dimensi tempat ia benar-benar ditampilkan adalah salah satu perbaikan performa paling berdampak yang tersedia.

Hal ini berkaitan langsung dengan Core Web Vitals, kumpulan metrik pengalaman pengguna milik Google. Metrik utamanya, Largest Contentful Paint (LCP), sering mengukur berapa lama gambar utama dimuat dan dirender, sehingga file yang lebih kecil dan berukuran tepat meningkatkan skornya. Tiga teknik pelengkap dapat membantu:

• Sajikan gambar berukuran sesuai — ubah ukuran setiap gambar ke ukuran terbesar tempat ia benar-benar ditampilkan, bukan ukuran saat keluar dari kamera.
• Gunakan format modern — WebP dan AVIF memangkas ukuran file secara substansial dibandingkan JPEG dan PNG, mempersingkat waktu muat tanpa kehilangan kualitas yang terlihat.
• Tawarkan beberapa ukuran dengan srcset — atribut gambar responsif srcset dan sizes memungkinkan browser memilih resolusi terbaik untuk setiap perangkat, sehingga ponsel tidak pernah mengunduh gambar berukuran desktop.

Alur kerja praktis: ubah ukuran satu gambar master ke beberapa lebar (misalnya 400, 800, dan 1200 piksel), ekspor masing-masing sebagai WebP, dan cantumkan semuanya dalam sebuah srcset. Anda mendapatkan halaman cepat di setiap perangkat tanpa pernah mengirim lebih banyak piksel daripada yang bisa dipakai layar.

Ukuran foto media sosial dan profil

Setiap platform memotong dan menampilkan gambar sesuai templatenya sendiri, jadi mengubah ukuran ke bentuk yang tepat sebelum mengunggah menjaga wajah tetap terpusat dan teks tetap terbaca, alih-alih membiarkan pemotongan otomatis memangkasnya. Spesifikasi piksel yang tepat sering berubah, tetapi beberapa target yang digunakan luas cukup stabil untuk dijadikan acuan perencanaan:

• Gambar berbagi tautan / Open Graph: 1200 × 630 px (persegi panjang lanskap 1.91:1) adalah rekomendasi lama untuk kartu pratinjau yang muncul ketika sebuah halaman dibagikan di Facebook, LinkedIn, atau X.
• Postingan persegi dan foto profil: persegi 1:1 (misalnya 1080 × 1080 px, atau lebih kecil untuk avatar) cocok untuk sebagian besar foto profil dan postingan feed. Profil biasanya ditampilkan di dalam lingkaran, jadi jauhkan subjek dari sudut.
• Format vertikal / story: potret 9:16 (seperti 1080 × 1920 px) memenuhi layar ponsel untuk story dan sampul video pendek.

Karena pengubahan ukuran mempertahankan seluruh gambar dan hanya mengubah proporsinya jika Anda membuka kunci aspect ratio, pendekatan teraman untuk bentuk-bentuk tetap ini adalah memotong ke rasio target terlebih dahulu, lalu mengubah ukuran gambar yang telah dipotong ke dimensi piksel yang tepat. Selalu periksa halaman bantuan terkini setiap platform sebelum sebuah kampanye, karena ukuran yang ditampilkan diperbarui dari waktu ke waktu.

Menghitung ukuran cetak dari piksel

Meskipun DPI tidak relevan di layar, ia menjadi penting begitu Anda mencetak — dan hubungannya adalah aritmetika sederhana. Ukuran cetak sebuah gambar adalah dimensi pikselnya dibagi resolusi cetak: piksel ÷ DPI = inci. Gambar selebar 1200 piksel yang dicetak pada 300 DPI menjadi selebar 4 inci (1200 ÷ 300); file yang sama dicetak pada 150 DPI melebar menjadi 8 inci tetapi tampak lebih lembut, karena kini setiap inci berisi lebih sedikit piksel.

Ini memberi Anda cara praktis untuk merencanakan pengubahan ukuran untuk cetak. Jika Anda perlu mencetak foto selebar 6 inci pada 300 DPI yang tajam, ubah ukurannya menjadi selebar 1800 piksel (6 × 300). Untuk pencetakan foto berkualitas tinggi, 300 DPI adalah target yang lazim; poster besar yang dilihat dari kejauhan bisa turun ke 150 DPI atau lebih rendah tanpa tampak buruk. Hitung dulu piksel yang Anda butuhkan, lalu ubah ukuran gambar ke lebar dan tinggi tersebut — dan ingat bahwa Anda hanya bisa memperkecil ke cetakan yang lebih kecil dengan rapi, tidak pernah menciptakan piksel tambahan yang dituntut oleh cetakan lebih besar pada resolusi penuh.

Alat terkait

• Potong Gambar (rasio, lingkaran)
• Kompresor Gambar (berdasarkan kualitas)
• Kompres ke Ukuran Target (KB)
• Konverter HEIC ke JPG
• Gambar ke PDF