Gambar ideal untuk postingan blog

Postingan terkait:

1. Lolos Audit Pagespeed Insight
Daftar isi:
2. Intro
3. Dimensi standart
4. Demo
5. Tips

Dimensi gambar standart Facebook

Intro

Gambar ideal dalam postingan yang dimaksud disini adalah gambar pertama dari postingan umumnya diletakkan dihalaman paling atas.

Kenapa gambar / image pertama dalam sebuah postingan itu penting ?

Sebenarnya bukan penting, tapi lebih kepada "dibutuhkan". Karena selain sebagai identitas khusus yang membedakan dengan halaman lainnya dalam blog ataupun website, penempatan gambar dalam halaman ini bisa menjadi daya tarik tersendiri bagi pengunjung yang mengunjungi halaman tersebut. Contohnya halaman portal berita.

Walaupun blog yang dioptimasi bukan jenis portal berita, setidaknya gambar halaman bisa memberikan suasana yang lebih hidup dari pada teks saja. Kecuali halaman yang sifatnya dibutuhkan,
BUKAN membutuhkan pengunjung seperti ini.

Ukuran dimensi gambar ideal

Pedoman :

Sebenarnya ukuran / dimensi gambar dalam postingan itu tidak terikat oleh aturan apapun. Sekali lagi munculnya keharusan untuk menentukan ukuran gambar itu disebabkan karena kebutuhan optimasi halaman. Yang tujuannya agar halaman postingan memenuhi syarat untuk tampil di mesin pencarian dan tampil maksimal di semua platform media sosial pada saat dibagikan.

Sebagai pedoman yang paling umum adalah bagaimana agar halaman blog bisa ditampilkan maksimal pada saat dibagikan ke media sosial misal Facebook, Twitter dll.

Tampilan berbagi di Facebook

Tampilan berbagi di Twitter

Agar bisa ditampilkan, ukuran gambar yang direkomendasikan adalah sebagai berikut.

Rekomendasi dimensi gambar ideal

Berdasarkan standar Facebook Developer :

1. Ukuran file : Minimal kompresi hingga sekecil mungkin - maksimal hingga 8 Mb
2. Dimensi minimal : width:'200' height:'200'
3. Dimensi standar : width:'600' height:'315'
4. Dimensi terbaik: width:'1200' height:'630' (khusus untuk perangkat layar lebar)

Sebagai tambahan rekomendasi dari Google untuk format gambar terbaik gunakan .webp, karena format gambar ini bisa menampilkan kualitas baik dengan ukuran file terkompresi paling kecil dari format gambar umumnya semisal .jpg , .jpeg , .png.

Tips agar gambar postingan tampil terbaik disemua ukuran layar

Sediakan file dengan dimensi berbeda.

Diutamakan hanya untuk gambar utama / Featured Image, akan lebih maksimal jika menyediakan minimal 3 file dengan dimensi berbeda seperti standart yang diberikan Facebook diatas.

Ilustrasi tampilan gambar sesuai layar

200w600w1200w

Dengan kata lain :
Untuk 1 sesi tampilan gambar utama disematkan 3 file berbeda.
File gambar ini akan ditampilkan salah satu yang sesuai dengan ukuran layar pengunjung halaman tersebut. Jadi gambar yang tampil dihalaman tetap 1 gambar.

Demo :

Tampilan responsive.

Contoh menggunakan 3 file dengan dimensi berbeda pada tag img lihat di postingan :
Lolos audit ukuran gambar.
Berikut 3 URL file sebagai contoh :

1. https://i.postimg.cc/dtvqHPD5/640-360.jpg
2. https://i.postimg.cc/bwwqPxxb/1280-900.jpg
3. https://i.postimg.cc/BQgJRYK4/720-1280.jpg

Untuk melihat efeknya, ubah ukuran layar perangkat.
Jika menggunakan ponsel ubah dari mode potrait ke landscape atau jika menggunakan laptop / komputer bisa dengam me-minimize jendela browser

Lihat contoh virtual generated dari Responsinator:

Viewport 375px Viewport 768px Viewport 1024px