Ukuran Gambar Artikel Blog yang Ideal untuk Website dan Blog

Panduan praktis menentukan ukuran gambar artikel ideal untuk website dan blog — termasuk featured image, header, thumbnail, format file, optimasi

Daftar isi

Mengapa ukuran gambar penting?

Bayangkan membuka halaman yang semua gambarnya berukuran 3–4 MB. Lemot, kan? Pengunjung akan kabur, dan mesin pencari (seperti Google) juga menilai kecepatan halaman. Selain itu, ukuran dan rasio gambar yang tepat akan membuat tata letak tetap rapi, dalam hal ini gambar tidak akan terpotong atau buram di layar besar maupun kecil.

Ukuran gambar yang sering dipakai (panduan praktis)

Berikut ukuran yang umum dan kompatibel di banyak platform. Angka-angka ini adalah titik awal yang aman, tapi selalu fleksibel tergantung desain situs.

Featured image (gambar utama): 1200 × 628 px (rasio ~1.91:1). Ukuran ini sangat cocok untuk preview di media sosial (Facebook, LinkedIn, X) dan tampil cukup tajam di banyak tema WordPress dan Blogger.
Header / hero (lebar penuh): 1920 × 1080 px (16:9). Untuk tampilan layar lebar. Pastikan elemen penting berada di area aman yaitu bagian tengah layar karena bagian tepi bisa terpotong pada layar kecil.
Gambar di dalam artikel: 800 × 600 px (4:3). Ukuran ini seimbang antara kualitas dan kecepatan; nyaman untuk pembaca mobile dan desktop.
Thumbnail / list view: 400 × 250 px (16:10 atau 4:3). Untuk daftar artikel atau sidebar. Kecil tapi tetap informatif.
Ilustrasi atau icon: 300 × 300 px atau lebih kecil. Gunakan PNG atau SVG untuk grafis tajam pada berbagai resolusi.

Rasio aspek: kenapa penting?

Rasio aspek menentukan proporsi lebar dan tinggi. Untuk consistent look, pilih beberapa rasio utama dan pakai selalu. Contohnya, gunakan 16:9 untuk hero, 4:3 untuk gambar konten, dan 1.91:1 untuk featured image. Jika gambar dengan rasio berbeda, crop atau tambahkan padding agar tidak merusak layout.

Kalau untuk gambar di artikel blog saya ini, saya menggunakan rasio 16:9 atau 2:1 karena rasio ini memiliki tampilan dengan landscape yang cocok untuk tampilan layar, di desktop atau ponsel.

Resolusi dan DPI

Di web, DPI (dots per inch) kurang relevan dibanding ukuran piksel. Cukup pastikan ukuran piksel sesuai kebutuhan. Sebagai aturan: untuk tampilan normal 72–96 DPI sudah cukup. Untuk layar retina dan perangkat berkepadatan tinggi, sediakan versi 2x (misalnya featured image 1200×628 dan versi 2400×1256) jika ingin sangat tajam — tapi ingat file 2x akan lebih besar, jadi gunakan bila perlu.

Format file: kapan pakai JPEG, PNG, atau WebP?

JPEG. Pilihan utama untuk foto dengan ukuran file kecil dengan kualitas foto yang baik.
PNG. Bagus untuk gambar dengan area transparan atau grafis dengan teks. Namun ukuran file cenderung lebih besar.
WebP. Pilihan terbaik bila ingin ukuran kecil + kualitas baik. Dukungan browser kini luas, tapi siapkan fallback JPEG/PNG untuk beberapa kasus lama.
SVG. Ideal untuk logo dan icon karena scalable tanpa pecah. Jangan gunakan SVG untuk foto.

Optimasi tanpa mengorbankan kualitas

Jika kamu mengalami kendala untuk ukuran gambar artikel, berikut beberapa langkah cepat untuk mengoptimalkan gambar yaitu dengan menggunakan tool online atau offline:

Resize gambar ke dimensi yang dibutuhkan, jangan mengandalkan browser untuk mengecilkan gambar besar.
Compress file dengan menggunakan alat kompresi (tinypng, Squoosh, ImageOptim) agar ukuran file turun tanpa terlihat kehilangan kualitas signifikan.
Gunakan format modern seperti WebP ketika memungkinkan. Blogger sudah support ekstensi ini.
Lazy loading: muat gambar hanya ketika pengguna menggulir ke bagian gambar tersebut.
Responsive images: gunakan atribut srcset dan sizes di HTML agar browser memilih versi paling sesuai untuk layar pengguna.

Untuk gambar artikel yang saya gunakan, sebisa mungkin saya menggunakan ukuran dibawah 100 - 200 kb, jika melebihi ukuran tersebut akan saya kompres terlebih dulu. Saya biasanya menggunaka Photoshop.

Contoh implementasi responsive <img>

<img src="featured-1200.jpg"
     srcset="featured-600.jpg 600w, featured-1200.jpg 1200w, featured-2400.jpg 2400w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px"
     alt="Contoh featured image yang mendukung responsive" />

Penjelasan singkat: srcset memberi beberapa versi gambar; sizes memberitahu browser berapa lebar gambar akan tampil di kondisi layar yang berbeda, sehingga browser memilih file paling efisien.

SEO gambar: jangan lupa!

Optimasi gambar untuk membantu meningkatkan SEO blog atau website. Dan beberapa aturan dasar agar gambar lebih SEO Friendly :

Alt text: jelaskan gambar secara singkat dan relevan. Ini membantu aksesibilitas dan mesin pencari.
Nama file deskriptif: contoh cara-membuat-featured-image.jpg lebih baik daripada IMG_1234.jpg.
Gunakan sitemaps gambar jika situs Anda punya banyak gambar bernilai (misal situs berita atau katalog).

Performa vs kualitas: tips praktis

Jika harus memilih: prioritaskan kecepatan. Pengunjung menetap lebih lama pada situs yang cepat meski gambarnya sedikit kurang tajam. Namun ada trik untuk tetap menjaga kualitas visual:

Gunakan JPEG dengan kompresi sedang daripada PNG berat.
Untuk hero image, gunakan gambar 16:9 dengan fokus utama di tengah dan siapkan versi 1.5x–2x untuk retina.
Pertimbangkan teknik seperti progressive JPEG agar gambar tampak muncul lebih cepat saat dimuat.

Checklist cepat sebelum publikasi

Apakah ukuran piksel sesuai kebutuhan (featured/header/content)?
Apakah file sudah dikompres (≤ 200–300 KB ideal)?
Apakah ada alt text dan nama file deskriptif?
Apakah menggunakan srcset untuk responsive?
Apakah format file sesuai (foto: JPEG/WebP; ilustrasi: PNG/SVG)?

Contoh implementasi untuk WordPress

Di WordPress, tema sering mengatur ukuran gambar otomatis lewat add_image_size(). Contoh sederhana di file functions.php:

// Tambah ukuran gambar kustom
add_image_size( 'featured-1200', 1200, 628, true ); // crop pusat
add_image_size( 'hero-1920', 1920, 1080, true );
add_image_size( 'content-800', 800, 600, false ); // tidak dipaksa crop

Dengan begitu, WordPress akan otomatis menghasilkan versi gambar yang sesuai saat kita mengunggah foto. Saat menampilkan, gunakan fungsi seperti the_post_thumbnail('featured-1200') agar yang muncul adalah versi optimal.

Safe area & focal point

Untuk hero dan featured image, selalu perhatikan focal point (titik fokus). Banyak tema memotong tepi gambar ketika menampilkan versi mobile atau thumbnail. Simpan ruang kosong di sekitar objek utama atau gunakan tools crop yang mendukung focal point agar saat dipotong, inti gambar tetap terlihat.

Perangkat retina dan gambar 2x

Layar retina (densitas piksel tinggi) membuat gambar tampak kurang tajam jika hanya menggunakan versi 1x. Solusinya: sediakan gambar 2x lebih besar dan gunakan srcset untuk menyediakannya. Contoh: kalau versi normal 800×600, sediakan juga 1600×1200. Browser akan memilih versi 2x di perangkat yang memerlukannya.

Tools dan workflow yang direkomendasikan

Beberapa alat yang sering dipakai untuk membuat dan mengoptimalkan gambar:

Pengeditan & pembuatan gambar: Photoshop, Affinity Photo, GIMP (gratis), Figma untuk UI/ilustrasi.
Kompresi & konversi: Squoosh (web), TinyPNG, ImageOptim, jpegtran, cwebp untuk konversi ke WebP.
Automation: Gulp, Grunt, atau plugin WordPress seperti ShortPixel, Smush, atau EWWW Image Optimizer untuk mengompres gambar otomatis saat upload.

Kesalahan umum yang sering dilakukan

Berikut beberapa jebakan yang sering bikin performa turun atau tampilan rusak:

Mengunggah foto kamera penuh resolusi. Ingat, kamera bisa menghasilkan gambar 4000×3000 px, tapi sering tidak perlu. Resize dulu sebelum upload.
Tidak membuat versi responsive. Sangat penting diperhatikan, jangan biarkan ukuran gambar merusak tampilan. Saya sendiri pun merasakan kalau semua pengguna akhirnya mendapatkan file besar padahal perangkatnya kecil.
Memakai format PNG untuk foto. Menyebabkan ukuran file lebih besar tanpa keuntungan visual jelas.
Tidak menambahkan alt text. Mengurangi aksesibilitas dan peluang SEO.

Studi singkat — dua skenario

Skenario A: Blog resep makanan. Biasanya butuh banyak foto berkualitas: hero besar (1920×1080), featured 1200×628, dan beberapa foto dalam artikel 800×600. Gunakan WebP untuk versi utama dan fallback JPEG untuk browser lama. Kompres sehingga tiap foto tidak lebih dari 300 KB kecuali hero yang mungkin 400–600 KB.

Skenario B: Blog teknis / tutorial. Banyak screenshot dan diagram. Screenshot sebaiknya dikompres dan diformat PNG jika perlu teks jelas, atau WebP jika ukurannya besar. Sediakan versi 800 px untuk screenshot di artikel dan 1200 px untuk tampilan gallery.

Ringkasan praktis (cheat sheet)

Featured image: 1200×628 px
Hero / header: 1920×1080 px
Gambar konten: 800×600 px
Thumbnail: 400×250 px
Optimasi: resize → compress → sediakan srcset → lazy-load
Format: foto → WebP/JPEG; ilustrasi/logo → SVG/PNG
SEO: nama file deskriptif + alt text

Aksesibilitas & lisensi

Jangan lupa soal aksesibilitas. selain penggunaan alt text, pertimbangkan deskripsi panjang untuk gambar kompleks jika relevan. Juga pastikan sumber gambar legal, lebih baik gunakan lisensi bebas seperti Unsplash, Pexels atau beli lisensi jika perlu.

Lebih baik tetap menambahkan sumber gambar yang kamu gunakan jika memang dari luar atau bukan gambar milikmu. Untuk pembahan sumber artikel yang menarik seperti gambar artikel blog ini, silahkan baca Cara Menambahkan Sumber Gambar Artikel Blog.

Cari Blog Ini