Membuat Gambar post Responsive dan Valid HTML5

Membuat Gambar post Responsive dan Valid HTML5 - Memberi gambar pada artikel menurut saya adalah wajib, setidaknya satu gambar pembuka. Selain sebagai infographic gambar pada artikel/postingan juga memiliki banyak fungsi, antara lain sebagai penghias, kata kunci pada pencarian gambar Google, pemberi jeda pada artikel yang panjang, serta berfungsi juga sebagai panduan ketika kita menulis tutorial.

Selain penggunaan gambar yang tepat seperti yang sedikit disinggung di materi Tips Menulis SEO Friendly,format gambar juga harus diperhatikan. Kemudian penamaan gambar sebelum di upload ke dalam artikel juga harus disesuaikan dengan materi yang disampaikan.

Kemudian mengenai ukuran gambar, ukuran gambar sangat bermasalah ketika kita menggunakan ukuran dengan resolusi tinggi melebihi ukuran lebar halaman posting yang nantinya akan berdampak buruk pada penampilan aritikel. Dan jika kita harus terus menerus menyesuaikan gambar melalui image editor tentu akan sangat merepotkan. Kemudian mengenai validasi HTML5 dimana sekarang semua situs disarankan untuk valid HTML5, kita juga harus men-setup terlebih dulu sebelum melakukan publish dan tidak bisa asal publish gambar yang kita upload.
Dan untuk mengatasi hal tersebut yang perlu kita lakukan adalah membuat ukurannya terus menyesuaikan dengan halaman posting dengan sekali setup.

Simak penjelasan yang akan disampaikan dibawah ini.

Membuat Gambar Post Menjadi Responsive
Perhatikan kode Css dibawah ini...
Letakkan kode Css dibawah ini tepat sebelum kode </head> pada HTML template editor.


/* Membuat gambar menjadi responsive */

.separator{background:#f5f5f5;border:1px solid #e5e5e5;float:none;max-width:100%; height: auto; width: auto; padding:20px 20px 12px;margin:20px auto 10px;text-align:center !important}

.separator img, .separator a img{max-width:100%; height: auto; width: auto;margin:0; padding:0;text-align:center !important;}

Dan harap perhatikan bahwa setup diatas tidak berlaku untuk gambar yang menggunakan caption.

Membuat Gambar Post Valid HTML5

Perhatikan setup yang diberikan dibawah ini.

Setelah gambar berhasil diunggah ke dalam artikel, klik gambar tersebut dan kemudian klik "Original size"
Kemudian klik "Properties" dan buatlah text title dan text alt pada gambar tersebut.
Selanjutnya klik "HTML" di bagian kiri atas post editor, kemudian cari kode dimana gambar itu berada dengan diawali dengan <div class="separator"....>
Hapus border="0" dan hapus juga bagian yang ditandai seperti pada gambar.
Selanjutnya Publikasikan artikel.