Imagyc›Artikel

Resolusi gambar untuk desktop dan ponsel tanpa memperlambat situs

Diterbitkan 12 Oktober 2026 · 6 menit baca

Resolusi yang tepat bergantung pada ruang gambar di halaman dan ketajaman yang diperlukan. Thumbnail, foto yang dapat diperbesar, dan banner lebar tidak memerlukan file yang sama.

Selalu mengirim versi terbesar membuang data. Mengecilkan semua foto secara berlebihan dapat menghilangkan detail produk dan membuat tulisan sulit dibaca. Pendekatan praktisnya adalah menyiapkan ukuran sesuai tata letak dan membiarkan browser memilih sumber yang sesuai.

Untuk situs biasa, siapkan beberapa versi yang jelas, periksa hasil pada ponsel, dan gunakan gambar besar ketika detail tambahan benar-benar bermanfaat.

Dimensi, ukuran file, dan resolusi adalah ukuran berbeda

“Resolusi tinggi” bisa berarti beberapa hal. Untuk web, mulailah dari dimensi piksel, misalnya 800 × 600.

Ukuran file dalam KB atau MB juga dipengaruhi format, kompresi, dan isi gambar. Dua file dengan dimensi sama dapat memiliki ukuran sangat berbeda. Foto penuh detail biasanya lebih sulit dikompresi daripada ilustrasi sederhana.

PPI berarti piksel per inci dan menghubungkan piksel dengan ukuran fisik, terutama untuk cetak. Mengubah angka PPI tanpa resampling tidak menambah piksel. Mengganti “72” menjadi “300” saja tidak membuat foto lebih tajam di situs.¹

Piksel file juga berbeda dari piksel CSS yang digunakan untuk tata letak. Perbedaan ini menjelaskan mengapa ponsel dapat memanfaatkan sumber dengan lebih banyak piksel daripada lebar yang ditunjukkan layout.

Ukur area gambar lebih dahulu

Gambar dalam kolom selebar 600 piksel CSS tidak harus mengikuti seluruh lebar monitor 1.920 piksel. Lebar kolom itulah titik awal.

Pada ponsel, kurangi margin. Viewport selebar 390 piksel CSS dengan margin 16 piksel pada setiap sisi menyediakan lebar gambar 358 piksel CSS.

Viewport adalah area halaman yang tersedia di browser. Ukurannya dapat berubah sesuai jendela, orientasi perangkat, dan desain. Karena itu, label “desktop” atau “mobile” belum cukup untuk menentukan dimensi file.

Ukur komponen utama: avatar, kartu produk, gambar artikel, foto utama, dan banner. Gunakan ukuran tersebut untuk menyiapkan kandidat ekspor.

Bagaimana kepadatan layar memengaruhi ukuran?

Satu piksel CSS dapat menggunakan lebih dari satu piksel fisik pada layar. Hubungannya disebut DPR atau device pixel ratio.²

Foto yang tampil selebar 400 piksel CSS dapat memanfaatkan sumber 800 piksel pada layar DPR 2. Ini bukan aturan bahwa semua foto ponsel harus berukuran 800 piksel.³

Sebagai perkiraan awal:

Lebar file ≈ lebar tampilan × kepadatan yang ditargetkan.

Untuk tampilan 360 piksel CSS, sumber 720 piksel bisa menjadi kandidat 2x. Untuk tampilan 700 piksel CSS, kandidat 2x menjadi 1.400 piksel.

Ada layar dengan DPR lebih tinggi. Namun, mengirim versi terbesar kepada semua orang belum tentu bermanfaat. Bandingkan 1x, 2x, dan ukuran tambahan ketika ada perbedaan yang terlihat. Tulisan kecil dan tekstur produk memerlukan perhatian berbeda dari foto dekoratif.

Rentang ukuran untuk memulai pengujian

Tabel berikut adalah saran awal untuk layout umum, bukan ketentuan Google atau ukuran universal. Angka menunjukkan lebar; tinggi mengikuti rasio gambar.

Kandidat tidak berarti setiap pengunjung harus mengunduh versi terbesar. Kartu sempit di desktop bisa membutuhkan lebih sedikit piksel daripada foto penuh lebar pada ponsel berkepadatan tinggi.

Jika banner melampaui rentang tersebut, ukur kembali. Satu banner sangat lebar bukan alasan untuk memperbesar semua gambar situs.

Mengapa terlalu banyak piksel dapat memperlambat halaman?

Jumlah piksel memengaruhi pekerjaan pengkodean dan tampilan. File terkompresi yang kecil tidak otomatis menghapus beban decoding gambar berdimensi besar.⁴

Gambar 800 × 600 memiliki 480.000 piksel. Gambar 1.600 × 1.200 memiliki 1.920.000 piksel. Menggandakan lebar dan tinggi menghasilkan empat kali jumlah piksel.

Ukuran file atau waktu pemuatannya tidak harus meningkat tepat empat kali. Perhitungan itu menunjukkan mengapa menambah dimensi perlu alasan yang jelas.

Pada katalog dengan puluhan produk, pemborosan bertambah. Jika thumbnail memakai sumber untuk zoom, pengunjung menerima detail yang tidak dapat dimanfaatkan pada ruang kecil.

Mengecilkan dengan CSS tidak mengecilkan unduhan

CSS dapat menampilkan foto selebar 300 piksel sambil tetap mengunduh file besar. Pengaturan visual tidak otomatis membuat versi file 300 piksel.

Buat sumber yang lebih kecil dan atur pengirimannya. srcset mencantumkan kandidat. sizes menjelaskan area tampilan ketika kandidat memakai deskriptor lebar.^{3, 5}

Browser memilih berdasarkan informasi itu serta konteks perangkat. Pilihannya dapat berbeda antarimplementasi; srcset bukan perintah kaku untuk selalu mengunduh satu file tertentu.

Jika sizes menyatakan gambar memenuhi layar padahal sebenarnya berada dalam kolom sempit, browser dapat memilih sumber yang terlalu besar.

Contoh gambar responsif

Bayangkan gambar dengan rasio 8:5, maksimal 640 piksel CSS pada desktop, dan margin 16 piksel pada setiap sisi ponsel. Siapkan file selebar 320, 640, 960, serta 1.280 piksel dengan konten dan rasio sama.

<img
  src="produk-640.webp"
  srcset="produk-320.webp 320w,
          produk-640.webp 640w,
          produk-960.webp 960w,
          produk-1280.webp 1280w"
  sizes="(max-width: 672px) calc(100vw - 32px), 640px"
  width="1280" height="800"
  alt="Tas biru dilihat dari depan">

Contoh ini mengandaikan CSS mengikuti ruang tampilan yang dijelaskan dan semua file tersedia. sizes tidak membuat atau mengubah dimensi file.⁵

Jika foto menjadi gambar utama pada layar pertama, periksa prioritas pemuatannya. Jika berada jauh di bawah, lazy loading dapat sesuai. Posisi dan fungsi ikut menentukan pengaturan.

Rasio, crop, dan kualitas yang terlihat

Gambar 1.200 × 800 memiliki rasio 3:2. Untuk ruang persegi, Anda perlu melakukan crop atau menerima area kosong. Meregangkan gambar dapat mengubah bentuk produk.

object-fit: cover mengisi ruang sambil mempertahankan rasio, dengan memotong sebagian tampilan. Properti itu tidak mengecilkan file yang diunduh.⁶ Crop saat ekspor dapat menghasilkan sumber lebih sesuai.

Pada banner, pertimbangkan komposisi berbeda untuk ponsel. Foto horizontal dapat membuat wajah, produk, atau tulisan terlalu kecil pada layar sempit. Elemen picture memungkinkan penggunaan sumber dengan crop berbeda.⁷

Jika memungkinkan, tulis informasi penting sebagai teks halaman. Tulisan yang menyatu dengan foto memerlukan piksel tambahan agar terbaca dan lebih sulit menyesuaikan layout.

Kapan sumber lebih besar diperlukan?

Sumber lebih besar masuk akal untuk detail zoom, area tampilan lebar, layar berkepadatan tinggi, atau kebutuhan lain dengan spesifikasi tersendiri.

Untuk produk, pertahankan versi navigasi yang ringan dan pertimbangkan memuat sumber zoom ketika pengguna membutuhkannya. Memperbesar thumbnail tidak mengembalikan tekstur yang hilang.

Ada persyaratan presentasi tertentu. Google memberikan panduan gambar besar untuk Discover, termasuk lebar setidaknya 1.200 piksel dan pengaktifan pratinjau besar. Periksa dokumentasi saat implementasi. Persyaratan itu tidak berarti setiap thumbnail harus selebar 1.200 piksel.⁸

Menyediakan gambar besar untuk tujuan tertentu dan mengirimnya ke semua pengunjung merupakan keputusan berbeda.

Gabungkan resolusi dengan kompresi dan pengaturan pemuatan

Sesudah menetapkan crop dan dimensi, bandingkan format serta kualitas. Lebar yang benar masih bisa menghasilkan file besar jika ekspornya kurang tepat. File dengan banyak piksel pun dapat tampak buram jika terlalu dikompresi.

Gunakan panduan format gambar untuk memilih ekspor. Simpan file asli agar versi berikutnya tidak dibuat dari thumbnail yang sudah menurun kualitasnya.

Cantumkan width dan height dengan rasio sesuai untuk mengurangi pergeseran layout.⁹ Gambar LCP sebaiknya tidak menggunakan lazy loading.¹⁰

Tidak ada satu sasaran KB yang cocok untuk avatar dan foto teknis yang dapat diperbesar. Buat anggaran data berdasarkan seluruh halaman, terutama pada galeri.

Cara memastikan gambar lebih ringan tetap berguna

Bandingkan halaman sebelum dan sesudah pada ponsel serta desktop. Periksa tulisan, detail, warna, dan zoom.

Di panel Network, lihat file yang diminta dan bytes yang diterima. Ukuran visual lebih kecil dapat memberi kesan optimasi padahal sumber unduhannya belum berubah.

Gunakan PageSpeed Insights dan data lapangan jika tersedia.¹¹ Periksa LCP, kestabilan tampilan, dan penghematan data. Kecepatan yang meningkat tidak membantu jika foto membuat produk sulit dinilai.

Panduan diagnosis gambar lambat membantu memeriksa sumber yang dikirim browser. Untuk membuat kandidat, ubah dimensi gambar di Imagyc lalu bandingkan hasilnya.

Jika dua versi tampak sama pada penggunaan nyata, versi lebih kecil bisa memadai. Jika detail penting hilang, sesuaikan kualitas atau dimensi untuk penggunaan tersebut. Tinjau kembali ukuran ketika desain berubah.

Pertanyaan yang sering diajukan

Apakah gambar ponsel selalu harus lebih kecil daripada desktop?

Tidak. Lebar tampilan dan kepadatan layar menentukan kebutuhan. Foto penuh layar pada ponsel bisa memerlukan sumber lebih besar daripada kartu sempit di desktop.

Apakah mengubah DPI menjadi 300 memperbaiki gambar web?

Mengubah angka resolusi cetak tanpa menambah atau mengubah piksel tidak memperbaiki detail gambar pada layar.

Apakah satu gambar besar cukup untuk semua perangkat?

Bisa ditampilkan, tetapi dapat membuang data. Beberapa kandidat responsif memberi pilihan yang lebih sesuai dengan penggunaan.